Playwright: Testes End-to-End Modernos com Rastreabilidade e Suporte Multi-navegador

O que é Playwright?

Playwright é um framework de automação de testes end-to-end (E2E) de código aberto, criado e mantido pela Microsoft. Lançado em 2020, ele rapidamente se consolidou como uma das ferramentas mais poderosas para testar aplicações web modernas, oferecendo suporte nativo aos três principais engines de navegador: Chromium, Firefox e WebKit (Safari).

Diferente de ferramentas como Selenium (que usa WebDriver), o Playwright utiliza o protocolo nativo de debugging dos navegadores (Chrome DevTools Protocol), o que lhe confere muito mais velocidade, confiabilidade e capacidade de introspecção. Com uma única API, você testa sua aplicação em múltiplos navegadores, em paralelo, com resultados consistentes.

Por que Playwright?

O mercado de testes E2E sempre foi dominado por Selenium e, mais recentemente, Cypress. Playwright trouxe inovações que o colocam como a escolha moderna:

• Suporte multi-navegador real: Testa em Chromium, Firefox e WebKit com a mesma API — sem adaptadores ou drivers separados.
• Auto-waiting inteligente: O Playwright automaticamente espera elementos ficarem visíveis, estáveis e habilitados antes de interagir, eliminando a necessidade de sleep() ou waitFor() explícitos.
• Network interception e mocking: Intercepte, modifique ou simule requisições de rede sem depender de ferramentas externas.
• Mobile emulation: Emule dispositivos móveis com viewport, user-agent e touch events reais.
• Testes em paralelo: Execute testes em múltiplos navegadores e workers simultaneamente.
• Trace Viewer: Grave toda a execução do teste — cada ação, requisição de rede e console log — para debugging visual.

Instalação e Configuração

Começar com Playwright é incrivelmente simples:

# Instalar o Playwright (modo biblioteca)
npm install --save-dev @playwright/test
npx playwright install

# Ou instalar apenas um navegador específico
npx playwright install chromium

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 4 : undefined,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 13'] } },
  ],
});

Escrevendo seu Primeiro Teste

Testes no Playwright são escritos em uma sintaxe limpa e expressiva, similar a outros frameworks de teste modernos:

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test('deve fazer login com credenciais válidas', async ({ page }) => {
  // Navegar para a página de login
  await page.goto('/login');

  // Preencher formulário com auto-wait
  await page.fill('input[name="email"]', 'usuario@exemplo.com');
  await page.fill('input[name="password"]', 'senha123');

  // Clicar no botão de login
  await page.click('button[type="submit"]');

  // Verificar redirecionamento ao dashboard
  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.locator('h1')).toHaveText('Bem-vindo');
});

Network Mocking e Interceptação

test('deve tratar erro 500 da API', async ({ page }) => {
  // Interceptar e mockar a resposta da API
  await page.route('**/api/users/**', async route => {
    await route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Internal Server Error' }),
    });
  });

  await page.goto('/profile');
  await expect(page.locator('.error-message')).toContainText('Erro ao carregar perfil');
});

CI/CD: Integração Contínua

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps \${{ matrix.browser }}
      - run: npx playwright test --project=\${{ matrix.browser }}
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report-\${{ matrix.browser }}
          path: playwright-report/

Playwright vs Cypress

Codegen: Gerando Testes Automaticamente

Playwright inclui uma ferramenta chamada Codegen que registra suas interações no navegador e gera o código do teste automaticamente:

npx playwright codegen http://localhost:3000

Uma janela do navegador abre com o DevTools do Playwright. Cada clique, cada preenchimento, cada navegação é registrado e traduzido para código. Você pode copiar o código gerado diretamente para seus arquivos de teste.

Testes de API

Playwright também permite testar APIs diretamente, sem precisar de um navegador:

import { test, expect } from '@playwright/test';

test('criar usuário via API', async ({ request }) => {
  const response = await request.post('/api/users', {
    data: {
      name: 'João Silva',
      email: 'joao@exemplo.com',
    }
  });
  expect(response.ok()).toBeTruthy();
  const body = await response.json();
  expect(body.id).toBeDefined();
  expect(body.name).toBe('João Silva');
});

Conclusão

Playwright representa o estado da arte em testes end-to-end para aplicações web modernas. Seu suporte multi-navegador nativo, auto-waiting inteligente, network mocking e Trace Viewer fazem dele a ferramenta mais completa e produtiva do mercado atual.

Se você está começando um novo projeto de testes ou considerando migrar de Selenium ou Cypress, o Playwright oferece uma combinação incomparável de potência, simplicidade e confiabilidade. Comece com npm init playwright e em minutos você terá sua primeira suíte de testes rodando em Chromium, Firefox e WebKit — em paralelo.