webapp-testing
Teste aplicações web com automação Playwright
Également disponible depuis: ZhanlinCui,AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,ComposioHQ,davila7,anthropics,ArtemisAI
Testes locais de aplicações web exigem gerenciamento de servidores e automação de interações com o navegador. Esta skill fornece scripts Playwright e auxiliares de servidor para otimizar fluxos de trabalho de teste de frontend.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "webapp-testing". Descobrir todos os elementos interativos em uma página de login
Résultat attendu:
- Encontrados 3 campos de input: email (type=email), password (type=password), remember (type=checkbox)
- Encontrados 2 botões: 'Sign In' (submit), 'Forgot Password?' (link)
- Screenshot salva em /tmp/login_page.png mostrando layout do formulário
Utilisation de "webapp-testing". Testar submissão de formulário com servidor rodando
Résultat attendu:
- Servidor iniciado na porta 3000
- Navegado para http://localhost:3000/login
- Preenchido campo email com 'test@example.com'
- Clicado botão Sign In
- Verificado navegação para /dashboard
- Servidor parado corretamente
Audit de sécurité
SûrStatic analysis detected 42 patterns but all are false positives. LICENSE.txt URLs are standard Apache 2.0 license references. 'Weak cryptographic algorithm' findings incorrectly flagged license text and argparse code. subprocess usage in with_server.py is legitimate for server management. SKILL.md code blocks are documentation examples, not executable code. Skill is safe for publication.
Problèmes à risque faible (1)
Facteurs de risque
⚡ Contient des scripts
⚙️ Commandes externes (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
Desenvolvedor Frontend Testando Componentes UI
Automatize testes de componentes React ou Vue iniciando o servidor de desenvolvimento e verificando o comportamento da UI com scripts Playwright.
Teste de Integração Full-Stack
Execute servidor backend API e servidor frontend simultaneamente, depois execute testes end-to-end na aplicação integrada.
Detecção de Regressão Visual
Capture screenshots de estados da aplicação web e compare visualmente para detectar mudanças não intencionais na UI durante desenvolvimento.
Essayez ces prompts
Use a skill webapp-testing para inspecionar um arquivo HTML local e encontrar todos os elementos button. Navegue até o arquivo, aguarde a página carregar, depois liste todos os botões com seu conteúdo de texto.
Inicie um servidor de desenvolvimento React na porta 3000 usando with_server.py, depois escreva um script Playwright que navegue até o app, clique no botão de login e verifique se o dashboard aparece.
Use with_server.py para iniciar um backend Python Flask na porta 5000 e um frontend Vite na porta 5173. Escreva um teste que submeta um formulário no frontend e verifique se os dados aparecem na resposta do backend.
Navegue até uma aplicação web local, aguarde networkidle, capture uma screenshot de página completa em /tmp/debug.png e extraia o HTML do conteúdo da página. Identifique todos os campos de input e seus labels associados.
Bonnes pratiques
- Sempre aguarde o estado networkidle antes de inspecionar aplicações web dinâmicas
- Use o auxiliar with_server.py como caixa preta - execute --help primeiro para entender o uso
- Capture screenshots antes da inspeção do DOM para contexto de depuração visual
Éviter
- Inspecionar o DOM antes de aguardar networkidle em aplicações pesadas em JavaScript
- Ler código fonte do script no contexto quando --help fornece informações de uso suficientes
- Usar URLs file:// para aplicações dinâmicas que requerem um servidor em execução