Visual regression (comparación de capturas)

5 min de lectura

El monitor HTTP clásico dice "el servidor responde 200", pero no sabe que el archivo CSS principal no se ha cargado y la web se muestra rota. La visual regression hace una captura y la compara con un baseline: detecta cambios visuales aunque el servidor diga OK.

Cómo funciona

1. Al activar por primera vez la visual regression se realiza una captura baseline (referencia).
2. En cada check posterior se realiza una nueva captura y se compara pixel a pixel con el baseline.
3. Si la diferencia supera el umbral (por defecto 5%), el monitor se marca como changed y recibirá una alerta.
4. En el detalle del monitor verá el baseline y la captura actual una al lado de la otra + overlay de diff.

Cuándo usarlo

• Tras deploys - detecta automáticamente fuentes rotas, CSS y layout
• Para landings de marketing - para saber que el tag de GA no ha perdido posición
• Para e-shops - control de que el botón "Añadir al carrito" sigue visible
• Para páginas de estado - para saber que su propia página de estado se renderiza

Configuración

1. En el detalle del monitor vaya a la pestaña Visual regression
2. Haga clic en Enable - se realiza el baseline (10-30 segundos)
3. Opcionalmente configure el threshold (1-20%, por defecto 5%)
4. Tras un deploy actualice el baseline mediante Refresh baseline

Cuidado con los falsos positivos

• Fecha / hora en la página - cada check las renderiza distintas. Ignórelas o configure un CSS selector mask.
• Publicidad / banners - rotan entre cargas. Enmascare el dominio del proveedor de anuncios.
• Animaciones - primer frame vs. el siguiente. La visual regression espera 2 s tras el load para que la animación se estabilice.
• Cookie banner - siempre auto-aceptado, pero a veces queda visible. Añada una regla CSS mediante user-config.