Capítulo 329 de 456

Playwright

Core Idea

Setup de Playwright para E2E testing multi-browser (Chromium, Firefox, WebKit) com uma única API, contra o Next.js rodando localmente.

Key Concepts

  • npm init playwright: wizard interativo que gera playwright.config.ts e configura o projeto.
  • baseURL: opção de config que permite usar page.goto("/") em vez de URL completa.
  • webServer: feature do config que deixa o Playwright subir o dev server automaticamente e esperar disponibilidade.
  • npx playwright install-deps: instala as dependências de sistema necessárias para rodar os browsers em 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 via clique em texto e assert de URL + conteúdo.

Anti-patterns

  • Rodar Playwright contra next dev: recomendado rodar next build && next start antes, para testar contra o comportamento de produção.
  • Rodar em CI sem install-deps: browsers podem falhar por falta de dependências de sistema.

Key Takeaways

  1. Playwright roda os três engines (Chromium, Firefox, WebKit) com a mesma API de teste.
  2. webServer no config elimina a necessidade de subir o servidor manualmente antes dos testes.
  3. Por padrão, Playwright roda em modo headless em CI.

Connects To

  • Cypress: alternativa de E2E, mais focada em single-browser (Chromium-based) mas com Component Testing nativo.
  • Vitest / Jest: cobrem unit testing, não E2E.
AnteriorJestPróximoVitest