1
Propiedades Flexbox
Monitorea flex-direction, justify-content, align-items, flex-wrap, gap y cambios de orden que alteran la disposicion.
50 casos de prueba
Diseno
Los cambios de layout son de las regresiones visuales mas perturbadoras. Un elemento desplazado, una cuadricula rota o un margen colapsado pueden alterar completamente la experiencia del usuario. Delta-QA analiza las relaciones espaciales entre elementos para captar cada desplazamiento.
Lo que detectamos
2
Cambios en CSS Grid
Detecta modificaciones de grid-template, cambios de dimensionamiento y reasignaciones de grid-area.
3
Posicion y apilamiento
Captura cambios de posicion (static, relative, absolute, fixed, sticky) y su impacto en la colocacion.
4
Margenes y paddings
Rastrea cambios de espaciado, incluyendo escenarios de margin collapse que causan desplazamientos inesperados.
5
Modelo de caja y dimensionamiento
Detecta cambios de width, height, restricciones min/max y box-sizing que afectan las dimensiones.
6
Float y clear
Identifica cambios de layout basados en float y comportamiento clearfix que pueden causar reflujo.
Ejemplo interactivo
Vea exactamente lo que Delta-QA detecta. Compare las dos versiones lado a lado.
Antes
Despues
Escenarios reales
🎯
El padding que desplaza todo
Un desarrollador corrige un bug de alineación en el formulario de registro y toca el padding global de los inputs. Efecto colateral: el formulario de pago termina con campos más grandes, y el botón "Pagar" baja por debajo del fold. En móvil, es peor — el formulario desborda la pantalla. QA revisó el formulario de registro (el que se modificó), no el de pago. Delta-QA compara las capturas de todas las páginas y resalta el desplazamiento en el formulario de pago — el botón "Pagar" que desaparece del viewport es visible de inmediato en el diff.
⚠️
El flexbox que invierte el orden
Un desarrollador refactoriza el CSS de la página de precios e invierte accidentalmente el orden de visualización de las ofertas. Los tres planes aparecen ahora Enterprise, Pro, Gratis — de derecha a izquierda. Los visitantes ven la oferta más cara primero, el anclaje psicológico se invierte. La entrega era urgente, se probó lo mínimo: los tres planes están, el clic funciona, se despliega. Delta-QA compara las capturas y detecta que los bloques cambiaron de posición — la inversión es claramente visible en el diff.
💡
El margin collapse silencioso
Un desarrollador agrega overflow: hidden en un contenedor para resolver un bug de desborde. Consecuencia inesperada: el mecanismo de colapso de márgenes CSS se rompe y el espacio entre cada sección se duplica de golpe. La página se alarga 200px, las secciones parecen desconectadas entre sí. El equipo confió en el pipeline de tests automatizados que no cubre lo visual. Delta-QA compara las capturas y resalta el doble espaciado entre secciones — el desplazamiento de toda la maquetación se nota en el diff.
¿Listo para detectar cada regresion visual?
Descarga Delta-QA y empieza a detectar cambios CSS en tus paginas web — sin codigo.