Playwright é o framework E2E mais rápido e confiável. Testa Chrome, Firefox, Safari e mobile com uma API. Microsoft usa internamente.
Conceitos Principais
Auto-Waiting
Espera elemento estar visível, enabled, stable. Retry automático. Elimina 90% dos timeouts. Testes menos flaky.
Cross-Browser
Chromium, Firefox, WebKit (Safari). Um código, 3 engines. Mobile emulation. Testa iPad, iPhone, Android.
Network Control
Intercept requests. Mock APIs. Block resources. Simulate offline. Request/response modification.
Trace Viewer
Recording de execução. Screenshots de cada step. Network logs. DOM snapshots. Debug post-mortem.
Passo a Passo
- Instale Playwright: npm init playwright@latest. Escolhe browsers, test dir. Cria exemplos. Instala VS Code extension.
- Primeiro Teste: test("login", async ({ page }) => { await page.goto("/"); await page.fill("input[name=email]", "user@test.com"); }).
- Multi-Browser: playwright.config.ts: projects [chromium, firefox, webkit]. npx playwright test --project=firefox. CI roda todos.
- Codegen: npx playwright codegen https://example.com. Abre browser, grave ações. Gera código automaticamente. Acelera escrita.
- CI/CD Integration: GitHub Actions: uses: microsoft/playwright-github-action. Roda em paralelo. Upload artifacts (traces, videos).
Boas Praticas
Recomendacoes
• Use Codegen para prototipar testes
• Page Object Model para reuso
• Trace em falhas (retryWithVideo)
• Paralelize tests (workers)
• Mock APIs para testes rápidos
Erros Comuns
Evite estes erros
• Não usar auto-wait (adicionar sleeps)
• Testar apenas Chrome
• Não salvar traces em falhas
• E2E para tudo (lentos, caros)
• Seletores CSS frágeis
Checklist
- Playwright instalado
- Multi-browser configurado
- Page Objects criados
- Traces em falhas
- CI/CD rodando testes
- Cobertura dos fluxos críticos