Conceptos de pruebas de regresión visual

Las pruebas de regresión visual (VRT) detectan automáticamente cambios visuales no deseados entre versiones del código mediante la comparación píxel a píxel de capturas renderizadas. Detectan regresiones de CSS —desplazamientos del diseño, cambios de color y problemas de espaciado— que las pruebas unitarias no detectan en absoluto.

VRT toma capturas de referencia de componentes o páginas y, después de los cambios en el código, toma nuevas capturas y las compara. Las diferencias se resaltan en una imagen de diferencias. Los desarrolladores revisan las diferencias y aprueban los cambios intencionados o corrigen las regresiones no intencionadas.

La comparación de píxeles compara las imágenes píxel a píxel: es sensible, pero propensa a falsos positivos debidos al antialiasing y a diferencias del renderizado subpíxel. Las herramientas de comparación estructural (Applitools AI) comparan la intención visual en lugar de los píxeles exactos, lo que reduce los falsos positivos causados por variaciones en el renderizado de fuentes.

Las capturas aprobadas se convierten en la nueva línea base. Almacene las líneas base en el control de versiones (Git LFS para imágenes grandes) o en un servicio en la nube específico. Cada PR muestra las diferencias respecto a la línea base y los mantenedores aprueban o rechazan los cambios visuales como parte de la revisión.

Las pruebas VRT a nivel de componente prueban componentes individuales de la interfaz de usuario de forma aislada (mediante Storybook). Las pruebas VRT a nivel de página prueban páginas completas en un navegador real. Las pruebas de componentes son más rápidas y específicas; las pruebas de página detectan problemas de diseño a nivel de integración entre componentes.

Pruebe todos los estados visuales: predeterminado, hover, focus, activo, deshabilitado, carga, error, vacío y completo. Los estados hover requieren una simulación mediante JavaScript (page.hover() en Playwright). Una cobertura insuficiente de estados crea puntos ciegos frente a regresiones en estados interactivos.

Renderice capturas en varios navegadores (Chrome, Firefox y Safari) y viewports (móvil, tableta y escritorio). Las diferencias de renderizado entre navegadores pueden causar falsos positivos; use líneas base específicas de cada navegador y configure umbrales de diferencias que toleren las variaciones de renderizado conocidas.

El renderizado de fuentes varía sutilmente según la combinación de sistema operativo, navegador y GPU. Use entornos de CI coherentes (Docker y una versión específica de Chrome) para eliminar los falsos positivos causados por el entorno. Los servicios de VRT en la nube gestionan automáticamente la coherencia del entorno.

El contenido dinámico —marcas de tiempo, avatares de usuario, anuncios y datos aleatorios— provoca falsos positivos. Enmascare las regiones dinámicas con una superposición de color sólido antes de capturar la pantalla. La mayoría de las herramientas de VRT admiten selectores de elementos para el enmascaramiento.

Ejecute VRT en CI en cada PR. Haga que la compilación falle cuando se detecten diferencias visuales no aprobadas. Envíe las diferencias visuales a los revisores de diseño y no únicamente al equipo de ingeniería: los cambios visuales son una cuestión de diseño tanto como de ingeniería.

VRT ofrece el mayor retorno de la inversión en bibliotecas de componentes y sistemas de diseño, donde la coherencia visual es una característica del producto. En páginas de marketing que cambian con frecuencia, el coste de mantener las líneas base puede superar el valor de detectar regresiones.

¿Por qué las pruebas de regresión visual producen falsos positivos debido a las diferencias en el renderizado de fuentes?

Las pruebas de regresión visual detectan regresiones de CSS y diseño comparando capturas de pantalla entre distintas versiones del código. Una VRT eficaz requiere entornos coherentes, cobertura de estados, enmascaramiento del contenido dinámico y un flujo de revisión que dirija las diferencias a los revisores de diseño, lo que la convierte en una herramienta colaborativa de calidad, no solo en un control automatizado.