Nevermind

La próxima generación de pruebas end-to-end: primeros pasos con Playwright

3 min

1. Los desafíos de las pruebas end-to-end

Las pruebas end-to-end (E2E) son la última línea de defensa para garantizar la calidad de una aplicación. Simulan acciones reales del usuario —clics, escritura y navegación— para comprobar que el flujo completo funciona correctamente. Sin embargo, las pruebas E2E también tienen fama de ser «frágiles» e «inestables»:

  • Comportamiento asíncrono: cuando se ejecuta el script, es posible que los elementos del DOM todavía no se hayan cargado y la prueba falle. Quienes desarrollan tienen que añadir muchos wait o sleep manuales, lo que vuelve las pruebas poco fiables.
  • Compatibilidad entre navegadores: conseguir que las pruebas sean estables en todos los navegadores principales —Chrome, Firefox y Safari— supone un gran reto.
  • Depuración difícil: cuando una prueba falla en un entorno CI/CD, reproducir y localizar el problema es complicado por la falta de instantáneas del momento y registros de red.

Para resolver estos problemas surgió una nueva generación de herramientas de pruebas, y Playwright es una de las más destacadas.

2. ¿Qué es Playwright?

Playwright es una biblioteca de Node.js desarrollada por Microsoft para automatizar los navegadores Chromium (Chrome y Edge), Firefox y WebKit (Safari). Fue creada por miembros clave del equipo que desarrolló originalmente Google Puppeteer. Puede considerarse su sucesora espiritual, pero con un diseño más moderno y potente.

3. Principales ventajas de Playwright

a. Pruebas realmente mult navegador

Esta es la ventaja más notable de Playwright. Con una única API unificada puedes escribir pruebas que se ejecuten en los tres motores principales. Así resulta sencillo descubrir y corregir errores que solo aparecen en un navegador concreto, como Safari.

b. Esperas automáticas (Auto-Waits)

Playwright resuelve de raíz los problemas de asincronía. Antes de ejecutar una acción, como page.click(), realiza automáticamente una serie de comprobaciones de operabilidad, por ejemplo:

  • Esperar a que el elemento aparezca en el DOM.
  • Esperar a que el elemento sea visible.
  • Esperar a que una animación deje de cubrir el elemento.
  • Esperar a que el elemento pueda recibir eventos.

Esto significa que casi nunca es necesario escribir esperas manuales, lo que mejora sustancialmente la estabilidad de las pruebas.

c. Potentes herramientas complementarias

  • Codegen (generador de código): es una función revolucionaria. Puedes ejecutar pnpm exec playwright codegen example.com y Playwright abrirá una ventana del navegador. Todas las acciones que realices se grabarán automáticamente y se convertirán en código de prueba. Esto reduce enormemente la barrera de entrada para escribir pruebas E2E.

  • Trace Viewer (visor de trazas): es la «máquina del tiempo» de Playwright. Cuando una prueba falla, puedes generar un archivo con la traza completa. Al abrirlo con Trace Viewer puedes:

    • Consultar una instantánea del DOM en cada paso de la prueba.
    • Consultar el registro completo de solicitudes de red.
    • Consultar los mensajes y errores de la consola.
    • Moverte en ambos sentidos por la línea temporal para ver de forma intuitiva los cambios de la página antes y después de cada acción.

Esto hace que depurar fallos de CI sea más sencillo que nunca.

4. Un ejemplo de prueba sencillo

La API de Playwright tiene un diseño muy intuitivo.

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

test('页面应有正确的标题', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 断言页面的 title 包含 "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('点击 "Get started" 链接应跳转到介绍页', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 通过角色和名称定位并点击链接
  await page.getByRole('link', { name: 'Get started' }).click();

  // 断言 URL 包含 "intro"
  await expect(page).toHaveURL(/.*intro/);
});

Conclusión

Gracias a su excelente compatibilidad entre navegadores, sus fiables esperas automáticas y unas herramientas de depuración inigualables —especialmente Trace Viewer—, Playwright ha establecido un nuevo estándar para las pruebas E2E de aplicaciones Web modernas. No solo mejora la estabilidad y la fiabilidad de las pruebas, sino también la experiencia al escribirlas mediante herramientas como Codegen. Si buscas para tu proyecto una solución de automatización moderna y potente, Playwright es sin duda una de las mejores opciones.

Testing Playwright E2E Automation