Svenja-dev/claude-code-skills

Habilidade de Teste E2E

Gatilho

• Palavras-chave: teste, e2e, playwright, browser test, visual test, smoke test
• Chamada: /e2e-test [suite] [--flags]

Descrição

Teste E2E automatizado com comportamento humano para preview e produção. Utiliza Chrome MCP ou Playwright MCP para automação de navegador.

Suítes de Teste

Suíte	Duração	Descrição
smoke	30s	Login, Upload, UI básica (Padrão em "teste")
full	5min	Todos os cenários P0+P1
visual	2min	Apenas comparação de screenshots
upload	1min	Todos os formatos de arquivo
download	2min	Funções de exportação
login	30s	Fluxo de autenticação
api	1min	Testes de endpoints de API

Flags

Flag	Descrição
--preview	Testar apenas localhost
--production	Testar apenas URL de produção
--quick	Apenas cenários P0 (teste mais rápido)
--human	Chrome MCP com navegador real
--headless	Playwright MCP headless (CI/CD)
--update-baselines	Atualizar baselines de screenshot
--mobile	Testar viewports móveis (375px, 768px)

Fluxo de Trabalho

1. VERIFICAÇÃO DE AMBIENTE
   - Verificar se localhost está rodando (curl/fetch)
   - Verificar se URL de produção está acessível
   - Escolher ambiente de teste baseado nas flags

2. CONFIGURAÇÃO DO NAVEGADOR
   - Se --human: Usar Chrome MCP (mcp__claude-in-chrome__)
   - Senão: Usar Playwright MCP (mcp__playwright__)
   - Viewport: 1280x720 (Desktop) ou 375x667 (Mobile)

3. ATIVAR COMPORTAMENTO HUMANO
   - Delays randomizados: 200-800ms entre ações
   - Velocidade de digitação: 50-150ms por tecla
   - Passar o mouse antes de clicar (pausa de 200-500ms)
   - Scroll suave em vez de instantâneo

4. EXECUTAR SUÍTE DE TESTE
   - Para cada teste: screenshot antes/depois
   - Em caso de erro: salvar screenshot + logs do console
   - Verificação de download: verificar tamanho do arquivo

5. GERAR RELATÓRIO
   - Relatório Markdown em .playwright-mcp/reports/
   - Imagens de diff para discrepâncias visuais
   - Resumo com status Pass/Fail/Flaky

Cenários de Teste (P0 - Críticos para o Negócio)

1. Carregamento da Página Inicial

- Navegar para URL
- Aguardar elemento principal visível
- Verificar logotipo/marca visível
- Screenshot: landing-page.png

2. Fluxo de Login/Auth

- Clicar no botão de Login
- Aguardar animação de modal/página
- Verificar opções de autenticação visíveis (OAuth, Email, etc.)
- Screenshot: login-modal.png

3. Alternar Idioma (se i18n)

- Encontrar alternador de idioma
- Clicar com delay humano
- Aguardar mudança de texto
- Verificar se os textos da UI mudaram
- Screenshot: language-toggle.png

4. Upload de Arquivo (se houver)

- Clicar na área de upload
- Selecionar arquivo de teste
- Aguardar confirmação
- Verificar se o nome do arquivo é exibido
- Screenshot: file-uploaded.png

5. Executar Ação Principal

- Executar função principal do app
- Aguardar estado de carregamento
- Aguardar resultado (máx. 60s)
- Verificar se o conteúdo do resultado está presente
- Screenshot: result.png

6. Exportar/Download (se houver)

- Clicar no botão de Download
- Aguardar evento de download
- Verificar se o formato do arquivo está correto
- Verificar se o tamanho do arquivo > mínimo
- Screenshot: download-complete.png

Cenários de Teste (P1 - Importantes)

7. Navegação/Histórico

- Clicar em elemento de navegação
- Aguardar animação
- Verificar se o conteúdo correto foi carregado

8. Alternador de Tema (se houver)

- Encontrar alternador de tema
- Anotar cores atuais
- Clicar no alternador
- Verificar se as cores mudaram
- Screenshot: theme-toggle.png

9. Design Responsivo

- Definir viewport para 375x667
- Verificar navegação móvel visível
- Verificar funções principais acessíveis
- Screenshot: mobile-view.png

10. Tratamento de Erros

- Provocar erro (entrada inválida)
- Aguardar mensagem de erro
- Verificar se o erro é amigável ao usuário
- Screenshot: error-state.png

Funções de Comportamento Humano

// Delay randomizado (200-800ms)
async function humanDelay() {
  const delay = 200 + Math.random() * 600;
  await page.waitForTimeout(delay);
}

// Digitação humana (50-150ms por tecla)
async function humanType(selector: string, text: string) {
  await page.click(selector);
  await humanDelay();
  for (const char of text) {
    await page.keyboard.type(char);
    await page.waitForTimeout(50 + Math.random() * 100);
  }
}

// Padrão Passar mouse -> Pausa -> Clicar
async function humanClick(selector: string) {
  await page.hover(selector);
  await page.waitForTimeout(200 + Math.random() * 300);
  await page.click(selector);
  await humanDelay();
}

// Scroll suave
async function humanScroll(pixels: number) {
  await page.evaluate((px) => {
    window.scrollTo({ top: px, behavior: "smooth" });
  }, pixels);
  await page.waitForTimeout(500);
}

Formato do Relatório

## Relatório de Teste E2E - [DATA] [HORA]

### Ambiente

- **URL**: [URL testada]
- **Navegador**: Chromium [versão]
- **Viewport**: 1280x720
- **Suíte**: smoke

### Resultados

| # | Teste | Status | Duração | Screenshot |
| --- | --- | --- | --- | --- |
| 1 | Carregamento da Página Inicial | PASS | 0.8s | [ver](landing-page.png)|
| 2 | Modal de Login | PASS | 1.2s | [ver](login-modal.png) |
| 3 | Upload de Arquivo | PASS | 2.1s | [ver](file-uploaded.png)|
| 4 | Ação Principal | LENTO | 45.2s | [ver](result.png) |
| 5 | Download | FAIL | 3.4s | [ver](error.png) |

### Resumo

- **Total**: N testes
- **Passados**: X (Y%)
- **Falhos**: A (B%)
- **Lentos/Instáveis**: C (D%)
- **Duração**: Zs

Baselines Visuais

.playwright-mcp/
├── baselines/                    # Referência dourada (rastreado por git)
│   ├── landing-page-desktop.png
│   ├── landing-page-mobile.png
│   ├── login-modal.png
│   ├── result.png
│   └── error-state.png
├── current/                      # Screenshots atuais (ignorado por git)
├── diffs/                        # Diferenças de pixel (ignorado por git)
└── reports/                      # Relatórios de teste (ignorado por git)

Execução

Chamada Mais Simples

Usuário: "teste"
-> Executa suíte smoke no ambiente disponível

Testes Específicos

Usuário: "teste upload"
-> Executa apenas a suíte de upload

Usuário: "teste production visual"
-> Executa suíte visual em produção

Usuário: "teste --quick --human"
-> Teste rápido com navegador Chrome real

Integração CI/CD

Usuário: "teste --headless --full"
-> Todos os testes headless para pipeline

Tratamento de Erros

1. Localhost inacessível:

   • Exibir aviso
   • Perguntar se o servidor de desenvolvimento deve ser iniciado

2. Produção inacessível:

   • Exibir aviso
   • Verificar status do deploy

3. Timeout de teste (>60s):

   • Screenshot do estado atual
   • Salvar logs do console
   • Marcar como FAIL

4. Diff visual detectado:

   • Gerar imagem de diff
   • Marcar como FLAKY (não automaticamente FAIL)
   • Usuário decide se é necessário atualizar baseline

Configuração

Arquivo opcional .e2e-config.json na raiz do projeto:

{
  "previewUrl": "http://localhost:5173",
  "productionUrl": "https://your-app.com",
  "defaultSuite": "smoke",
  "timeouts": {
    "navigation": 10000,
    "action": 60000,
    "download": 30000
  },
  "viewports": {
    "desktop": { "width": 1280, "height": 720 },
    "tablet": { "width": 768, "height": 1024 },
    "mobile": { "width": 375, "height": 667 }
  },
  "humanBehavior": {
    "enabled": true,
    "minDelay": 200,
    "maxDelay": 800,
    "typingSpeed": { "min": 50, "max": 150 }
  },
  "screenshots": {
    "onEveryStep": false,
    "onFailure": true,
    "fullPage": false
  }
}

Pré-requisitos

• Chrome MCP ou Playwright MCP instalado
• Projeto Node.js com package.json
• Opcional: .e2e-config.json para configuração do projeto

Autor

Dresden AI Insights - https://dresdenaiinsights.com