Tester de Regresion Visual

El Problema

Los cambios CSS son la fuente mas sigilosa de bugs. Una sola linea puede romper layouts en docenas de paginas, y los tests unitarios no detectan regresiones visuales. El QA visual manual es lento e inconsistente. El testing de regresion visual automatiza la comparacion de screenshots, pero configurarlo correctamente — baselines estables, umbrales significativos, cobertura cross-browser — es la parte dificil.

El Prompt

Configura testing de regresion visual para mi aplicacion. Necesito comparaciones automatizadas de screenshots que atrapen bugs visuales reales sin inundarme con falsos positivos.

APLICACION:
[describe tu app — paginas/componentes a testear, breakpoints responsive, temas/dark mode]

FRAMEWORK: [Playwright / Cypress / Storybook + Chromatic / Percy / BackstopJS]

Provee:

1. **Configuracion de Tests** — viewports estables, rendering de fonts consistente, desactivacion de animaciones, enmascaramiento de contenido dinamico
2. **Tests a Nivel de Componente** — tests visuales para componentes criticos de UI en cada estado
3. **Tests a Nivel de Pagina** — screenshots de pagina completa para rutas criticas
4. **Configuracion de Umbrales** — umbrales de diff significativos
5. **Workflow CI** — Config de GitHub Actions con gestion de baselines

Ejemplo de Salida

test('seccion hero de homepage coincide con baseline', async ({ page }) => {
  await page.goto('/');
  await page.evaluate(() => {
    document.querySelectorAll('[data-dynamic]').forEach(el => el.remove());
  });
  await expect(page.locator('.hero')).toHaveScreenshot('hero-desktop.png', {
    maxDiffPixelRatio: 0.002,
    animations: 'disabled',
  });
});

test('tarjetas de precios layout responsive', async ({ page }) => {
  for (const width of [375, 768, 1440]) {
    await page.setViewportSize({ width, height: 900 });
    await page.goto('/precios');
    await expect(page.locator('.pricing-grid')).toHaveScreenshot(
      `precios-${width}.png`, { maxDiffPixelRatio: 0.005 }
    );
  }
});

Cuando Usar

Usar cuando tu aplicacion tiene una identidad de marca fuerte que debe mantenerse pixel-perfect, cuando los cambios CSS frecuentemente causan efectos secundarios no deseados, o cuando soportas multiples temas o breakpoints responsive.

Tips Pro

• Testear componentes en Storybook — screenshots de componentes aislados son mas estables que screenshots de pagina completa.
• Enmascarar contenido dinamico — reemplazar timestamps y avatares con placeholders estaticos antes de capturar screenshots.
• Usar baselines separadas por OS — el rendering de fonts difiere entre macOS, Windows y Linux.
• Revisar diffs en PRs — pedir a la IA que agregue un paso de GitHub Actions que publique diffs de screenshots como comentarios de PR.