1
Estilo de campos de entrada
Detecta cambios en la apariencia de inputs: bordes, fondos, paddings y propiedades de fuente.
35 casos de prueba
Formularios y Estados
Los elementos de formulario son puntos de contacto criticos en la interaccion del usuario. Un estado de validacion roto o un indicador de foco faltante pueden generar frustracion y errores de entrada. Delta-QA monitorea cada estado visual relacionado con formularios.
Lo que detectamos
2
Checkbox y radio
Monitorea el estilo personalizado de checkboxes y radio buttons, incluyendo estados visuales marcado/desmarcado.
3
Estados de validacion
Captura cambios en el estilo de pseudo-clases :valid, :invalid, :required y la presentacion de mensajes de error.
4
Indicadores de foco
Rastrea cambios de estilo :focus y :focus-visible criticos para la accesibilidad por teclado.
5
Estilo de placeholders
Detecta cambios del pseudo-elemento ::placeholder en color, opacidad y propiedades de fuente.
6
Estados de botones
Monitorea estados hover, active, disabled y por defecto de los botones para consistencia visual.
Ejemplo interactivo
Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.
Antes
Despues
Escenarios reales
🎯
El placeholder que oculta los errores
Un desarrollador modifica los estilos globales de textos de ayuda y, como efecto colateral, los mensajes de error del formulario de registro pasan de rojo a gris claro. Tus visitantes envían un email inválido, ven un texto debajo del campo... que no pueden leer porque es gris claro sobre fondo blanco. Piensan que el sitio está roto y se van. Nadie tiene tiempo de revisar cada estado de error de cada formulario en cada despliegue. Delta-QA compara las capturas y resalta el cambio de color del mensaje — el texto que se volvió casi invisible se nota en el diff.
⚠️
El campo de búsqueda que se encoge
Un desarrollador modifica la grilla CSS del header para agregar un nuevo enlace de navegación. La barra de búsqueda se reduce a la mitad para hacer espacio. En móvil, se vuelve diminuta — inutilizable. Tus visitantes no encuentran tus productos porque escribir en un campo tan pequeño es frustrante. El desarrollador verificó que el nuevo enlace se mostrara bien, no que la barra de búsqueda se hubiera encogido al lado. Delta-QA compara las capturas y resalta la reducción de la barra — el cambio de tamaño es claramente visible en la superposición.
💡
El focus invisible
Un desarrollador agrega outline: none en los inputs "para que se vea más limpio". Visualmente, cuando un usuario hace clic en un campo, nada indica cuál está activo — el contorno azul desapareció. También es una violación de accesibilidad WCAG. Revisar manualmente el estado focus de cada campo en cada formulario es irreal. Delta-QA captura el estado focus de cada campo y compara las capturas: la desaparición del contorno azul resalta de inmediato en el diff visual.
¿Listo para detectar cada regresion visual?
Descarga Delta-QA y empieza a detectar cambios CSS en tus paginas web — sin codigo.