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.

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:

1. Abre um site de loja demo
2. Localiza um card de produto
3. Verifica que elementos-chave estão visíveis e habilitados
4. 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

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.