0Pricing
React Academy · Lección

Primeros pasos con Playwright para React

Escriba pruebas de Playwright que abran un navegador, interactúen con la aplicación React y verifiquen los resultados.

Primeros pasos con Playwright para React es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

¿Qué es Playwright?

Playwright es un framework de pruebas E2E para Node.js que controla los navegadores reales Chromium, Firefox y WebKit. Es ideal para probar flujos completos de aplicaciones React, incluidos el enrutamiento, la autenticación y las interacciones con la API.

Instalación

Instale Playwright y los binarios de sus navegadores con un solo comando.

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

# playwright.config.ts is created automatically

Configuración de Playwright para React

Configure Playwright para iniciar el servidor de desarrollo antes de ejecutar las pruebas.

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,
  },
});

Escribir su primera prueba

Las pruebas utilizan page, un objeto que representa una página del navegador. Navegue a una URL, interactúe con los elementos y compruebe el 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

Los localizadores de Playwright son similares a las consultas de RTL. Prefiera los localizadores basados en roles por su mayor robustez.

// 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');

Hacer clic y escribir

Interactúe con los elementos mediante click(), fill(), press() y selectOption().

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

Esperar a la navegación

Playwright espera automáticamente a que los elementos estén listos, pero puede esperar explícitamente a que finalicen la navegación o las solicitudes de red.

// 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"]'),
]);

Comprobaciones

Use expect(locator) con los matchers integrados de Playwright. Estos esperan automáticamente a que la condición se cumpla.

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');

Capturas de pantalla cuando falla una prueba

Playwright captura automáticamente capturas de pantalla y trazas cuando falla una prueba, si se ha configurado para ello. Actívelo en la configuración.

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

Ejecutar las pruebas

Ejecute todas las pruebas en modo headless o use --ui para abrir el explorador de pruebas interactivo, que le permite recorrer visualmente las pruebas paso a paso.

# 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

Visor de trazas de Playwright

Cuando falle una prueba, abra el archivo de traza con npx playwright show-trace para reproducirla paso a paso con capturas de pantalla, solicitudes de red y registros de la consola.

Integración con CI

Playwright se ejecuta en modo headless de forma predeterminada en CI. Instale los navegadores con npx playwright install --with-deps y ejecute las pruebas como un script normal de npm.

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

Comprobación rápida

¿Qué método de Playwright debe utilizar para rellenar un campo de entrada de texto?

Resumen

Playwright prueba navegadores reales y espera automáticamente a que los elementos estén listos. Use localizadores basados en roles, fill() y click() para las interacciones, expect(locator) para las comprobaciones y el modo --ui para la depuración visual durante el desarrollo.

Preguntas frecuentes

¿La lección «Primeros pasos con Playwright para React» es gratis?

Sí — el texto completo de «Primeros pasos con Playwright para React» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Primeros pasos con Playwright para React»?

Escriba pruebas de Playwright que abran un navegador, interactúen con la aplicación React y verifiquen los resultados. Practicas React Academy 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 React Academy?

No se requiere experiencia previa. React Academy 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 3 de 4.

¿Cuánto tiempo toma la lección «Primeros pasos con Playwright para React»?

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

Sí. Cada lección de React Academy 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

  1. Pruebas de integración con React Testing Library
  2. Probar UI asíncrona y llamadas a API con MSW
  3. Primeros pasos con Playwright para React
  4. Probar formularios y flujos de usuario de extremo a extremo
← Volver a React Academy