Regresión visual (comparación screenshots)

Un monitor HTTP clásico dice "el servidor responde 200 OK", pero no sabe que el archivo CSS principal no se cargó y la web se muestra rota. El control visual (en inglés visual regression) toma una captura de la página y la compara con una captura de referencia (baseline) - detecta cambios visuales incluso cuando el servidor dice que todo está bien.

El control visual está disponible en los planes Pro y Business.

Cómo funciona

1. Al activar el control visual por primera vez, se toma una captura de referencia (baseline) - la referencia con la que se compara más adelante.
2. En cada comprobación siguiente tomamos una nueva captura y la comparamos con la baseline píxel a píxel.
3. Si la diferencia supera el umbral configurado (5 % por defecto), el monitor se marca como cambiado y recibes una alerta.
4. En el detalle del monitor ves la baseline y la captura actual una al lado de la otra, con las zonas diferentes resaltadas.

Cuándo usarlo

• Después de desplegar una nueva versión del sitio - detecta automáticamente fuentes, CSS o maquetación rotos
• Para páginas de aterrizaje de marketing - para saber que la etiqueta GA y otros elementos no se han movido de su sitio
• Para tiendas online - comprobar que el botón "Añadir al carrito" sigue siendo visible
• Para páginas de estado - para saber que tu propia página de estado se muestra correctamente

Configuración

1. Al crear un monitor, selecciona el tipo Control visual - la primera captura se guarda automáticamente como baseline
2. En el detalle del monitor, en la sección Control visual, ves la captura de referencia, la captura actual y las diferencias resaltadas
3. El límite de cambio se ajusta con el control deslizante Límite de cambio visual (de 0,5 a 30 %, 5 % por defecto)
4. Después de cada despliegue de una nueva versión, actualiza la baseline con el botón Establecer la actual como referencia

Cuidado con las falsas alarmas

• Fecha y hora en la página - cada comprobación las muestra de forma diferente. Después de desplegar un cambio así, actualiza siempre la baseline.
• Anuncios y banners - rotan entre capturas y a menudo provocan una falsa alarma. El control visual funciona mejor en páginas sin anuncios.
• Animaciones - la primera y la siguiente captura pueden diferir. El control visual espera 1,5 segundos después de la carga para que la animación se estabilice.