Testing de Regresion Visual

Que Es el Testing de Regresion Visual? #

El testing de regresion visual es la practica automatizada de comparar screenshots de la UI de tu aplicacion antes y despues de cambios de codigo para detectar diferencias visuales no deseadas. Los tests funcionales verifican que un boton envia un formulario; los tests visuales verifican que el boton es visible, correctamente posicionado y estilizado, y no se superpone con otros elementos.

Un solo cambio de CSS puede romper el layout en docenas de paginas. Una actualizacion de fuente puede desplazar la alineacion de texto en toda la aplicacion. Los tests funcionales no detectan estos problemas porque la estructura HTML y el comportamiento permanecen correctos — solo la apariencia visual se rompe.

Como Funciona #

El proceso sigue tres pasos:

1. Capturar baseline: Tomar screenshots de la UI en su estado correcto y aprobarlos como referencia
2. Comparar al cambiar: Despues de cambios de codigo, tomar nuevos screenshots y compararlos pixel por pixel contra los baselines
3. Revisar diferencias: Cuando se detectan diferencias, presentar el diff para revision humana

Herramientas #

Comparaciones Visuales de Playwright #

module.exports = {
  expect: {
    toHaveScreenshot: {
      maxDiffPixels: 100,
      maxDiffPixelRatio: 0.01,
      threshold: 0.2,
    }
  }
};

test('test visual de homepage', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

test('test visual de formulario de login', async ({ page }) => {
  await page.goto('/login');
  const form = page.locator('.login-form');
  await expect(form).toHaveScreenshot('login-form.png');
});

Percy (BrowserStack Visual Testing) #

Percy es una plataforma basada en la nube que captura screenshots en multiples navegadores y tamanos de pantalla:

const percySnapshot = require('@percy/playwright');

test('test visual de homepage', async ({ page }) => {
  await page.goto('/');
  await percySnapshot(page, 'Homepage');
});

Gestion de Baselines #

• Commitear baselines a git: Hace los baselines versionados y revisables en PRs
• Baselines por plataforma: Diferentes combinaciones de OS/navegador renderizan diferente
• Flujo de actualizacion: Cuando un cambio visual es intencional, actualizar baselines en el PR

Manejo de Falsos Positivos #

1. Entornos consistentes: Ejecutar tests visuales en contenedores Docker
2. Aumentar umbral: Permitir pequenas diferencias de pixeles (1-2%)
3. Enmascarar contenido dinamico: Ocultar timestamps, avatares, anuncios

await page.evaluate(() => {
  document.querySelectorAll('.timestamp, .avatar, .ad-banner').forEach(el => {
    el.style.visibility = 'hidden';
  });
});
await expect(page).toHaveScreenshot('page-masked.png');

4. Testing a nivel de componente: Capturar componentes individuales en lugar de paginas completas
5. Esperar estabilidad: Asegurar que animaciones e imagenes esten completamente cargadas

Testing Visual en CI/CD #

visual-tests:
  runs-on: ubuntu-latest
  container:
    image: mcr.microsoft.com/playwright:v1.40.0-focal
  steps:
    - uses: actions/checkout@v4
    - run: npm ci
    - run: npx playwright test --grep @visual
    - uses: actions/upload-artifact@v4
      if: failure()
      with:
        name: visual-diff-report
        path: test-results/

Cuando Usar Testing de Regresion Visual #

Buenos candidatos: Bibliotecas de design system, landing pages, templates de email, layouts complejos, despues de upgrades de CSS frameworks.

Malos candidatos: Paginas con contenido dinamico constantemente cambiante, UIs altamente personalizadas, prototipos en etapa temprana.

Ejercicios #

Ejercicio 1: Tests Visuales de Componentes #

Configura testing visual de Playwright, crea tests para 5 componentes clave, introduce un cambio CSS que rompa el layout, revisa el diff visual.

Ejercicio 2: Gestion de Baselines #

Crea baselines para viewport desktop y movil, enmascara contenido dinamico, simula un cambio de fuente y actualiza baselines via PR.

Ejercicio 3: Integracion CI/CD #

Agrega tests visuales a un pipeline CI usando Docker, configura umbrales, configura almacenamiento de artifacts para reportes de diff visual.