Pruebas visuales de componentes: método de verificación automatizada que renderiza componentes de interfaz de usuario de forma aislada — fuera del contexto de la página completa — y compara su apariencia con un estado de referencia validado, para detectar regresiones visuales a nivel del design system antes de que se propaguen a las páginas en producción.
Hay una pregunta que los equipos front-end evitan cuidadosamente: "nuestros componentes están probados visualmente en Storybook, pero ¿nuestras páginas en producción también?". La respuesta, en la mayoría de los casos, es no. Y esta laguna es costosa, porque los bugs visuales que llegan a tus usuarios no viven en Storybook — viven en las páginas reales, con datos reales, interacciones reales y combinaciones de componentes reales.
Chromatic es una herramienta excelente para probar componentes aislados. Delta-QA está diseñado para probar páginas completas. No son competidores en sentido estricto — son herramientas que miran el mismo problema desde altitudes diferentes. Pero si debes elegir uno, o quieres entender qué aporta cada uno, esta comparativa va directa al grano.
Chromatic: el guardián del design system
Chromatic, creado por los mantenedores de Storybook, es la extensión natural de Storybook para las pruebas visuales. El concepto es brillante en su lógica: ya has definido tus componentes en Storybook con sus distintos estados (stories). Chromatic captura una captura de pantalla de cada story en cada commit, la compara con la línea base y señala los cambios.
Es un flujo de trabajo perfectamente integrado para los equipos de design system. Tu diseñador define un botón con cuatro variantes (primario, secundario, deshabilitado, cargando). Tu desarrollador las implementa y crea las stories correspondientes. Chromatic comprueba en cada cambio de código que las cuatro variantes no han sufrido regresión visual. Si el border-radius del botón cambia accidentalmente, Chromatic lo detecta antes de que nadie haga una revisión de código.
La herramienta también ofrece UI Review, permitiendo a diseñadores y desarrolladores validar visualmente los cambios antes de la fusión. Es esencialmente una revisión de código visual, y resulta genuinamente útil para mantener la coherencia del design system.
El punto ciego de Chromatic: el mundo real
Aquí está el problema que Chromatic no resuelve — no por deficiencia de calidad, sino por elección arquitectónica: los componentes aislados no se comportan como las páginas ensambladas.
Un botón probado de forma aislada en Storybook se renderiza en un entorno controlado: un viewport fijo, sin vecinos, sin contexto CSS heredado, sin datos dinámicos, sin interacciones con otros componentes. Eso es precisamente lo que hace fiable el testing a nivel de componente. Pero también es lo que lo vuelve ciego a los problemas de ensamblaje.
¿Qué se rompe visualmente en producción? Rara vez un componente aislado. Lo que se rompe es la combinación. Un componente de cabecera que se superpone a un componente de navegación porque cambió un z-index. Una cuadrícula de productos que se desalinea porque un componente de tarjeta recibió un margin adicional. Un formulario que desborda su contenedor porque una etiqueta es más larga de lo esperado en otro idioma. Un pie de página que sube sobre el contenido principal porque una sección intermedia perdió su altura mínima.
Estos bugs son invisibles en Storybook. Cada componente, tomado individualmente, es visualmente correcto. Es su ensamblaje lo que causa problemas. Y Chromatic, por diseño, no prueba el ensamblaje — prueba los ladrillos, no el edificio.
Delta-QA prueba el edificio. La herramienta compara páginas completas tal como se renderizan en un navegador real, con todos sus componentes ensamblados, estilos heredados, interacciones y datos. Es la prueba de la realidad, no la prueba del plano del arquitecto.
No-code vs Storybook: la cuestión de la audiencia
Chromatic se dirige a desarrolladores front-end que trabajan con Storybook. Es un público legítimo e importante. Pero es reducido.
Para usar Chromatic, necesitas un proyecto Storybook configurado, conocimientos de escritura de stories, comprensión de las líneas base y las capturas visuales, y soltura con los flujos de trabajo CI basados en PR. En resumen: necesitas ser un desarrollador front-end.
¿Tu responsable de QA que quiere comprobar una página antes del lanzamiento? No puede usar Chromatic directamente. ¿Tu product owner que detecta un problema visual en staging? No puede lanzar una prueba. ¿Tu diseñador que quiere comparar el mockup con producción? Sin acceso al flujo de trabajo de Chromatic sin pasar por un desarrollador.
Delta-QA abre las pruebas visuales a todo el equipo. Sin Storybook. Sin código. Sin pipeline CI/CD que entender. Proporcionas dos URLs, lanzas la comparación, lees el informe. Todos son autónomos.
Componentes vs páginas: dos niveles complementarios de testing
En lugar de oponer Chromatic y Delta-QA, es más preciso posicionarlos como dos niveles de una estrategia de pruebas visuales completa.
Nivel de componente (Chromatic): verificar que cada ladrillo del design system se ajusta a sus especificaciones. Es la prueba unitaria visual. Detecta regresiones en el nivel más granular, lo antes posible en el ciclo de desarrollo.
Nivel de página (Delta-QA): verificar que las páginas ensambladas con datos reales y estilos en cascada son visualmente correctas. Es la prueba de integración visual. Detecta problemas de ensamblaje, conflictos de estilos y regresiones que solo existen en el contexto de la página completa.
Un equipo que hace ambas cosas tiene una cobertura visual notable. Pero si solo puedes elegir uno — la pregunta es: ¿qué protege mejor a tus usuarios? Tus usuarios no ven componentes de Storybook. Ven páginas.
El modelo de precios: capturas vs libertad
Chromatic cobra por captura al mes. Con 200 componentes a 3 stories cada uno en 2 navegadores, son 1.200 capturas por build. Veinte builds al día (un equipo activo) significan 720.000 al mes.
El plan gratuito ofrece 5.000 capturas mensuales — suficiente para un proyecto pequeño, agotadas en días en un design system de tamaño medio. Los planes de pago escalan con el volumen. Los equipos terminan limitando las stories probadas o la frecuencia de builds para mantenerse dentro de la cuota. Una herramienta de calidad que incentiva a reducir la cobertura de pruebas — la paradoja es deliciosa.
Delta-QA es gratuito. Sin cuotas de capturas, sin límites de páginas, sin restricciones de frecuencia. La calidad de tu cobertura visual depende de tu voluntad de hacer las cosas bien, no de tu capacidad de pago.
Lo que Chromatic hace que Delta-QA no
Revisión de UI colaborativa. El flujo de trabajo de Chromatic permite a desarrolladores y diseñadores validar los cambios visuales de los componentes dentro de una PR. No existe un equivalente exacto en Delta-QA.
Prueba de todos los estados de un componente. Si tu botón tiene 12 variantes, Chromatic las prueba todas de forma sistemática. Probar esas 12 a nivel de página requeriría encontrar 12 páginas diferentes donde aparezcan.
Integración nativa con Storybook. Creado por los autores de Storybook. La integración es lo más profunda posible.
Documentación visual viva. Chromatic mantiene un historial visual de cada componente a lo largo del tiempo.
Lo que Delta-QA aporta que Chromatic no cubre
Prueba de la realidad. Páginas de producción con datos reales, estilos heredados reales, interacciones reales entre componentes. No la idealización limpia de Storybook.
Accesibilidad universal. Cualquier miembro del equipo puede lanzar una prueba visual. Sin competencias de desarrollo necesarias.
Independencia tecnológica. Delta-QA funciona independientemente de tu stack front-end. React, Vue, Angular, Svelte, WordPress, Shopify, jQuery legacy — si se muestra en un navegador, Delta-QA lo prueba. Chromatic requiere Storybook, que requiere un framework JavaScript moderno.
Soberanía de datos. Ejecución local, sin datos enviados a servidores de terceros.
Coste cero. Sin cálculos de capturas, sin plan que elegir, sin tarjeta de crédito que introducir.
Preguntas frecuentes
¿Funciona Chromatic sin Storybook?
No. Chromatic depende de las stories para definir qué se prueba visualmente. Delta-QA funciona de forma independiente de cualquier framework — prueba páginas web independientemente del stack que las produce.
¿Basta con probar componentes en Storybook para garantizar la calidad visual?
No. Los componentes probados de forma aislada no reproducen las condiciones reales de la página: herencia de estilos, datos dinámicos, interacciones entre componentes, estilos de terceros. Chromatic verifica que tus ladrillos son correctos. Delta-QA verifica que el ensamblaje es correcto.
¿Detecta Chromatic los problemas de responsive?
Sí, dentro de lo que Storybook muestra. Pero los problemas de responsive específicos de la página (un elemento que desborda al combinarse con otros, un layout que se rompe con datos reales largos) no se detectarán.
¿Es suficiente el plan gratuito de Chromatic para un proyecto pequeño?
El plan gratuito ofrece 5.000 capturas al mes. Un proyecto con 100 componentes, 3 stories cada uno y 2 builds diarios consume unas 18.000 capturas al mes. Delta-QA no tiene limitaciones de volumen.
¿Se puede usar Delta-QA para probar componentes aislados?
Delta-QA está optimizado para páginas completas. Si los componentes se renderizan en URLs accesibles (como un Storybook desplegado), técnicamente puedes probarlos. Pero para pruebas de componentes aislados, Chromatic sigue siendo la referencia.
Para profundizar
- Delta-QA vs Chromatic: ¿Páginas completas o componentes aislados?
- Pruebas visuales en design systems: componentes aislados vs páginas completas
- Test Visual: Componentes Aislados vs Páginas Ensambladas — ¿Qué Nivel Importa Realmente?
Chromatic y Delta-QA no son adversarios — son dos caras de la misma moneda. Uno protege tus componentes, el otro protege tus páginas. Si puedes tener ambos, toma ambos. Si debes elegir, elige el que protege lo que tus usuarios realmente ven.