Automatización total de pruebas E2E y regresión visual con Playwright, Cloudflare Pages y GitHub Actions

Las regresiones visuales no deseadas se pueden evitar completamente automatizando pruebas E2E con Playwright.

Integrar Playwright con las URLs de vista previa de Cloudflare Pages y GitHub Actions garantiza la calidad en cada Pull Request.

Puntos clave

• Playwright: Espera automática, soporte multi-navegador y Trace Viewer.
• Entorno real: Pruebas sobre URLs reales desplegadas en el edge de Cloudflare.
• toHaveScreenshot(): Comparación visual píxel por píxel.

1. Código de prueba (e2e/visual.spec.ts)

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

test('Snapshots de la página de inicio', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage-baseline.png');
});