Configuración de Playwright con Next.js

Playwright es un framework de pruebas que te permite automatizar Chromium, Firefox y WebKit con una sola API. Puedes usarlo para escribir pruebas de extremo a extremo (E2E). Esta guía te mostrará cómo configurar Playwright con Next.js y escribir tus primeras pruebas.

Inicio rápido

La forma más rápida de comenzar es usar create-next-app con el ejemplo with-playwright. Esto creará un proyecto Next.js con Playwright ya configurado.

Terminal

npx create-next-app@latest --example with-playwright with-playwright-app

Configuración manual

Para instalar Playwright, ejecuta el siguiente comando:

Terminal

npm init playwright
# o
yarn create playwright
# o
pnpm create playwright

Esto te guiará a través de una serie de prompts para configurar Playwright en tu proyecto, incluyendo la creación de un archivo playwright.config.ts. Consulta la guía de instalación de Playwright para ver los pasos detallados.

Creando tu primera prueba E2E con Playwright

Crea dos nuevas páginas en Next.js:

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Inicio</h1>
      <Link href="/about">Acerca de</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Acerca de</h1>
      <Link href="/">Inicio</Link>
    </div>
  )
}

Luego, añade una prueba para verificar que tu navegación funciona correctamente:

tests/example.spec.ts

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

test('debe navegar a la página about', async ({ page }) => {
  // Comienza desde la página índice (baseURL se configura via webServer en playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Encuentra un elemento con el texto 'Acerca de' y haz clic en él
  await page.click('text=Acerca de')
  // La nueva URL debe ser "/about" (se usa baseURL allí)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // La nueva página debe contener un h1 con "Acerca de"
  await expect(page.locator('h1')).toContainText('Acerca de')
})

Bueno saber:

Puedes usar page.goto("/") en lugar de page.goto("http://localhost:3000/"), si añades "baseURL": "http://localhost:3000" al archivo de configuración playwright.config.ts.

Ejecutando tus pruebas de Playwright

Playwright simulará un usuario navegando por tu aplicación usando tres navegadores: Chromium, Firefox y Webkit. Esto requiere que tu servidor Next.js esté en ejecución. Recomendamos ejecutar las pruebas contra tu código de producción para asemejarte más al comportamiento real de tu aplicación.

Ejecuta npm run build y npm run start, luego ejecuta npx playwright test en otra ventana de terminal para correr las pruebas de Playwright.

Bueno saber: Alternativamente, puedes usar la función webServer para que Playwright inicie el servidor de desarrollo y espere hasta que esté completamente disponible.

Ejecutando Playwright en Integración Continua (CI)

Playwright ejecutará tus pruebas en modo headless por defecto. Para instalar todas las dependencias de Playwright, ejecuta npx playwright install-deps.

Puedes aprender más sobre Playwright e Integración Continua en estos recursos: