Playwright para iniciantes: primeiros passos

O Playwright requer Node.js 18+. A instalação é feita via npm:

npm init playwright@latest

O assistente de instalação pergunta: usar TypeScript ou JavaScript, onde colocar os testes, se adicionar GitHub Actions CI. Recomenda-se TypeScript para projetos profissionais.

Ao final, são criados:

• playwright.config.ts — configuração global (browsers, baseURL, timeout)
• tests/ — diretório de testes
• tests-examples/ — exemplos para referência

Para baixar os browsers necessários:

npx playwright install

Um teste básico no Playwright verifica se uma página carrega corretamente:

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

test('página inicial carrega com título correto', async ({ page }) => {
  await page.goto('https://meusite.com');
  await expect(page).toHaveTitle(/Meu Site/);
});

test('botão de login está visível', async ({ page }) => {
  await page.goto('https://meusite.com');
  await expect(page.getByRole('link', { name: 'Entrar' })).toBeVisible();
});

Para executar:

npx playwright test

Para rodar com interface visual:

npx playwright test --ui

As interações mais comuns:

// Clicar em elemento
await page.getByRole('button', { name: 'Salvar' }).click();

// Preencher campo
await page.getByLabel('E-mail').fill('usuario@teste.com');

// Selecionar opção em dropdown
await page.getByLabel('País').selectOption('Brasil');

// Fazer upload de arquivo
await page.getByLabel('Arquivo').setInputFiles('documento.pdf');

// Aguardar elemento aparecer
await page.getByText('Salvo com sucesso').waitFor();

O Playwright tem auto-waiting embutido: antes de cada ação, ele aguarda automaticamente que o elemento esteja visível, estável e habilitado. Isso elimina a maioria dos sleep() e waitFor() explícitos que infestam testes em Selenium.

Após executar os testes, o Playwright gera um relatório HTML:

npx playwright show-report

O relatório mostra: testes passando/falhando, tempo de execução, screenshots automáticos de falhas, traces (gravação completa da execução para debugging).

Para depurar um teste específico em modo visual:

npx playwright test meu-teste.spec.ts --debug

O Playwright Inspector abre ao lado do browser, permitindo avançar passo a passo e ver o estado do DOM em cada instrução.

Qual comando instala os browsers necessários para o Playwright?