Habilidades webapp-testing
📦

webapp-testing

Baixo Risco ⚙️ Comandos externos📁 Acesso ao sistema de arquivos

Testar Aplicações Web com Automação Playwright

Também disponível em: 7Spade,DYAI2025,davila7,ArtemisAI,7Spade,Azeem-2,anthropics,ComposioHQ,Cam10001110101,AutumnsGrove

Testes de aplicações web locais requerem automação de navegador confiável sem configuração manual. Este kit de ferramentas fornece scripts Playwright e utilitários de gerenciamento de servidor para otimizar fluxos de trabalho de testes de frontend.

Suporta: Claude Codex Code(CC)
🥉 73 Bronze
1

Baixar o ZIP da skill

2

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

3

Ative e comece a usar

Testar

A utilizar "webapp-testing". Discover all interactive elements on localhost:5173

Resultado esperado:

  • Found 12 buttons: [0] Submit, [1] Cancel, [2] Login...
  • Found 8 links: - Dashboard -> /dashboard, - Profile -> /profile...
  • Found 5 input fields: - email (email), - password (password)...
  • Screenshot saved to /tmp/page_discovery.png

A utilizar "webapp-testing". Capture console logs during user flow

Resultado esperado:

  • Console: [log] App initialized
  • Console: [warning] Deprecated API usage
  • Console: [error] Failed to load resource: net::ERR_CONNECTION_REFUSED
  • Captured 15 console messages. Logs saved to outputs/console.log

Auditoria de Segurança

Baixo Risco
v1 • 2/24/2026

Static analysis flagged 38 patterns, but manual review confirms all HIGH-severity findings are false positives. The 'weak cryptographic algorithm' detections are scanner errors on argparse code. Shell backtick findings are Markdown documentation formatting. Subprocess usage in with_server.py is intentional server management functionality requiring explicit CLI invocation. Hardcoded localhost URLs and temp file writes are expected for local testing toolkit.

5
Arquivos analisados
310
Linhas analisadas
3
achados
1
Total de auditorias
Problemas de Baixo Risco (1)
Subprocess with shell=True
with_server.py uses subprocess.Popen with shell=True to start development servers. This is intentional functionality for a server management helper script. Commands are passed via CLI arguments, requiring explicit user invocation. Risk is mitigated by design - users explicitly provide the server commands.
Auditado por: claude

Pontuação de qualidade

45
Arquitetura
100
Manutenibilidade
87
Conteúdo
50
Comunidade
88
Segurança
83
Conformidade com especificações

O Que Você Pode Construir

Testes de Regressão de Frontend

Automatizar verificação de componentes de UI após mudanças no código para capturar mudanças quebrantes antes do deploy.

Validação do Servidor de Desenvolvimento

Iniciar automaticamente servidores de backend e frontend, executar testes de integração e então limpar recursos.

Depuração de Logs do Console

Capturar e analisar saída do console do navegador para identificar erros e avisos de JavaScript durante fluxos de usuário.

Tente Estes Prompts

Navegação Básica em Página
Navegue até meu app React local em localhost:3000, espere a página carregar completamente e tire uma captura de tela da página inicial.
Descoberta de Elementos
Visite minha aplicação web e liste todos os botões, links e campos de formulário na página atual com seu conteúdo de texto e atributos.
Captura de Logs do Console
Execute meu script de automação capturando todas as mensagens do console do navegador. Salve os logs em um arquivo e relate quaisquer erros ou avisos encontrados.
Teste de Integração Completo
Inicie meu servidor de backend na porta 8000 e frontend na porta 5173, então execute meu script de teste Playwright que faz login, navega para o dashboard e verifica se os elementos principais estão presentes. Limpe os servidores após os testes terminarem.

Melhores Práticas

  • Sempre aguarde o estado networkidle antes de interagir com páginas dinâmicas para garantir que o JavaScript foi totalmente executado
  • Use o script auxiliar with_server.py para gerenciar o ciclo de vida do servidor em vez de iniciar e parar servidores manualmente
  • Execute scripts com a flag --help primeiro para entender as opções disponíveis antes de personalizar a lógica de automação

Evitar

  • Não inspecione o DOM ou tire capturas de tela antes de aguardar networkidle em aplicações dinâmicas
  • Evite ler código fonte do script na janela de contexto - use documentação --help e invoque como ferramentas black-box
  • Não use timeouts fixos como wait_for_timeout quando seletores específicos podem ser aguardados com wait_for_selector

Perguntas Frequentes

Como testo uma aplicação que requer autenticação?
Inclua etapas de login em seu script Playwright antes de navegar para páginas protegidas. Você pode armazenar credenciais em variáveis de ambiente ou usar o recurso de estado de armazenamento do Playwright para reutilizar sessões autenticadas.
Posso testar múltiplos servidores simultaneamente?
Sim, with_server.py suporta múltiplos pares de --server e --port. Cada servidor inicia em sequência, aguarda prontidão e então executa seu comando de teste após todos os servidores estarem prontos.
Por que meus testes estão falhando quando a página tem conteúdo dinâmico?
Certifique-se de chamar page.wait_for_load_state('networkidle') após navegação. Para elementos específicos, use page.wait_for_selector() para aguardar elementos aparecerem antes de interagir.
Como capturo capturas de tela do navegador para depuração visual?
Use page.screenshot(path='filename.png', full_page=True) para capturar a página inteira. As capturas de tela são salvas no caminho especificado e podem ser visualizadas após a execução do teste.
Quais navegadores são suportados para testes?
Playwright suporta Chromium, Firefox e WebKit. Esta skill usa Chromium em modo headless por padrão para confiabilidade. Você pode modificar os scripts para usar outros navegadores se necessário.
Como instalo as dependências necessárias?
Instale o Playwright com pip install playwright, então execute playwright install para baixar os binários do navegador. Certifique-se de que Python 3.7 ou superior está disponível em seu ambiente.

Detalhes do Desenvolvedor

Licença

Complete terms in LICENSE.txt

Referência

main