teste-de-aplicacao-web

Teste de Aplicação Web

Para testar aplicações web locais, escreva scripts Python nativos com Playwright.

Scripts Auxiliares Disponíveis:

• scripts/with_server.py - Gerencia o ciclo de vida do servidor (suporta múltiplos servidores)

Sempre execute scripts com --help primeiro para ver o uso. NÃO leia o código-fonte até tentar executar o script primeiro e descobrir que uma solução personalizada é absolutamente necessária. Esses scripts podem ser muito grandes e, portanto, poluir sua janela de contexto. Eles existem para serem chamados diretamente como scripts de caixa-preta, em vez de serem ingeridos em sua janela de contexto.

Árvore de Decisão: Escolhendo sua Abordagem

Tarefa do usuário → É HTML estático?
    ├─ Sim → Ler arquivo HTML diretamente para identificar seletores
    │         ├─ Sucesso → Escrever script Playwright usando seletores
    │         └─ Falha/Incompleto → Tratar como dinâmico (abaixo)
    │
    └─ Não (webapp dinâmico) → O servidor já está rodando?
        ├─ Não → Executar: python scripts/with_server.py --help
        │        Então usar o helper + escrever script Playwright simplificado
        │
        └─ Sim → Padrão Reconhecimento-Então-Ação:
            1. Navegar e aguardar networkidle
            2. Tirar screenshot ou inspecionar DOM
            3. Identificar seletores a partir do estado renderizado
            4. Executar ações com os seletores descobertos

Exemplo: Usando with_server.py

Para iniciar um servidor, execute --help primeiro, depois use o helper:

Servidor único:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

Múltiplos servidores (ex.: backend + frontend):

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

Para criar um script de automação, inclua apenas a lógica do Playwright (os servidores são gerenciados automaticamente):

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Sempre inicie chromium em modo headless
    page = browser.new_page()
    page.goto('http://localhost:5173') # Servidor já rodando e pronto
    page.wait_for_load_state('networkidle') # CRÍTICO: Aguardar execução do JS
    # ... sua lógica de automação
    browser.close()

Padrão Reconhecimento-Então-Ação

1. Inspecionar DOM renderizado:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. Identificar seletores a partir dos resultados da inspeção

3. Executar ações usando os seletores descobertos

Armadilha Comum

❌ Não inspecione o DOM antes de aguardar networkidle em aplicações dinâmicas ✅ Faça aguardar page.wait_for_load_state('networkidle') antes da inspeção

Melhores Práticas

• Use scripts empacotados como caixas-pretas - Para realizar uma tarefa, considere se um dos scripts disponíveis em scripts/ pode ajudar. Esses scripts lidam com fluxos de trabalho comuns e complexos de forma confiável, sem poluir a janela de contexto. Use --help para ver o uso, depois invoque diretamente.
• Use sync_playwright() para scripts síncronos
• Sempre feche o navegador quando terminar
• Use seletores descritivos: text=, role=, seletores CSS ou IDs
• Adicione esperas apropriadas: page.wait_for_selector() ou page.wait_for_timeout()

Arquivos de Referência

• examples/ - Exemplos mostrando padrões comuns:
  • element_discovery.py - Descobrindo botões, links e entradas em uma página
  • static_html_automation.py - Usando URLs file:// para HTML local
  • console_logging.py - Capturando logs de console durante automação