webapp-testing
Tester des applications web avec Playwright
Também disponível em: ZhanlinCui,AutumnsGrove,Azeem-2,Cam10001110101,7Spade,7Spade,sickn33,ComposioHQ,davila7,anthropics,ArtemisAI
Tester des applications web manuellement prend du temps et introduit des erreurs. Cette compétence fournit des scripts d'automatisation Playwright et des outils de gestion de serveur pour vérifier la fonctionnalité frontend, capturer des captures d'écran, déboguer le comportement UI et consulter les logs de la console du navigateur.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "webapp-testing". Tester la page de connexion de mon application React locale sur le port 5173
Resultado esperado:
- Démarrage de Chromium et navigation vers http://localhost:5173
- Attente de networkidle - page complètement chargée
- Trouvé 3 champs de saisie : username, password, remember
- Trouvé 2 boutons : Sign In, Forgot Password
- Rempli les champs username et password
- Cliqué sur le bouton Sign In
- Page redirigée vers /dashboard
- Logs console capturés : 12 messages (3 avertissements, 0 erreurs)
- Capture d'écran sauvegardée vers /tmp/after_login.png
Auditoria de Segurança
Baixo RiscoLegitimate web testing toolkit using Playwright. All static findings are false positives. URLs flagged are localhost test addresses, subprocess calls are for local dev server management, and 'weak crypto' detections are scanner errors on license text and argparse definitions. No network exfiltration, credential access, or persistence mechanisms.
Fatores de risco
⚡ Contém scripts (1)
⚙️ Comandos externos (1)
📁 Acesso ao sistema de arquivos (1)
Pontuação de qualidade
O Que Você Pode Construir
Automatiser les tests de régression UI
Créer des scripts Playwright pour vérifier que les composants UI s'affichent correctement et que les interactions fonctionnent comme prévu.
Capturer des captures d'écran de reproduction de bugs
Naviguer vers les états de l'application et capturer des captures d'écran et les logs de la console pour documenter les problèmes.
Tester des applications full-stack
Gérer ensemble les serveurs backend et frontend pour exécuter des tests end-to-end sur des applications complètes.
Tente Estes Prompts
Écrire un script Playwright pour naviguer vers http://localhost:5173, attendre networkidle, et sauvegarder une capture d'écran de page complète vers /tmp/page.png
Écrire un script qui découvre tous les boutons, liens et champs de saisie sur http://localhost:3000 et affiche leur contenu textuel et leurs attributs
Utiliser scripts/with_server.py pour démarrer un serveur de développement sur le port 5173, puis exécuter un script Playwright qui clique sur le bouton de soumission et capture la sortie console
Écrire une commande utilisant with_server.py qui démarre à la fois un backend Python sur le port 3000 et un frontend npm sur le port 5173, puis exécute un script d'automatisation
Melhores Práticas
- Toujours attendre networkidle avant d'inspecter les applications web dynamiques
- Utiliser le helper with_server.py pour gérer automatiquement le cycle de vie du serveur
- Exécuter d'abord les scripts avec --help pour comprendre les options disponibles avant de les modifier
Evitar
- Ne pas inspecter le DOM avant networkidle sur les SPAs - le contenu peut ne pas être encore affiché
- Ne pas coder en dur les identifiants dans les scripts - utiliser les variables d'environnement à la place
- Ne pas oublier de fermer le navigateur à la fin - les ressources peuvent fuir
Perguntas Frequentes
Quels navigateurs sont pris en charge ?
Puis-je tester des pages authentifiées ?
Comment tester des pages derrière une authentification ?
Mes données sont-elles en sécurité lors de l'exécution de ces scripts ?
Pourquoi ma page est vide lorsque je l'inspecte ?
En quoi est-ce différent de Selenium ou Cypress ?
Detalhes do Desenvolvedor
Estrutura de arquivos