Introdução aos Testes de UI com Playwright

Os testes de UI são uma parte crítica do desenvolvimento frontend, garantindo que suas aplicações web funcionem corretamente do ponto de vista do usuário. O Playwright, framework de automação open-source da Microsoft, emergiu como uma ferramenta poderosa para testes de UI que é tanto amigável para desenvolvedores quanto robusta. Se você já ouviu falar do Playwright mas ainda não o experimentou, este guia mostrará como ele funciona e se encaixa no seu fluxo de trabalho atual.
Principais Pontos
- O Playwright oferece testes cross-browser com uma única API para Chrome, Firefox e Safari
- Auto-waiting e ambientes de teste isolados reduzem testes instáveis
- Ferramentas de debugging integradas como Inspector e Trace Viewer simplificam a solução de problemas
- Suporta testes de design responsivo, comparações visuais e testes de componentes
- Integra facilmente com pipelines de CI/CD para testes automatizados
O que é o Playwright e Por que Usá-lo para Testes de UI?
O Playwright é um framework de testes end-to-end que permite escrever testes que executam em todos os navegadores modernos (Chrome, Firefox, Safari) usando uma única API. Diferente de outras ferramentas de teste, o Playwright foi especificamente projetado para aplicações web modernas com recursos que tornam os testes de UI mais confiáveis e menos instáveis.
As principais vantagens para testes de UI incluem:
- Auto-waiting: O Playwright automaticamente aguarda que os elementos sejam acionáveis antes de executar operações
- Isolamento: Cada teste executa em um contexto de navegador novo, prevenindo interferência entre testes
- Suporte cross-browser: Escreva uma vez, teste em qualquer lugar com o mesmo código
- Capacidades web modernas: Lida com Shadow DOM, iframes e componentes web modernos
- Ferramentas poderosas: Ferramentas de debugging integradas como Playwright Inspector e Trace Viewer
Configurando o Playwright para Testes de UI
Começar com o Playwright é simples. Você precisará do Node.js instalado, então pode configurar um novo projeto:
# Create a new directory for your project
mkdir playwright-ui-testing
cd playwright-ui-testing
# Initialize a new Playwright project
npm init playwright@latest
Durante a configuração, você será questionado sobre algumas opções. Para testes de UI, você pode selecionar TypeScript, adicionar workflow do GitHub Actions e instalar navegadores quando solicitado.
A instalação cria uma estrutura básica de projeto com:
playwright.config.ts
: Arquivo de configuração para seus testes- Diretório
tests
: Onde seus arquivos de teste ficarão - Diretório
.github
: Configuração de CI se você selecionou GitHub Actions
Escrevendo Seu Primeiro Teste de UI
Vamos escrever um teste de UI simples que verifica se um card de produto aparece corretamente em um site de e-commerce. Crie um novo arquivo chamado product-ui.spec.ts
no diretório tests
:
import { test, expect } from '@playwright/test';
test('product card displays correctly', async ({ page }) => {
// Navigate to the page
await page.goto('https://demo-store.playwright.dev');
// Find a product card
const productCard = page.locator('.product-card').first();
// Verify the product card is visible
await expect(productCard).toBeVisible();
// Verify it contains expected elements
await expect(productCard.locator('.product-title')).toBeVisible();
await expect(productCard.locator('.product-price')).toBeVisible();
await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
// Extract and verify product information
const title = await productCard.locator('.product-title').textContent();
console.log(`Found product: ${title}`);
});
Este teste:
- Abre um site de loja demo
- Localiza um card de produto
- Verifica que elementos-chave estão visíveis e habilitados
- Extrai o título do produto (mostrando como você pode extrair informações)
Executando Testes de UI
Para executar seu teste, use a CLI do Playwright:
npx playwright test product-ui.spec.ts
Por padrão, o Playwright executa testes em modo headless. Para ver o navegador em ação:
npx playwright test product-ui.spec.ts --headed
Para executar testes em um navegador específico:
npx playwright test product-ui.spec.ts --project=chromium
Testes de UI Avançados com Playwright
Testando Designs Responsivos
O Playwright facilita testar sua UI em diferentes tamanhos de tela:
test('product card is responsive', async ({ page }) => {
// Test on mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('https://demo-store.playwright.dev');
// Verify mobile layout
await expect(page.locator('.mobile-menu-button')).toBeVisible();
// Test on desktop viewport
await page.setViewportSize({ width: 1280, height: 800 });
// Verify desktop layout
await expect(page.locator('.desktop-navigation')).toBeVisible();
});
Testes Visuais
O Playwright suporta comparações visuais para detectar mudanças inesperadas na UI:
test('product page visual test', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev/product/1');
// Compare screenshot with baseline
await expect(page).toHaveScreenshot('product-page.png');
});
Na primeira vez que você executa este teste, ele cria uma screenshot de referência. Nas execuções subsequentes, compara o estado atual com a referência.
Testando Elementos de UI Dinâmicos
Aplicações web modernas frequentemente têm elementos de UI dinâmicos. O Playwright lida bem com estes:
test('add product to cart updates counter', async ({ page }) => {
await page.goto('https://demo-store.playwright.dev');
// Get initial cart count
const cartCount = page.locator('.cart-count');
await expect(cartCount).toHaveText('0');
// Add product to cart
await page.locator('.product-card button.add-to-cart').first().click();
// Verify cart count updates
await expect(cartCount).toHaveText('1');
});
Fazendo Debug de Testes de UI
Quando testes falham, o Playwright oferece ferramentas poderosas de debugging:
Playwright Inspector
Lance o inspetor visual para fazer debug dos seus testes:
PWDEBUG=1 npx playwright test product-ui.spec.ts
O inspetor permite:
- Percorrer a execução do teste passo a passo
- Inspecionar o DOM
- Visualizar logs do console
- Explorar requisições de rede
Trace Viewer
Os traces registram informações detalhadas sobre a execução do teste:
// In your playwright.config.ts
export default defineConfig({
use: {
trace: 'on-first-retry', // Record traces on first retry of failed tests
},
});
Após um teste falhar, visualize o trace:
npx playwright show-trace test-results/product-ui-test-chromium/trace.zip
O visualizador de trace mostra:
- Screenshots em cada etapa
- Snapshots do DOM
- Atividade de rede
- Logs do console
Integrando Testes de UI do Playwright no Seu Fluxo de Trabalho
Executando Testes em CI
O Playwright funciona bem com sistemas de CI. Para GitHub Actions, o assistente de configuração cria um arquivo de workflow que executa seus testes em push e pull requests.
Para outros sistemas de CI, você pode usar a imagem Docker do Playwright:
# Example for GitLab CI
test:
image: mcr.microsoft.com/playwright:v1.40.0-focal
script:
- npm ci
- npx playwright test
artifacts:
when: always
paths:
- playwright-report/
expire_in: 1 week
Testes de Componentes
Além de testes em nível de página, o Playwright também suporta testes de componentes para frameworks como React, Vue e Svelte:
// Example for React component testing
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';
test('ProductCard renders correctly', async ({ mount }) => {
const component = await mount(
<ProductCard
title="Test Product"
price="$19.99"
image="/test-image.jpg"
/>
);
await expect(component).toContainText('Test Product');
await expect(component).toContainText('$19.99');
await expect(component.locator('button')).toBeEnabled();
});
Perguntas Frequentes
O Playwright oferece suporte cross-browser imediatamente e lida com múltiplas abas e janelas, com o que o Cypress tem dificuldades. O Playwright também tende a ter menos limitações ao testar entre domínios. No entanto, o Cypress tem um ecossistema mais maduro e uma interface de test runner mais amigável.
Não. O Playwright é projetado para testes end-to-end e de integração. Testes unitários com frameworks como Jest ainda são valiosos para testar funções individuais e componentes isoladamente.
O Playwright permite armazenar o estado de autenticação e reutilizá-lo entre testes. Primeiro, lance um navegador, navegue para a página de login e execute as etapas de login preenchendo os campos de usuário e senha e enviando o formulário. Uma vez logado, salve o estado de armazenamento do navegador em um arquivo, que contém os dados de autenticação. Nos seus testes reais, você pode configurar o Playwright para usar este estado de autenticação armazenado para que não precise fazer login antes de cada teste. Esta abordagem acelera suas execuções de teste e garante consistência entre sessões.
Sim, o Playwright tem capacidades integradas de comparação de screenshots. Para testes visuais mais avançados, você pode integrar com ferramentas especializadas como Percy ou Applitools.
Você pode acelerar seus testes de UI do Playwright executando-os em paralelo, que é habilitado por padrão. Durante o desenvolvimento, use a flag --project para executar testes apenas em navegadores específicos. Reutilizar o estado de autenticação em vez de fazer login durante cada teste também reduz o tempo de execução. Além disso, usar testes de componentes fornece feedback mais rápido para componentes individuais de UI.
Conclusão
Ao incorporar o Playwright na sua estratégia de testes, você pode construir aplicações frontend mais confiáveis com a confiança de que sua UI funciona corretamente entre navegadores e dispositivos. Seus mecanismos de auto-waiting, recursos de isolamento e ferramentas poderosas de debugging abordam muitos pontos problemáticos comuns em testes de UI. Seja testando designs responsivos, aparência visual ou interações dinâmicas, o Playwright fornece uma solução abrangente que se integra perfeitamente com fluxos de trabalho de desenvolvimento modernos.