La mayoría de las herramientas open source de regresión visual — BackstopJS, Wraith o las comprobaciones de capturas de Playwright y Cypress — se basan en la misma idea: tomar una captura de pantalla antes y después, y luego contar los píxeles que cambiaron. El motor es casi siempre el mismo: comparar las dos imágenes píxel por píxel.
Es simple, robusto y perfecto para detectar una rotura grande de maquetación. Pero este enfoque tiene un compromiso estructural que poca gente mide. Nosotros lo hicimos, con cifras en la mano — y en casos elegidos para exponerlo, el resultado es claro.
Dos ajustes que no hay que confundir
La confusión está por todas partes, así que aclarémoslo. Este tipo de herramienta tiene dos ajustes distintos:
- La tolerancia por píxel: a partir de qué diferencia de color se considera que un píxel «realmente» cambió. Es un control de sensibilidad al color, aplicado píxel a píxel.
- El umbral de decisión: una vez contados los píxeles diferentes, se mira qué porcentaje de la imagen cambió para decidir si el test pasa o falla. La herramienta de referencia BackstopJS lo fija por defecto en el 0,1 % de los píxeles.
Nuestro test sigue exactamente esta lógica: contamos los píxeles diferentes (herramienta en su sensibilidad por defecto), y luego aplicamos el umbral de decisión del 0,1 % para decir pasa o falla.
El dilema del umbral
Este umbral en porcentaje encierra a la comparación de la imagen completa en un compromiso que no puede ganar:
- Con un umbral en porcentaje (ajuste por defecto, 0,1 %) → dejas pasar los cambios pequeños reales. Un botón que cambia de color, un borde que se redondea, un estado de celda «OK» → «ERROR»: todo eso pesa una fracción minúscula de los píxeles. Por debajo del 0,1 %, el test pasa a verde aunque la página haya cambiado de forma visible. Un cambio real pasa desapercibido.
- Sin ninguna tolerancia (el otro extremo, el ajuste por defecto de Playwright) → fallas al menor píxel de diferencia, incluido el simple suavizado de los contornos — esos píxeles semitransparentes en el borde de las letras y las formas, que varían ligeramente de una visualización a otra. El resultado: falsas alertas a montones, y el equipo acaba ignorando la herramienta.
Las herramientas reales ofrecen salvaguardas — enmascarar zonas, ignorar regiones, recortar. Funcionan, pero hay que configurarlas de antemano, a mano, zona por zona. La sensibilidad localizada no es automática.
El test en condiciones reales
Comparamos, sobre exactamente la misma página (renderizada por un navegador, congelada de forma reproducible, ancho de pantalla de 1280 px, captura de la página completa), dos enfoques:
- Delta-QA: nuestro comparador, que compara elemento por elemento (asocia los elementos entre las dos versiones y solo compara los píxeles al nivel más fino);
- la comparación de la imagen completa: comparamos las dos capturas píxel por píxel, y luego aplicamos el umbral de decisión del 0,1 %.
Cinco casos, elegidos para exponer el punto ciego:
| Caso | Cambio | Delta-QA (elemento por elemento) | Comparación de imagen completa (% de píxeles modificados, veredicto al umbral 0,1 %) |
|---|---|---|---|
| Desplazamiento | un triángulo se mueve dentro de la página | 2 señales: desaparecido + aparecido en el elemento |
0,005 % → NO DETECTADO |
| Reordenación | tarjetas y menú reordenados | 13 señales localizadas (qué tarjetas, qué ítems) | 0,63 % → falla, pero bloque difuso, sin precisar nada |
| Cambio fino | borde redondeado de 12 px a 30 px | 1 señal en la tarjeta afectada | 0,011 % → NO DETECTADO |
| Color localizado | cabecera de una tarjeta verde → violeta | la cabecera correcta (intensidad 0,996) + 2 señales padres débiles | 5,03 % → falla, pero bloque difuso, sin precisar nada |
| Celda de tabla | estado de una fila FAIL → WARN | 2 señales fuertes en las filas correctas | 0,036 % → NO DETECTADO |
En estos cinco casos, tres cambios reales — un desplazamiento de elemento, un redondeo de borde, un estado de celda — quedan por debajo del umbral de decisión estándar del 0,1 %. Una herramienta configurada por defecto los declara «sin cambios». Y sin embargo son exactamente las regresiones que un test visual debería detectar.
Para los dos casos que la comparación píxel por píxel sí «detecta» (reordenación, color), solo dice una cosa: «el X % de los píxeles cambió en alguna parte». Ninguna idea de qué elemento, ni de qué naturaleza. Delta-QA, en cambio, nombra el elemento exacto y califica el cambio (desplazado, añadido, eliminado, modificado).
Por qué el nivel de elemento lo cambia todo
Delta-QA no compara una imagen grande. Lo que hace es:
- reconstruir el árbol de los elementos de la página;
- asociar cada elemento entre las dos versiones (por su contenido, luego por su posición);
- comparar los píxeles solo al nivel más fino, y detectar los cambios propios de un bloque ignorando las zonas de sus sub-elementos ya modificados;
- dejar de lado el suavizado de los contornos en el recuento de píxeles realmente diferentes.
Consecuencia: puede ser muy sensible (detectar un borde de 1 px en un bloque grande) sin ahogarse en las variaciones de suavizado, porque ese ruido se deja de lado y cada señal está ligada a un elemento concreto. Un desplazamiento no es un «bloque rojo»: es un elemento señalado desaparecido en la posición antigua y aparecido en la nueva. La sensibilidad localizada es automática, sin máscaras que preparar de antemano.
Metodología — y sus límites
Nos tomamos en serio el rigor, así que esta es la parte oscura:
- La misma página para ambos. Los dos enfoques parten exactamente de la misma página, renderizada y congelada — sin sesgo de visualización.
- Cifras verificadas contra la herramienta de referencia. Nuestro banco de pruebas recalcula la diferencia de color de la misma forma que la herramienta de comparación píxel por píxel más usada. Contrastamos los 5 casos con esa herramienta oficial: en el cambio de color marcado, las dos dan 5,036 % contra 5,034 % — casi idénticas. En los demás casos, la herramienta de referencia cuenta aún menos píxeles (ignora el suavizado de los contornos) — así que es aún más propensa a dejar pasar los cambios pequeños. Las cifras de la tabla son las suyas.
- Delta-QA sobre-señala (y lo asumimos). En el cambio de color, emite 3 señales: la real (la cabecera, intensidad 0,996) + 2 señales padres muy débiles (0,005 y 0,001). Es deliberado: lo remontamos todo, y el control de sensibilidad de la interfaz oculta esas señales débiles por defecto. Pero seamos claros: el recuento bruto no es «1 cambio = 1 señal».
- Un solo contexto de test. Estas mediciones se hacen a un solo tamaño de pantalla, página en reposo, sobre páginas de test controladas. No afirmamos nada sobre varios tamaños de pantalla, estados interactivos (hover, focus) o páginas realmente ruidosas — otros proyectos.
- Reordenación. Delta-QA clasificó las tarjetas reordenadas como «modificadas» en vez de «desplazadas», pero localizadas por elemento — lo que sigue estando muy por encima de un bloque difuso.
Y seamos justos: comparar la imagen completa es simple, solo necesita una captura por página, sigue siendo excelente para una rotura grande, y sus máscaras de zonas funcionan. El problema no es que sea malo — es que te obliga a elegir entre dejar pasar lo fino o gritar por el ruido, y a configurar la precisión a mano.
Lo que hay que recordar
Si tu test de regresión visual se basa en una comparación de la imagen completa con un umbral en porcentaje en el ajuste por defecto, probablemente deja pasar cambios que tus usuarios sí ven — desplazamientos, colores localizados, micro-cambios de estilo. Bajar el umbral los detecta, pero despierta las falsas alertas; las máscaras ayudan, pero se configuran zona por zona, de antemano.
Comparar elemento por elemento no es un ajuste: es otra arquitectura, que devuelve a la vez la sensibilidad y la precisión — y, de regalo, el nombre del elemento y la naturaleza del cambio.
Para profundizar
- Delta-QA vs BackstopJS: ¿estructural o píxel a píxel?
- Reducir los falsos positivos de los tests visuales
- Píxel a píxel vs comparación perceptual
Test reproducible: la comparación «imagen completa» se produjo con la herramienta open source de referencia (el paquete pixelmatch, Node/npm), en su sensibilidad por defecto, y luego con un umbral de decisión del 0,1 % como BackstopJS — sobre exactamente la misma página congelada que Delta-QA.