teste-webapp

Teste de Aplicações Web

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

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 o 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 auxiliar + escrever script Playwright simplificado
        │
        └─ Sim → Reconhecimento-então-ação:
            1. Navegar e aguardar networkidle
            2. Capturar screenshot ou inspecionar DOM
            3. Identificar seletores a partir do estado renderizado
            4. Executar ações com seletores descobertos

Exemplo: Usando with_server.py

Para iniciar um servidor, execute --help primeiro, então use o auxiliar:

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 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 iniciar 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 seletores descobertos

Armadilha Comum

❌ Não inspecione o DOM antes de aguardar networkidle em aplicativos dinâmicos ✅ Faça aguarde por 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 e, em seguida, 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 do console durante a automação