20 casos de prueba

Cambios Sutiles

Las regresiones visuales más difíciles de diagnosticar son las que pasan por debajo del umbral de percepción consciente: un estado hover que ya no aparece, un subrayado de enlace que ha desaparecido en el cuerpo del texto, una scrollbar cuyos estilos personalizados han sido sobrescritos en favor del renderizado por defecto del navegador, o un cambio de antialiasing que vuelve toda la tipografía sutilmente más gruesa en macOS. Nadie levanta la mano para señalar este tipo de problema, pero la experiencia de usuario se degrada — el sitio parece "menos cuidado", la confianza baja, la tasa de clic cae sin razón aparente. En interfaces de negocio, estos drifts se acumulan sprint tras sprint y acaban por erosionar la coherencia visual del design system hasta el punto de requerir un rediseño completo. Las causas suelen ser resets CSS introducidos para resolver un caso concreto, cambios en -webkit-font-smoothing, modificaciones de estilos globales de enlaces en las zonas de contenido editorial, o conflictos entre hojas de estilo que cargan en orden distinto en producción que en staging. La detección humana de estas desviaciones es por definición imposible de escalar, porque presupone una memoria visual perfecta de cientos de capturas de referencia. Delta-QA opera a nivel de píxel y aplica un análisis perceptual calibrado para ignorar el ruido de renderizado aceptable pero alertar sobre las desviaciones significativas incluso cuando son casi imperceptibles para el ojo. El diff resalta las zonas afectadas, lo que transforma una regresión invisible en información accionable y permite a los equipos QA detener la deriva de acabado antes de que se vuelva visible para los usuarios.

Lo que detectamos

1

Cambios de color casi idénticos

Detecta cambios de color tan pequeños como 1-2 valores RGB (ej. #666666 vs #626262), invisibles a simple vista.

2

Diferencias de anti-aliasing

Captura variaciones de anti-aliasing de fuentes y bordes que producen diferentes patrones de suavizado sub-pixel.

3

Renderizado sub-pixel

Monitorea el posicionamiento fraccional de píxeles y diferencias de renderizado causadas por transforms.

4

Variaciones de suavizado de fuente

Detecta cambios en -webkit-font-smoothing y renderizado de fuentes que afectan la nitidez y percepción de peso.

Ejemplo interactivo

Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.

Antes
Después

Escenarios reales

🎯

El hover que desaparece de los botones

Un desarrollador agrega un reset CSS global que elimina los estilos hover de enlaces y botones. Al pasar el cursor, los botones ya no cambian de color ni de sombra — se quedan exactamente igual que en reposo. Los visitantes no reciben ningún feedback visual de que es clicable. La tasa de clics baja y nadie entiende por qué. El cambio era parte de un gran refactoring CSS, nadie verificó los estados hover. Delta-QA captura los elementos en estado hover y compara las capturas: los botones que ya no cambian de apariencia al pasar el cursor resaltan de inmediato en el diff.

⚠️

Los enlaces que se funden con el texto

Un desarrollador modifica los estilos globales de enlaces y, como efecto colateral, los enlaces dentro del cuerpo de texto pierden su subrayado y su color distintivo. Ahora se ven como texto normal — mismo color, mismo estilo. Tus visitantes ya no saben dónde hacer clic en tus artículos y páginas de contenido. El desarrollador revisó la navegación principal (que usa clases específicas), no los enlaces dentro del contenido. Delta-QA compara las capturas y resalta los enlaces que ya no se distinguen del texto — la ausencia de subrayado y color distintivo se nota en el diff.

💡

La scrollbar que cambia de estilo

Un cambio CSS sobrescribe los estilos personalizados de la scrollbar. La barra de desplazamiento fina y elegante es reemplazada por la scrollbar por defecto del navegador — gruesa y gris. El sitio pierde su acabado y la zona de contenido se ve visualmente más estrecha. Es el tipo de regresión que nadie busca activamente — se nota vagamente sin identificar la causa. Delta-QA compara las capturas y resalta el cambio — la barra gruesa que reemplaza el diseño personalizado se nota en la superposición.

💡

El antialiasing que cambia

Un desarrollador introduce un nuevo CSS reset que cambia -webkit-font-smoothing de antialiased a auto. En macOS, todo el texto del sitio se ve más grueso y menos nítido — como si alguien hubiera difuminado ligeramente la tipografía. Tus usuarios de Mac perciben el sitio como "menos cuidado" sin poder identificar por qué. En staging pasó porque el entorno de pruebas corría en Linux con un renderizado diferente. Delta-QA compara las capturas y detecta el cambio de renderizado — los caracteres más gruesos y menos nítidos resaltan en la superposición.

¿Listo para detectar cada regresión visual?

Descarga Delta-QA y empieza a detectar cambios CSS en tus páginas web — sin código.