Next.js 15 Fullstack Web Apps · Aula

Testes de Ponta a Ponta com Playwright

Configure testes de ponta a ponta para simular interações do usuário em todo o fluxo da sua aplicação.

Aula 2 de 411 etapas

Testes de Ponta a Ponta com Playwright é uma aula grátis de Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

What is End-to-End Testing?

End-to-End (E2E) testing simulates a real user's journey through your application, from start to finish. It tests the entire stack: frontend, backend, and database.

Think of it as a robot user interacting with your app in a browser. This ensures all parts of your system work together as expected, catching issues that unit or integration tests might miss.

Why Playwright for E2E?

Playwright is a powerful open-source tool by Microsoft designed for reliable E2E testing. It offers several key advantages:

Cross-browser: Tests Chromium, Firefox, and WebKit (Safari).
Auto-wait: Automatically waits for elements to be ready, reducing flakiness.
Robust actions: Simulates real user interactions like clicks, fills, and key presses.
Fast & parallel: Can run tests across multiple browsers simultaneously.

Setting Up Playwright

To get started, you'll need to install Playwright in your Next.js project. This command sets up Playwright and downloads necessary browser binaries:

npm init playwright@latest

This will guide you through setting up a basic configuration file (playwright.config.ts) and an example test. Remember to have your Next.js application running (e.g., npm run dev) when running E2E tests!

Your First Playwright Test

Let's write a simple test to navigate to a page and check its title. Playwright tests are typically written in JavaScript or TypeScript.

This example assumes your Next.js app is running on http://localhost:3000.

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

test('homepage has expected title', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  // Check if the page title contains 'Next.js App'
  await expect(page).toHaveTitle(/Next.js App/);
});

Interacting with Elements

Playwright provides powerful locators to find elements on the page. You can interact with these elements by filling input fields, clicking buttons, and more.

Common locators include getByRole(), getByText(), getByLabel(), and locator() for CSS selectors.

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

test('fill and submit a contact form', async ({ page }) => {
  await page.goto('http://localhost:3000/contact');

  // Fill input fields by label or placeholder
  await page.getByLabel('Your Name').fill('Alice');
  await page.getByPlaceholder('email@example.com').fill('alice@example.com');

  // Click the submit button
  await page.getByRole('button', { name: 'Send Message' }).click();

  // Assert that a success message appears
  await expect(page.getByText('Message sent successfully!')).toBeVisible();
});

Assertions and Auto-Waiting

Playwright's expect API is used to make assertions about the state of your application. A key feature is auto-waiting, where Playwright automatically waits for elements to become visible, enabled, or stable before performing an action or assertion.

This significantly reduces the need for manual waits, making your tests more robust and less prone to flakiness.

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

test('check item count', async ({ page }) => {
  await page.goto('http://localhost:3000/products');

  // Playwright waits for the list to render
  const productList = page.locator('.product-item');
  await expect(productList).toHaveCount(5);

  // Click a filter button
  await page.getByRole('button', { name: 'Filter by Category A' }).click();

  // Playwright waits for the list to update after filtering
  await expect(productList).toHaveCount(2);
});

Testing a Full User Flow

Let's simulate a more complex user journey: a user logging in, navigating to a dashboard, and verifying content. This demonstrates how E2E tests cover multiple pages and interactions.

Ensure your Next.js application has a login page and a dashboard for this test to pass.

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

test('user can log in and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  // Fill login form
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('securepassword');
  await page.getByRole('button', { name: 'Log In' }).click();

  // Wait for navigation to the dashboard and verify content
  await page.waitForURL('http://localhost:3000/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome, testuser!' })).toBeVisible();
  await expect(page.getByText('Your recent activity')).toBeVisible();
});

Running Tests & Reporting

After writing your tests, you can run them from your terminal. Playwright provides a powerful test runner and various reporting options:

Run all tests: npx playwright test
Run specific test file: npx playwright test example.spec.js
Run tests in headed mode (browser visible): npx playwright test --headed
HTML Reporter: After tests run, open playwright-report/index.html for a detailed, interactive report.

Best Practices for E2E Tests

To write effective and maintainable E2E tests:

Target user-facing elements: Use locators that reflect how a user sees the page (e.g., getByRole, getByText).
Use data-testid attributes: For elements without clear text or roles, add data-testid attributes for robust selection.
Keep tests independent: Each test should set up its own state and not rely on previous tests.
Balance test types: E2E tests are slower; use them for critical user flows, and rely on unit/integration tests for smaller components.

Playwright Test Concepts

Which of the following are key benefits or features of Playwright for End-to-End testing?

Responda na aula interativa

Recap: E2E with Playwright

We've explored End-to-End testing and how Playwright helps you simulate real user interactions across your entire Next.js application.

You learned to set up Playwright, write tests that navigate, interact with elements, and assert outcomes. With its auto-waiting capabilities and cross-browser support, Playwright is a powerful tool for ensuring the reliability of your fullstack applications.

Grátis para começar

Aprenda TypeScript 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: 12
Aulas: 48

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

Perguntas Frequentes

A aula “Testes de Ponta a Ponta com Playwright” é grátis?

Sim — o texto completo de “Testes de Ponta a Ponta 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 Next.js 15 Fullstack Web Apps, atualize para CoddyKit PRO. O curso de Next.js 15 Fullstack Web Apps inclui 4 aulas no total.

O que vou aprender em “Testes de Ponta a Ponta com Playwright”?

Configure testes de ponta a ponta para simular interações do usuário em todo o fluxo da sua aplicação. Você pratica Next.js 15 Fullstack Web Apps 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 Next.js 15 Fullstack Web Apps?

Nenhuma experiência prévia é necessária. Next.js 15 Fullstack Web Apps 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 “Testes de Ponta a Ponta 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 Next.js 15 Fullstack Web Apps?

Sim. Cada aula de Next.js 15 Fullstack Web Apps 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 Unitários e de Integração
Testes de Ponta a Ponta com Playwright
Monorrepositórios e Microfrontends
Simulação e testes de componentes do servidor

← Voltar para Next.js 15 Fullstack Web Apps