Capítulo 88 de 456

Playwright

Core Idea

Setup do Playwright no Next.js para End-to-End Testing, com uma única API automatizando Chromium, Firefox e WebKit.

Key Concepts

  • npm init playwright: gera playwright.config.ts interativamente.
  • baseURL: opção de config que permite usar page.goto("/") em vez da URL completa.
  • webServer: feature do Playwright que deixa ele mesmo iniciar o dev server e esperar disponibilidade antes de rodar os testes.
  • Modo headless por padrão em CI: npx playwright install-deps instala todas as dependências necessárias no CI.

Code Examples

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

test('should navigate to the about page', async ({ page }) => {
  await page.goto('http://localhost:3000/')
  await page.click('text=About')
  await expect(page).toHaveURL('http://localhost:3000/about')
  await expect(page.locator('h1')).toContainText('About')
})
  • O que demonstra: teste E2E de navegação, clicando num link por texto e validando URL + conteúdo da nova página.

Anti-patterns

  • Rodar Playwright contra next dev em vez do build de produção: recomenda-se next build && next start antes de rodar os testes, para refletir o comportamento real da aplicação (Playwright roda os três engines de browser contra o servidor).

Key Takeaways

  1. Playwright testa contra três engines (Chromium, Firefox, WebKit) com a mesma API — cobertura cross-browser sem código duplicado.
  2. webServer na config evita ter que subir o servidor manualmente antes dos testes.
  3. Em CI, use modo headless (padrão) e rode npx playwright install-deps para as dependências de sistema.

Connects To

  • Testing (ch085): página-índice que referencia este guia.
  • Cypress (ch086): alternativa de E2E testing com filosofia similar (também suporta Component Testing, diferente do Playwright neste guia).
AnteriorJestPróximoVitest