Visual Regression Testing
Qué son las pruebas de regresión visual
Las pruebas de regresión visual toman una captura de dos URLs y las comparan píxel a píxel, para que puedas ver si un despliegue cambió la página de formas que nadie pretendía. Detectan el tipo de error que ningún check HTTP ni ninguna métrica de rendimiento informará jamás: la página sigue devolviendo 200, sigue cargando rápido y se ve mal.
En LoadFocus la comparación es entre dos URLs, no contra un historial almacenado. El emparejamiento habitual es un dominio de staging contra producción, de modo que preguntas "¿se parece mi próxima versión a la actual?" en lugar de "¿ha cambiado esta página desde el mes pasado?".
Cómo funciona la comparación
Cada prueba captura ambas URLs y produce una imagen de comparación que resalta las diferencias en rojo, mostrada junto a la captura del resultado para que veas ambas una al lado de la otra.
Que la prueba pase depende del umbral de comparación que elijas. El umbral es la proporción de diferencia por debajo de la cual se ignoran los cambios: si eliges el 10 %, la prueba pasa siempre que las dos páginas difieran en menos de un 10 %.
Elegir un umbral
El umbral es un conjunto fijo de opciones, no un valor de texto libre:
| Umbral | Úsalo cuando |
|---|---|
| 0,5 % | La página debe ser idéntica píxel a píxel; quieres que se marque cualquier cambio |
| 1 % | Casi idéntica, tolerando el ruido de antialiasing y renderizado de fuentes |
| 5 % | Zonas dinámicas pequeñas, como una marca de tiempo o una insignia rotatoria |
| 10 % (por defecto) | Uso general, cuando algo de contenido varía entre entornos |
| 20 % | Páginas con un bloque dinámico grande, como un feed o un carrusel |
| 50 % | Solo importa la maquetación general |
Empieza por el valor por defecto y ve ajustándolo hacia abajo. Un umbral demasiado laxo deja pasar regresiones reales; uno demasiado estricto hace fallar todas las ejecuciones por ruido de renderizado y acaba ignorándose, que es peor.
Cuándo usarlas
- Antes de una versión: apunta una URL de staging a la URL de producción equivalente y confirma que las únicas diferencias son las que has enviado a propósito.
- Tras una actualización de CSS o de dependencias: el conjunto de cambios dice una línea, la página renderizada puede opinar otra cosa.
- En páginas con plantilla: cuando un cambio de plantilla afecta a muchas URLs a la vez.
Ejecutar pruebas desde Chrome
Existe una extensión de Chrome de regresión visual que ejecuta las pruebas que ya has definido. Abre la extensión, lanza la prueba y se realiza la misma comparación píxel a píxel contra las páginas de esa prueba.
Qué no te dicen las pruebas de regresión visual
Informan de que algo se ve distinto, no de que algo esté roto, ni de por qué. Combínalas con el resto de la suite de monitoreo:
- Monitoreo de rendimiento web para saber si la página es rápida.
- Browser checks para saber si el recorrido sigue completándose.
- Oportunidades de Lighthouse para saber qué arreglar cuando va lenta.
Preguntas frecuentes
¿Qué son las pruebas de regresión visual?
Es la práctica de capturar una página y compararla píxel a píxel con otra versión de esa misma página, de modo que los cambios visuales no intencionados se detecten antes de que los vean los usuarios.
¿Contra qué compara LoadFocus?
Contra dos URLs que tú eliges, normalmente un dominio de staging frente a la página de producción equivalente, y no contra un historial de referencia almacenado.
¿Cómo evito que pequeñas diferencias de renderizado hagan fallar todas las ejecuciones?
Sube el umbral de comparación. Es la proporción de diferencia por debajo de la cual se ignoran los cambios, y el valor por defecto es el 10 %.
¿Qué umbrales puedo elegir?
Seis valores predefinidos: 0,5 %, 1 %, 5 %, 10 %, 20 % y 50 %. El valor por defecto es el 10 %.
¿Cómo se muestran las diferencias?
Se muestra una imagen de comparación junto a la captura del resultado, con las zonas distintas resaltadas en rojo, para que veas ambas versiones una al lado de la otra.
¿Puedo ejecutar pruebas de regresión visual desde el navegador?
Sí. La extensión de Chrome de regresión visual ejecuta las pruebas que ya has definido y devuelve la misma comparación píxel a píxel.