Next.js 15 Fullstack Web Apps · Lección

Pruebas de extremo a extremo con Playwright

Configure pruebas de extremo a extremo para simular las interacciones de los usuarios a lo largo de todo el flujo de su aplicación.

Lección 2 de 411 pasos

Pruebas de extremo a extremo con Playwright es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en 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?

Responde en la lección interactiva

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.

Gratis para empezar

Aprende TypeScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 12
Lecciones: 48

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Pruebas de extremo a extremo con Playwright» es gratis?

Sí — el texto completo de «Pruebas de extremo a extremo con Playwright» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Pruebas de extremo a extremo con Playwright»?

Configure pruebas de extremo a extremo para simular las interacciones de los usuarios a lo largo de todo el flujo de su aplicación. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?

No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Pruebas de extremo a extremo con Playwright»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?

Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Pruebas unitarias y de integración
Pruebas de extremo a extremo con Playwright
Monorepos y microfrontends
Mocking y pruebas de componentes del servidor

← Volver a Next.js 15 Fullstack Web Apps