¿Qué son las pruebas de regresión visual?
Las pruebas de regresión visual comparan capturas de pantalla de una interfaz con imágenes de referencia aprobadas previamente para detectar cambios visuales no deseados. Encuentran errores que las pruebas de código pasan por alto, como un botón desplazado, un texto desbordado o un diseño móvil roto.
Cómo funciona
El método tiene cuatro pasos, que se repiten con cada cambio.
- Referencia (baseline): haz capturas de las páginas en su estado aprobado.
- Comparar: tras un cambio, captura las mismas páginas con los mismos tamaños y compáralas píxel a píxel.
- Umbral: fija un límite para la proporción de píxeles cambiados para que las diferencias mínimas no cuenten como fallos.
- Aprobar: si el cambio es intencionado, la nueva imagen pasa a ser la referencia; si no, corrige el error.
Por qué las necesitas
Las pruebas unitarias te dicen que una función devuelve el valor correcto, no que la página se ve bien. Un cambio de CSS puede romper el diseño de una página que nadie tocó. Estos efectos secundarios son más frecuentes cuando los agentes de código cambian la interfaz, porque el agente suele trabajar sin ver la pantalla.
Reducir los falsos positivos
Una prueba ruidosa acaba ignorándose, así que importa tener una configuración estable.
- Desactiva las animaciones y las transiciones.
- Congela los datos cambiantes, como fechas, horas y contenido aleatorio.
- Espera a que carguen las fuentes y captura siempre en el mismo navegador y sistema operativo.
- Prueba en varios tamaños, como móvil, tableta y escritorio.
Herramientas
Entre las opciones habituales están la aserción toHaveScreenshot de Playwright, herramientas de código abierto como BackstopJS y servicios alojados como Percy o Chromatic. Todas se basan en la misma idea: una imagen de referencia, una imagen nueva y una imagen de diferencias que resalta lo que cambió.
Comparación visual en AgentVera
La pestaña “Preview” de AgentVera ejecuta comparaciones visuales contra el servidor de desarrollo del proyecto y de cada worktree.
- Se toman capturas de página completa de las páginas que elijas en Mobile (375×812), Tablet (768×1024) y Desktop (1440×900); se pueden configurar hasta 6 tamaños.
- Tú defines una referencia; las capturas posteriores se comparan píxel a píxel y los píxeles cambiados se marcan en rojo. El umbral por defecto es el 0,1 % de los píxeles.
- El botón de probar con agente abre un agente de Claude en ese worktree con el navegador de AgentVera; abre cada página en cada punto de ruptura y busca desbordamientos, diseños rotos, errores de consola y enlaces muertos.
Preguntas frecuentes
¿Las pruebas de regresión visual son lo mismo que las pruebas de snapshot?
Idea parecida, objetivo distinto. Las pruebas de snapshot suelen comparar el HTML o el texto de salida de un componente; las de regresión visual comparan capturas de pantalla reales.
¿Por qué las comparaciones de píxeles dan falsos fallos?
El renderizado de fuentes, el antialiasing, las animaciones y el contenido cambiante pueden desplazar unos pocos píxeles. Un umbral y un entorno estable reducen ese ruido.
¿Qué páginas debo probar?
Empieza por las más usadas y más frágiles: la página de inicio, el inicio de sesión, el pago o los formularios. Captura cada una en varios tamaños de pantalla.