Testes end-to-end têm reputação de ser lentos, instáveis e caros de manter. O Playwright, framework de automação de browsers da Microsoft, ataca diretamente as causas raiz desses problemas. Suporte a múltiplos browsers, espera automática e contextos de browser isolados resultam em testes mais rápidos de escrever e com menor probabilidade de falhar por razões alheias ao código em teste.

Veja por que o Playwright vale a pena e como começar.

Por Que Usar Playwright para Testes Web?

Suporte a Múltiplos Browsers

O Playwright suporta Chromium, Firefox e WebKit a partir de uma única API. Um único arquivo de teste cobre os três browsers sem duplicar lógica. Isso importa porque diferenças de renderização entre browsers ainda causam bugs reais para os usuários, e encontrá-los no CI é muito mais barato do que encontrá-los em produção.

Isolamento Total com Browser Contexts

Os browser contexts fornecem múltiplas sessões isoladas dentro de uma única instância de browser. Os testes não compartilham cookies, local storage ou cache. Isso elimina uma fonte comum de interdependência entre testes, onde os efeitos colaterais de um teste fazem outro falhar de forma imprevisível.

Auto-Wait e Testes Resilientes

O Playwright aguarda os elementos estarem acionáveis antes de interagir com eles. Ele verifica se um elemento está visível, habilitado e sem obstruções antes de clicar ou digitar. Isso elimina a necessidade de chamadas explícitas a sleep ou loops de retry que tornam os testes lentos e frágeis.

Suporte a Linguagens

O Playwright oferece suporte de primeira classe para JavaScript, TypeScript, Python, Java e .NET. A maioria das equipes Node.js usa TypeScript, o que fornece verificações estáticas em strings de seletor e tipos de asserção.

Capacidades Adicionais

O Playwright pode interceptar e modificar requisições de rede, simular geolocalização, controlar permissões do browser, emular viewports mobile, capturar screenshots em caso de falha e gerar arquivos de trace para depuração. Esses não são recursos de nicho; eles aparecem regularmente em suítes de testes reais.

Começando com Playwright

Pré-requisitos

  • Node.js instalado. Baixe em nodejs.org.
  • Familiaridade com JavaScript ou TypeScript.
  • Um editor de código, preferencialmente Visual Studio Code.

Instalação

npm install --save-dev playwright

Isso instala o Playwright e baixa os binários dos browsers para Chromium, Firefox e WebKit.

Configuração do Projeto

mkdir playwright-tests
cd playwright-tests
npm init -y

Configuração do TypeScript (Opcional)

npm install --save-dev typescript ts-node

Crie um arquivo tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "dist"
  }
}

Criando Seu Primeiro Teste

Escrevendo o Teste

Crie um arquivo chamado example.spec.js:

const { chromium } = require('playwright');

(async () => {
  // Iniciar browser
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  
  // Abrir nova página
  const page = await context.newPage();
  
  // Navegar para a URL
  await page.goto('https://www.example.com');
  
  // Obter título da página
  const title = await page.title();
  console.log(`Page title: ${title}`);
  
  // Fechar browser
  await browser.close();
})();

Executando o Teste

node example.spec.js

Definir headless: false abre uma janela de browser visível para que você possa acompanhar a execução do teste. Útil para depuração; defina como true no CI.

Adicionando Asserções com Playwright Test

Instale o test runner integrado:

npm install --save-dev @playwright/test

Reescreva o teste com asserções adequadas:

// example.spec.js
const { test, expect } = require('@playwright/test');

test('Verify page title', async ({ page }) => {
  await page.goto('https://www.example.com');
  await expect(page).toHaveTitle('Example Domain');
});

Atualize o package.json:

"scripts": {
  "test": "playwright test"
}

Em seguida, execute:

npm run test

Funcionalidades Avançadas

Testes Cross-Browser

const { test, expect } = require('@playwright/test');

test.describe.configure({ mode: 'parallel' });

for (const browserType of ['chromium', 'firefox', 'webkit']) {
  test(`Verify page title in ${browserType}`, async ({ browser }) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    
    await page.goto('https://www.example.com');
    await expect(page).toHaveTitle('Example Domain');
    
    await context.close();
  });
}

Screenshots e Tracing

test('Verify page title with screenshot', async ({ page }, testInfo) => {
  try {
    await page.goto('https://www.example.com');
    await expect(page).toHaveTitle('Example Domain');
  } catch (error) {
    await page.screenshot({ path: `screenshots/${testInfo.title}.png` });
    throw error;
  }
});

Testes de API

O Playwright lida com requisições de API junto com interações do browser, o que é útil para configurar o estado do teste sem passar pela UI:

test('API test', async ({ request }) => {
  const response = await request.get('https://api.example.com/data');
  expect(response.status()).toBe(200);
  const data = await response.json();
  expect(data).toHaveProperty('key');
});

Boas Práticas

Use o Page Object Model para manter seletores e lógica específica de páginas fora dos arquivos de teste. Os testes devem ser lidos como especificações, não como scripts de travessia do DOM. Use os hooks beforeAll, beforeEach, afterAll e afterEach para configurar e desmontar o estado. Execute os testes em paralelo para manter a suíte rápida. Gerencie a configuração de ambiente por meio de arquivos de configuração em vez de URLs hardcoded.

Integre o Playwright ao seu pipeline de CI desde cedo. Testes que só rodam localmente não são testes de verdade.

Integração com CI

GitHub Actions

Crie .github/workflows/playwright.yml:

name: Playwright Tests

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

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run Playwright tests
        run: npm run test

Conclusão

A espera automática do Playwright por si só elimina a maior parte da fragilidade que torna os testes E2E difíceis de manter. O suporte cross-browser e as capacidades de interceptação de rede o tornam genuinamente útil para os tipos de bugs que escapam pelos testes unitários. Se o seu projeto não tem cobertura E2E, o Playwright é o framework com o qual começar. Se o seu projeto tem testes Selenium ou Cypress existentes, o Playwright vale a pena ser avaliado para novas suítes, especialmente onde a cobertura cross-browser ou a execução paralela têm sido um gargalo.