Angular Academy · Aula

Escrevendo testes com Playwright

Automatize fluxos do navegador com Playwright.

Escrevendo testes com Playwright é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Seu primeiro teste com Playwright

Um teste do Playwright é uma função assíncrona que recebe dispositivos de teste, como page. Você importa test e expect de @playwright/test e descreve um cenário de usuário.

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

test('opens the home page', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveURL(/.*localhost/);
});

O dispositivo de teste page

O objeto page representa uma única aba do navegador. Cada teste recebe um page novo e isolado em um contexto limpo, para que os testes nunca compartilhem cookies ou armazenamento por acidente.

Navegando com goto

page.goto(url) carrega uma URL e espera até que a página esteja pronta. Combinado com baseURL na configuração, você pode usar caminhos relativos.

await page.goto('/login');      // resolves against baseURL
await page.goto('https://example.com'); // absolute also works

Encontrando elementos com localizadores

Um localizador é uma referência tardia a um elemento, com espera automática. Prefira localizadores semânticos, como getByRole, getByLabel e getByText, a seletores CSS frágeis.

const submit = page.getByRole('button', { name: 'Sign in' });
const email = page.getByLabel('Email');

Digitando e clicando

Use fill para definir valores de entrada e click para pressionar botões. O Playwright espera automaticamente até que os elementos estejam visíveis e habilitados antes de agir.

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

A espera automática elimina esperas instáveis

Ao contrário das ferramentas mais antigas, o Playwright espera automaticamente pelos elementos e até que as asserções se tornem verdadeiras. Quase nunca são necessários tempos limite manuais, o que torna os testes estáveis.

// No need for: await page.waitForTimeout(2000)
await expect(page.getByText('Welcome back')).toBeVisible();

Agrupando testes com describe

Use test.describe para agrupar cenários relacionados e compartilhar a preparação com beforeEach.

test.describe('Login flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('shows the form', async ({ page }) => {
    await expect(page.getByLabel('Email')).toBeVisible();
  });
});

Testando um percurso completo do usuário

Encadeie ações para modelar um fluxo completo. Cada etapa deve ser lida como um roteiro do comportamento do usuário.

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('ada@example.com');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL(/.*dashboard/);
});

Executando os testes

Execute todas as especificações pelo CLI. Adicione --headed para observar o navegador ou --ui para abrir o executor interativo de testes do Playwright.

npx playwright test
npx playwright test --headed
npx playwright test --ui

Depurando falhas

Em caso de falha, o Playwright pode capturar capturas de tela, vídeos e um rastreamento que você pode reproduzir passo a passo. O visualizador de rastreamentos mostra o DOM a cada ação, facilitando o diagnóstico de falhas instáveis.

npx playwright test --trace on
npx playwright show-trace trace.zip

O isolamento dos testes é importante

Como cada teste recebe seu próprio contexto de navegador, não dependa da ordem nem de um estado compartilhado entre os testes. Configure os dados necessários para cada teste no próprio beforeEach ou dentro do teste.

Verificação rápida

Por que evitar waitForTimeout?

Recapitulação

Um teste do Playwright usa o dispositivo de teste page: goto para navegar, localizadores semânticos (getByRole, getByLabel) para encontrar elementos e fill/click para interagir. A espera automática elimina esperas instáveis. Agrupe com describe, execute com npx playwright test e depure com rastreamentos.

Perguntas Frequentes

A aula “Escrevendo testes com Playwright” é grátis?

Sim — o texto completo de “Escrevendo testes com Playwright” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Escrevendo testes com Playwright”?

Automatize fluxos do navegador com Playwright. Você pratica Angular 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 Angular Academy?

Nenhuma experiência prévia é necessária. Angular 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 2 de 4.

Quanto tempo leva a aula “Escrevendo testes com Playwright”?

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 Angular Academy?

Sim. Cada aula de Angular 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

← Voltar para Angular Academy