1
Transiciones CSS
Captura el estado computado de transiciones CSS, detectando cambios en duración, función de timing y propiedades objetivo.
15 casos de prueba
Animaciones
Las animaciones, transiciones y micro-interacciones son la capa perceptiva que transforma una interfaz funcional en una interfaz viva: un menú que se desliza, un botón que reacciona al hover, un loader que tranquiliza durante una llamada de red. Cuando esta capa se rompe, la aplicación sigue funcionando pero parece muerta o descuidada, y la confianza de los usuarios se erosiona. Una transición de 300ms eliminada por descuido hace que el contenido "salte" en lugar de deslizarse, y los elementos adyacentes acaban desplazados a posiciones distintas a las de la referencia. Un hover que ya no se dispara porque un elemento transparente de tracking analítico se ha superpuesto a los botones rompe todo el feedback visual de la página. Un loader copiado de otro proyecto introduce una ruptura de identidad gráfica que desentona en mitad de un recorrido crítico. Probar estos comportamientos con un humano es lento, poco reproducible e imposible de escalar cuando se tienen decenas de pantallas. Delta-QA aborda esta categoría congelando las transiciones en un estado calculado estable en el momento de la captura, y comparando luego los snapshots con las referencias. Los estados interactivos como el hover también se capturan para validar que los botones cambien de apariencia como se espera. El diff visual resalta los desplazamientos provocados por una transición eliminada, los loaders cuyo estilo se ha desviado, los indicadores de animación que ya no aparecen y los keyframes cuyo renderizado ha cambiado entre dos versiones. Este enfoque permite a los equipos QA detectar una regresión en la capa de interacción sin tener que filmar cada recorrido manualmente.
Lo que detectamos
2
Animaciones keyframe
Congela @keyframes en su cuadro actual para comparar estados de animación entre versiones.
3
Estados hover e interactivos
Captura instantáneas visuales de estados :hover, :active y otros estados interactivos para comparación.
4
Transform y origen
Detecta cambios en valores translate, rotate, scale, skew y modificaciones de transform-origin.
Ejemplo interactivo
Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.
Antes
Después
Escenarios reales
🎯
La transición que se vuelve instantánea
Un desarrollador refactoriza los estilos y elimina accidentalmente la transición de 300ms del menú desplegable. Sin transición, el menú empuja el contenido de abajo de golpe en vez de deslizarse suavemente — la página "salta" visualmente. Consecuencia visible: los elementos debajo del menú quedan desplazados respecto a la versión de referencia, porque el navegador ya no tiene tiempo de recalcular el layout gradualmente. Es un refactoring CSS, nadie pensó en retestear las interacciones visuales. Delta-QA compara las capturas del menú abierto y detecta los desplazamientos del contenido debajo — la maquetación diferente resalta en el diff.
⚠️
El loader que cambia de estilo
Un desarrollador copia los estilos de un loader de otro proyecto para "armonizar" los componentes. El nuevo loader es visualmente diferente: más grande, con un color de acento que no corresponde a la marca, y un estilo de indicador distinto (punteado en vez de sólido). Gira, así que funcionalmente sirve — el equipo pensó "es un loader, está bien". Delta-QA compara las capturas y resalta las diferencias de tamaño, color y forma del loader — el componente que ya no se parece a la referencia se nota en el diff.
💡
El hover que deja de funcionar
Un desarrollador agrega un elemento transparente sobre los botones para gestionar tracking analítico. Consecuencia: el hover ya no se activa — el mouse pasa sobre el elemento invisible, no sobre el botón. Visualmente, los botones se quedan en su color por defecto al pasar el cursor, el sitio parece "muerto". El cambio era sobre tracking, no sobre botones — nadie pensó en verificar el feedback visual al hover. Delta-QA captura el estado hover de los botones y compara las capturas: el botón que ya no cambia de color resalta en el diff.
¿Listo para detectar cada regresión visual?
Descarga Delta-QA y empieza a detectar cambios CSS en tus páginas web — sin código.