Componentes Reales

Los componentes UI reales — tarjetas de producto, tablas de admin, barras de navegación, dropdowns, modales, carruseles, tablas de precios, kanbans — combinan varias propiedades CSS en sistemas visuales densos e interdependientes. Probar un componente en aislamiento con una captura de referencia de Storybook no basta, porque una regresión puede surgir solo cuando el componente se integra en su contexto real: un dropdown que se abre detrás de una tabla porque se añadió un overflow: hidden para resolver otro bug, una modal descentrada porque se modificó el posicionamiento del body por un componente sticky, o un carrusel que muestra dos slides en vez de uno porque el contenedor padre cambió de ancho. En las interfaces de negocio, estas regresiones suelen afectar a funcionalidades críticas — botones de archivado ocultos en una tabla, opciones de validación invisibles en una modal — y su impacto operativo va mucho más allá del simple disconfort visual. La coherencia de un design system depende precisamente de la estabilidad de estos componentes integrados en sus páginas reales, sprint tras sprint. Delta-QA captura las páginas completas que contienen estos componentes, en sus distintos estados interactivos (menú abierto, modal mostrada, fila seleccionada), y compara los snapshots con la baseline visual. El diff resalta los componentes cuyas dimensiones, posicionamiento, contenido visible o profundidad de superposición han cambiado entre versiones. Este enfoque permite validar que un cambio en una parte del sistema no haya roto otro componente a distancia, y da a los equipos QA una cobertura sobre los patrones UI completos que las pruebas unitarias de componente aislado no pueden, por construcción, captar.