Pixel por Pixel vs Comparación Perceptual: ¿Qué Método Detecta Mejor los Bugs Visuales?
La comparación pixel por pixel confronta cada punto de dos capturas de pantalla y marca toda diferencia, incluso invisible al ojo. La comparación perceptual evalúa si la diferencia es visualmente significativa para un humano.
Estas son las dos filosofías que dividen el mercado del test visual. Y elegir la equivocada puede costarte horas de falsos positivos — o peor, dejar pasar bugs reales.
El pixel diff: la honestidad brutal
El pixel diff no miente. Si un píxel cambió de valor, lo informa. Si el anti-aliasing de un texto produce un píxel gris en lugar de un píxel negro, la diferencia se marca.
Esta honestidad es tanto su fuerza como su debilidad. Es preciso al extremo, pero genera ruido. Mucho ruido.
En un equipo que despliega varias veces al día, un pixel diff sin filtro puede generar decenas de falsos positivos por ejecución. Los tests se vuelven una lista de alertas que nadie lee. La fatiga de alerta se instala. Y cuando llega un verdadero bug visual, nadie lo ve porque se ahoga en el ruido.
La comparación perceptual: la aproximación inteligente
La comparación perceptual intenta reproducir la visión humana. Usa algoritmos como SSIM o pHash para evaluar si dos imágenes son "visualmente similares" aunque no sean idénticas píxel a píxel.
Un cambio de anti-aliasing que afecta 50 píxeles pero que es invisible al ojo — la comparación perceptual lo ignora. Un botón que se desplaza 20 píxeles a la derecha — lo detecta porque la estructura visual ha cambiado.
La teoría es seductora. La práctica es más matizada.
El problema es el umbral. ¿A partir de qué nivel de diferencia perceptual debe el test fallar? Demasiado estricto, se comporta como un pixel diff. Demasiado permisivo, deja pasar regresiones reales.
Lo que cada enfoque falla
El pixel diff produce falsos positivos porque no entiende el contexto visual. No sabe que un cambio de sub-píxel en anti-aliasing no es un bug, mientras que un cambio de color de fondo sí lo es.
La comparación perceptual produce falsos negativos porque suaviza los detalles. Un cambio de fuente de 14px a 15px puede pasar bajo el radar del SSIM si el umbral es demasiado permisivo.
El tercer camino: el análisis estructural
Existe una tercera opción. En lugar de comparar imágenes, se comparan las propiedades CSS calculadas y la estructura del DOM. Es lo que hace Delta-QA con su algoritmo en 5 pasadas.
Si el font-size pasó de 14px a 15px, el análisis estructural lo detecta porque lee directamente la propiedad CSS. No depende de la calidad del renderizado ni de un umbral arbitrario.
Cero falsos positivos de renderizado. Cero falsos negativos por suavizado. Cada cambio detectado corresponde a una modificación real del código.
FAQ
¿Qué método es más popular?
El pixel diff, por su simplicidad. Pero cada vez más herramientas pasan a la comparación perceptual.
¿Se pueden combinar ambos métodos?
Sí. Algunas herramientas usan pixel diff + SSIM como filtro.
¿Qué umbral SSIM usar?
0.99 para regresión estricta, 0.95-0.97 para monitoreo.
Artículo anterior: Test Visual para Aplicaciones SaaS