QA de Navegador — Testes Visuais e de Interação Automatizados

Quando Usar

• Após implantar um recurso em staging/preview
• Quando precisar verificar o comportamento da UI em várias páginas
• Antes de enviar — confirme se layouts, formulários e interações realmente funcionam
• Ao revisar PRs que tocam em código frontend
• Auditorias de acessibilidade e testes responsivos

Como Funciona

Usa o MCP de automação de navegador (claude-in-chrome, Playwright ou Puppeteer) para interagir com páginas ao vivo como um usuário real.

Segurança em primeiro lugar — raio de impacto (executa somente leitura por padrão)

O QA de Navegador executa autenticação real e jornadas de usuário reais, então trate o raio de impacto explicitamente. Use somente leitura por padrão: nunca execute uma jornada mutável (checkout, pagamento, exclusão, atualização em massa) em uma URL de produção — exija um opt-in explícito e uma URL de staging/preview. Use credenciais de teste semeados, nunca logins de produção reais, e redija credenciais/tokens/PII antes de salvar qualquer captura de tela.

Fase 1: Teste de Fumaça

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
   (INP replaced FID in March 2024; thresholds per web.dev)

Fase 2: Teste de Interação

1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout (test creds only, never prod)
5. Test critical user journeys (checkout, onboarding, search)
   — read-only by default; only exercise mutating journeys against staging
     with explicit opt-in (see "Safety first" above)

Fase 3: Regressão Visual

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against committed baseline screenshots
   — no baseline ⇒ report INCONCLUSIVE, never a silent PASS
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Fase 4: Acessibilidade

1. Run axe-core or equivalent on each page
2. Flag WCAG 2.2 AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Nota: axe-core cobre automaticamente aproximadamente 30–40% do WCAG. Uma execução limpa é necessária, mas não suficiente — navegação por teclado, ordem de foco e uma passagem por leitor de tela ainda precisam de uma verificação manual. Não relate "acessível" apenas com uma passagem automatizada.

Formato de Saída

## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)
# verdict ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP; use INCONCLUSIVE if no visual baseline

Integração

Funciona com qualquer MCP de navegador:

• mChild__claude-in-chrome__* ferramentas (preferencial — usa seu Chrome real)
• Playwright via mcp__browserbase__*
• Scripts Puppeteer diretos

Combine com /canary-watch para monitoramento pós-implantação.