PricingLoginStart free
React Academy · Aula

Testando formulários e fluxos do usuário de ponta a ponta

Automatize envios de formulários em várias etapas e fluxos de navegação com objetos de página do Playwright.

Aula 4 de 414 etapas

Testando formulários e fluxos do usuário de ponta a ponta é uma aula grátis de React Academy no CoddyKit. Esta é a aula 4 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.

Estratégia de testes E2E de formulários

Os testes E2E de formulários simulam a jornada completa do usuário: acessar a página, preencher os campos, enviar o formulário, tratar erros de validação e verificar o resultado de sucesso.

Modelo de objeto de página

O Modelo de objeto de página (POM) encapsula os seletores e as interações de uma página em uma classe, tornando os testes mais legíveis e reduzindo a duplicação.

class LoginPage {
  constructor(private page: Page) {}

  async goto() { await this.page.goto('/login'); }
  async fillEmail(email: string) { await this.page.getByLabel('Email').fill(email); }
  async fillPassword(pw: string) { await this.page.getByLabel('Password').fill(pw); }
  async submit() { await this.page.getByRole('button', { name: /log in/i }).click(); }
  async getError() { return this.page.getByRole('alert').textContent(); }
}

Usando o objeto de página nos testes

Ao usar objetos de página, os testes se tornam descrições das ações do usuário no nível da intenção — fáceis de ler e manter.

test('successful login redirects to dashboard', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.fillEmail('alice@example.com');
  await loginPage.fillPassword('password123');
  await loginPage.submit();
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});

Testando erros de validação

Envie dados inválidos ou vazios e verifique as mensagens de erro exibidas pela interface.

test('shows validation errors on empty submit', async ({ page }) => {
  await page.goto('/register');
  await page.getByRole('button', { name: 'Create account' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
  await expect(page.getByText('Password must be at least 8 characters')).toBeVisible();
});

Testando formulários de várias etapas

Em assistentes de várias etapas, avance por cada etapa, verificando se o formulário avança e mantém os dados inseridos anteriormente.

test('completes 3-step signup', async ({ page }) => {
  await page.goto('/signup');
  // Step 1
  await page.getByLabel('First Name').fill('Alice');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 2
  await page.getByLabel('Plan').selectOption('pro');
  await page.getByRole('button', { name: 'Next' }).click();
  // Step 3
  await page.getByLabel('Card Number').fill('4242424242424242');
  await page.getByRole('button', { name: 'Complete' }).click();
  await expect(page.getByText('Welcome, Alice!')).toBeVisible();
});

Simulando APIs no Playwright

Use page.route() para interceptar chamadas à API e retornar respostas simuladas — isso é útil para testar casos extremos sem um back-end real.

await page.route('/api/register', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ token: 'fake-token' }),
  });
});

await page.goto('/register');
// ...fill and submit form
await expect(page).toHaveURL('/dashboard');

Testando envios de arquivos

Use setInputFiles() para simular o envio de um arquivo no Playwright.

test('uploads a profile photo', async ({ page }) => {
  await page.goto('/profile');
  const fileInput = page.getByLabel('Profile photo');
  await fileInput.setInputFiles('./fixtures/avatar.png');
  await page.getByRole('button', { name: 'Upload' }).click();
  await expect(page.getByAltText('Profile photo')).toBeVisible();
});

Reutilizando o estado de autenticação

Faça login uma vez, salve o estado de armazenamento do navegador e reutilize-o entre os testes para ignorar fluxos de login repetidos.

// auth.setup.ts
test('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('alice@example.com');
  await page.getByLabel('Password').fill('password');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.context().storageState({ path: 'e2e/.auth/user.json' });
});

// playwright.config.ts — use storageState in other tests
use: { storageState: 'e2e/.auth/user.json' }

Testando a recuperação de erros

Simule falhas de rede e verifique se o usuário consegue tentar novamente ou vê uma mensagem de erro útil.

await page.route('/api/submit', route => route.abort());
await page.getByRole('button', { name: 'Submit' }).click();
await expect(page.getByText('Network error. Please try again.')).toBeVisible();
await page.unroute('/api/submit');
// Now the real request goes through
await page.getByRole('button', { name: 'Retry' }).click();

Testando a navegação pelo teclado

Teste se os formulários são totalmente acessíveis pelo teclado, percorrendo os campos com a tecla Tab e enviando-os com Enter.

test('submits form with keyboard only', async ({ page }) => {
  await page.goto('/contact');
  await page.keyboard.press('Tab'); // focus name
  await page.keyboard.type('Alice');
  await page.keyboard.press('Tab'); // focus email
  await page.keyboard.type('alice@example.com');
  await page.keyboard.press('Tab'); // focus submit
  await page.keyboard.press('Enter');
  await expect(page.getByText('Message sent!')).toBeVisible();
});

Dados auxiliares para testes

Use os recursos auxiliares do Playwright para compartilhar de forma organizada a lógica de configuração, como a criação de um usuário de teste, entre vários testes.

// fixtures.ts
const test = base.extend<{ testUser: User }>({ 
  testUser: async ({}, use) => {
    const user = await createTestUser();
    await use(user);
    await deleteTestUser(user.id);
  },
});

// In a test file:
test('edits profile', async ({ page, testUser }) => {
  await page.goto(`/users/${testUser.id}/edit`);
});

Execução paralela de testes

Por padrão, o Playwright executa os testes em paralelo entre vários processos de trabalho. Use test.describe.serial somente para testes que precisam ser executados em ordem.

Verificação rápida

Qual é o principal benefício do Modelo de objeto de página (POM) nos testes E2E?

Responda na aula interativa

Recapitulação

Os testes E2E de formulários usam objetos de página para facilitar a manutenção, page.route() para simular APIs, setInputFiles() para envios de arquivos e o estado de armazenamento para reutilizar sessões de autenticação. Teste a validação, os fluxos de várias etapas e a navegação pelo teclado para abranger jornadas reais do usuário.

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átisVer o curso completo

Perguntas Frequentes

A aula “Testando formulários e fluxos do usuário de ponta a ponta” é grátis?

Sim — o texto completo de “Testando formulários e fluxos do usuário de ponta a ponta” é 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 “Testando formulários e fluxos do usuário de ponta a ponta”?

Automatize envios de formulários em várias etapas e fluxos de navegação com objetos de página do Playwright. 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 4 de 4.

Quanto tempo leva a aula “Testando formulários e fluxos do usuário de ponta a ponta”?

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

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