Cómo configurar Playwright con Next.js

Playwright es un marco de pruebas que permite automatizar Chromium, Firefox y WebKit con una sola API. Puede usarlo para escribir pruebas de extremo a extremo (E2E). Esta guía muestra cómo configurar Playwright con Next.js y escribir sus 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, ejecute el siguiente comando:

Terminal

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

Esto lo guiará a través de una serie de preguntas para configurar Playwright en su proyecto, incluyendo la creación de un archivo playwright.config.ts. Consulte la guía de instalación de Playwright para obtener instrucciones paso a paso.

Creando su primera prueba E2E con Playwright

Cree dos nuevas páginas en Next.js:

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>About</h1>
      <Link href="/">Home</Link>
    </div>
  )
}

Luego, agregue una prueba para verificar que la navegación funciona correctamente:

tests/example.spec.ts

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

test('should navigate to the about page', async ({ page }) => {
  // Comenzar desde la página de inicio (baseURL se configura via webServer en playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Encontrar un elemento con el texto 'About' y hacer clic en él
  await page.click('text=About')
  // La nueva URL debería ser "/about" (baseURL se usa aquí)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // La nueva página debería contener un h1 con "About"
  await expect(page.locator('h1')).toContainText('About')
})

Nota importante: Puede usar page.goto("/") en lugar de page.goto("http://localhost:3000/"), si agrega "baseURL": "http://localhost:3000" al archivo de configuración playwright.config.ts.

Ejecutando sus pruebas con Playwright

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

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

Nota importante: Alternativamente, puede 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á sus pruebas en modo headless por defecto. Para instalar todas las dependencias de Playwright, ejecute npx playwright install-deps.

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