React Academy · Aula

Primeiros passos com Playwright para React

Escreva testes do Playwright que abram um navegador, interajam com o aplicativo React e verifiquem os resultados.

Aula 3 de 414 etapas

Primeiros passos com Playwright para React é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O que é o Playwright

O Playwright é uma estrutura de testes E2E para Node.js que controla navegadores reais Chromium, Firefox e WebKit. Ele é ideal para testar fluxos completos de aplicações React, incluindo roteamento, autenticação e interações com APIs.

Instalação

Instale o Playwright e os binários dos navegadores com um único comando.

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Configuração do Playwright para React

Configure o Playwright para iniciar seu servidor de desenvolvimento antes de executar os testes.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Escrevendo seu primeiro teste

Os testes utilizam page, um objeto que representa uma página do navegador. Navegue até uma URL, interaja com os elementos e verifique o resultado.

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Localizadores

Os localizadores do Playwright são semelhantes às consultas do RTL. Prefira localizadores baseados em funções para obter maior resiliência.

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Clicando e digitando

Interaja com os elementos usando click(), fill(), press() e selectOption().

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Aguardando a navegação

O Playwright aguarda automaticamente até que os elementos estejam prontos, mas também permite aguardar explicitamente a conclusão da navegação ou das requisições de rede.

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Verificações

Use expect(locator) com os verificadores integrados do Playwright. Eles aguardam automaticamente até que a condição seja verdadeira.

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Capturando imagens da tela em caso de falha

O Playwright captura automaticamente imagens da tela e rastreamentos quando um teste falha, se estiver configurado para isso. Ative esse recurso na configuração.

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Executando os testes

Execute todos os testes sem abrir o navegador ou use --ui para abrir o explorador de testes interativo, que permite percorrer os testes visualmente.

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Visualizador de rastreamentos do Playwright

Quando um teste falhar, abra o arquivo de rastreamento com npx playwright show-trace para reproduzir o teste passo a passo, com imagens da tela, requisições de rede e registros do console.

Integração contínua

Por padrão, o Playwright é executado sem abrir o navegador na integração contínua. Instale os navegadores com npx playwright install --with-deps e execute os testes como um script npm normal.

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Verificação rápida

Qual método do Playwright deve ser utilizado para preencher um campo de entrada de texto?

Responda na aula interativa

Recapitulação

Os testes do Playwright usam navegadores reais e aguardam automaticamente pelos elementos. Use localizadores baseados em funções, fill() e click() para interações, expect(locator) para verificações e o modo --ui para depuração visual durante o desenvolvimento.

Grátis para começar

Aprenda React com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 88
Aulas: 324

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Primeiros passos com Playwright para React” é grátis?

Sim — o texto completo de “Primeiros passos com Playwright para React” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Primeiros passos com Playwright para React”?

Escreva testes do Playwright que abram um navegador, interajam com o aplicativo React e verifiquem os resultados. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Primeiros passos com Playwright para React”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Testes de integração com React Testing Library
Testando interface assíncrona e chamadas de API com MSW
Primeiros passos com Playwright para React
Testando formulários e fluxos do usuário de ponta a ponta

← Voltar para React Academy