Pruebas de regresión visual

Las pruebas de regresión visual son un método de prueba automatizado que detecta cambios no previstos en el aspecto de una interfaz de usuario. Capturan pantallas de páginas o componentes, las comparan con imágenes de referencia aprobadas y marcan para revisión cualquier diferencia por encima de un umbral definido.

Las pruebas funcionales comprueban que un botón funciona. Las pruebas visuales comprueban que sigue teniendo buen aspecto: posición, color, tamaño, tipografía y espaciado correctos. Un cambio de CSS en un archivo compartido puede desplazar maquetaciones en muchas páginas, y las pruebas visuales hacen visibles esos efectos secundarios antes de publicar. Los equipos las ejecutan en integración continua, a menudo con Playwright, con complementos basados en Cypress o con servicios dedicados de pruebas visuales.

Cómo funcionan las pruebas de regresión visual

1. Renderiza cada página o componente en un navegador controlado con tamaños de ventana gráfica fijos.
2. Captura las pantallas y guárdalas como líneas base después de revisarlas.
3. En cada cambio, vuelve a capturar en las mismas condiciones.
4. Compara las imágenes nuevas con las líneas base y genera imágenes de diferencias.
5. Un revisor acepta los cambios previstos, que se convierten en nuevas líneas base, o corrige los errores.

Dónde se usan las pruebas de regresión visual

• Sistemas de diseño y bibliotecas de componentes.
• Sitios de marketing con muchas plantillas.
• Aplicaciones web con actualizaciones frecuentes de CSS o de dependencias.
• Comprobaciones entre navegadores en Chromium, Firefox y WebKit.

Diferencia de píxeles frente a diferencia perceptual

Una diferencia de píxeles compara los valores de color en cada posición y cuenta las discrepancias. Es exacta, pero sensible al suavizado de bordes y al renderizado de fuentes. Una diferencia perceptual, como una comparación basada en SSIM, mide los cambios de estructura y de contraste tal como los notaría un espectador, lo que reduce las falsas alarmas. Muchas herramientas combinan la diferencia de píxeles con una tolerancia y con regiones enmascaradas.

Errores comunes

• Generar las líneas base en un sistema operativo y las comparaciones en otro, lo que cambia el renderizado de fuentes.
• Dejar fechas, anuncios o animaciones dentro del área capturada.
• Aceptar diferencias sin revisarlas, lo que convierte los errores en líneas base.
• Probar un único tamaño de ventana gráfica.

¿Tomas las mismas capturas una y otra vez?

Para comprobaciones visuales manuales sin un conjunto de pruebas, Website Capture de Temposhot captura una lista de URL en tamaños de dispositivo fijos, y Compare Images resalta las diferencias entre dos capturas. Consulta la automatización de capturas de sitios web.

Preguntas frecuentes

¿Las pruebas de regresión visual reemplazan a las pruebas funcionales?

No. Comprueban el aspecto. Las pruebas funcionales siguen comprobando el comportamiento.

¿Cómo reduzco los falsos positivos?

Congela el contenido dinámico, usa el mismo entorno en cada ejecución y enmascara las regiones que cambian a propósito.

Fuentes

• Playwright visual comparisons
• Structural similarity index en Wikipedia

Recursos relacionados

• Comparar imágenes: compara dos capturas en el navegador.
• Opciones de Website Capture: ajustes de dispositivo y espera.
• Ejecuciones y resultados: revisa una ejecución de captura.