Playwright em CI/CD: boas práticas e relatórios

O Playwright gera um workflow de CI pronto durante a instalação. Se precisar criar manualmente:

# .github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Configure o relatório HTML no playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['html', { outputFolder: 'playwright-report', open: 'never' }],
    ['list'],
  ],
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
});

Com essa configuração, cada teste que falha gera automaticamente: screenshot do momento da falha, vídeo da execução completa e um trace para análise detalhada. Esses artefatos ficam disponíveis no GitHub Actions por 30 dias.

O Playwright executa testes em paralelo por padrão (workers = número de CPUs). Para grandes suítes, use sharding para distribuir entre múltiplas máquinas de CI:

# playwright.config.ts
export default defineConfig({
  workers: process.env.CI ? 2 : undefined,
});

# Executar shard 1 de 4 no CI:
npx playwright test --shard=1/4

Com 4 máquinas em paralelo, uma suíte de 200 testes que levaria 20 minutos passa a levar ~5 minutos. O Playwright Merge Reports combina os relatórios de todos os shards no final.

Testes flaky (que falham intermitentemente) são o maior problema em suítes de E2E. Estratégias para identificar e corrigir:

• Use trace no modo CI: trace: 'on-first-retry' grava o trace apenas quando um teste é re-tentado, capturando o problema sem overhead constante.
• Evite hardcoded waits: substituir await page.waitForTimeout(2000) por assertivas com retry — await expect(elemento).toBeVisible().
• Isole o estado de cada teste: use fixtures de autenticação e limpe dados entre testes. Testes que dependem de estado compartilhado falham de forma imprevisível.
• Use --repeat-each para reproduzir flakiness: npx playwright test --repeat-each=5 executa cada teste 5 vezes, revelando falhas intermitentes.

Qual configuração faz o Playwright capturar screenshot apenas quando um teste falha?