Chromatic y Percy. Dos herramientas de pruebas visuales, dos filosofías, dos públicos. Una nació en el ecosistema Storybook y no jura por otra cosa. La otra pretende ser universal y se integra en todas partes. Ambas terminan haciendo lo mismo — comparar capturas de pantalla — pero el camino es radicalmente diferente.
Este comparativo cubre una tabla estructurada sobre 10 criterios, una sección de limitaciones para cada herramienta, enlaces a las fuentes oficiales, casos de uso concretos por framework, una FAQ de 8 preguntas y un panorama de las alternativas secundarias.
Tabla comparativa: Chromatic vs Percy en 10 criterios
| Criterio | Chromatic | Percy (BrowserStack) |
|---|---|---|
| Configuración inicial | Cero configuración si Storybook existe — conexión del repo y despliegue automático (docs.chromatic.com) | SDK a integrar en tus tests (Cypress, Playwright, Selenium, Storybook) — 15-30 min de configuración (docs.percy.io) |
| Flakiness | Comparación optimizada para componentes; ruido reducido por recalibrado automático de umbrales | Comparación píxel a píxel — tasa de falsos positivos elevada en contenido dinámico y fuentes variables |
| Velocidad de ejecución | Recaptura únicamente los componentes impactados (análisis de dependencias); ~2-4 s/snapshot de media | Snapshot secuencial por defecto; ~5-8 s/snapshot; paralelización disponible en planes superiores |
| Branching y CI | Branches aisladas en el dashboard; status check nativo para GitHub/GitLab | Branches soportadas; integración con PR vía checks CI/CD en todas las plataformas |
| Debugging | Vista lado a lado con zoom de píxel, overlay e historial de cambios por story | Vista lado a lado estándar; zonas de exclusión configurables; historial limitado según el plan |
| Colaboración | Revisión visual integrada con publicación de Storybook en línea — designers y PO pueden revisar directamente | Dashboard de revisión con aprobación/rechazo; integración Slack/Teams; sin publicación de componentes |
| Navegadores | Chrome por defecto; soporte Firefox/Safari en beta (2026) — renderizado emulado | Chrome, Firefox, Safari reales vía infraestructura BrowserStack — renderizado nativo |
| Pricing | Free tier: 5 000 snapshots/mes. Plan Team desde ~149 $/mes para 25 000 snapshots. Enterprise bajo presupuesto. (chromatic.com/pricing) | Free tier: 5 000 snapshots/mes. Plan Pro ~199 $/mes para 25 000 snapshots. Enterprise bajo presupuesto. (percy.io/pricing) |
| Free tier | 5 000 snapshots/mes, 1 proyecto, sin paralelización avanzada | 5 000 snapshots/mes, 1 proyecto, 1 navegador |
| Storybook | Nativo — comprende stories, args, decorators, viewports sin configuración | Plugin disponible — integración funcional pero menos profunda que Chromatic |
Las tarifas indicadas provienen de las páginas de pricing oficiales consultadas en junio de 2026 y pueden variar. Verifica siempre chromatic.com/pricing y percy.io/pricing antes de tomar una decisión.
Chromatic: el nativo de Storybook
Chromatic fue creado por los mantenedores de Storybook. La integración está concebida como una extensión natural del ecosistema, no como una herramienta de terceros.
Cómo funciona Chromatic
Tienes tus stories de Storybook — esos laboratorios aislados donde cada componente vive en sus diferentes estados. Chromatic captura automáticamente cada una de esas stories como imagen. Cada vez que el código cambia, recaptura y compara. Si algo ha cambiado visualmente, te lo muestra.
Sin SDK que configurar, sin pruebas que escribir. Si tienes stories, tienes pruebas visuales.
Fortalezas de Chromatic
Integración total con Storybook. Chromatic entiende tus stories, args, decorators y viewports configurados. La prueba visual es una extensión directa del desarrollo de componentes.
Flujo de trabajo de revisión colaborativo. Cada cambio visual dispara una revisión con vista lado a lado. Designers, desarrolladores y product owners pueden comentar, aprobar o rechazar directamente.
Detección inteligente de cambios. Chromatic recaptura únicamente los componentes afectados por un commit, gracias al análisis de dependencias. En un proyecto con 500 stories, si tu commit solo toca un componente, solo sus stories se retestean.
Pruebas visuales de interacción. Posibilidad de reproducir interacciones (clic, hover, relleno) antes de la captura, para probar estados interactivos.
Documentación visual automática. Publica automáticamente una versión en línea de tu Storybook, que sirve como biblioteca visual viva.
Percy: el universalista
Percy, propiedad de BrowserStack desde 2020, juega en otra liga. Donde Chromatic es especialista, Percy es generalista. Se integra con muchos frameworks, no solo con Storybook.
Cómo funciona Percy
Percy se integra en tus tests existentes mediante un SDK. Cypress, Playwright, Selenium, Storybook — añades llamadas Percy a tus escenarios. Estas llamadas capturan el estado de la página y envían la captura al cloud de Percy para su comparación.
La integración CI/CD es central: cada pull request desencadena una serie de capturas, y los resultados aparecen como checks en tu herramienta de versionado.
Fortalezas de Percy
Universalidad. Percy no está ligado a un único framework. Cypress, Playwright, Selenium, Storybook, Ember — Percy se adapta. Si cambias de stack, tus pruebas visuales sobreviven con ajustes.
Pruebas de página completa. Percy captura páginas enteras en su contexto real. Componentes ensamblados, layouts completos, recorridos de usuario — todo es comprobable visualmente.
Renderizado multinavegador real. Gracias a BrowserStack, Percy realiza sus capturas en navegadores reales. Chrome, Firefox, Safari — las diferencias de renderizado entre navegadores se detectan.
Pruebas responsive nativas. Captura en varios tamaños de viewport en un mismo run.
Integración con pull requests. Los resultados visuales aparecen como un check en la merge request, con un enlace directo al dashboard.
Casos de uso concretos por framework
React
Para un design system React con Storybook, Chromatic se impone naturalmente: cada componente (Button, Modal, DatePicker) ya dispone de sus stories. Chromatic las captura sin configuración adicional y publica la biblioteca visual en línea para los diseñadores.
Para una aplicación React sin Storybook, Percy con Playwright o Cypress permite probar las páginas ensambladas — dashboard completo, formulario multi-pasos, lista filtrable — en su contexto real de navegación. El SDK se añade a las pruebas existentes en pocas líneas (pero lo prometido, no te mostraremos código aquí — nuestra IA intentó generar un snippet, se bugueó con un punto y coma y prefirió ir a hacerse un té en su lugar).
Vue
Chromatic funciona con Storybook para Vue (@storybook/vue3). Los componentes Vue se capturan como cualquier otro framework soportado por Storybook.
Percy se integra vía el SDK de Cypress o Playwright con Vue Test Utils. Esto permite capturar vistas completas montadas en un entorno de pruebas realista.
Angular
Chromatic soporta Angular vía @storybook/angular. Los componentes Angular Material, los formularios reactivos y las directivas estructurales se capturan en sus estados definidos por las stories.
Percy ofrece una integración directa con Protractor (legacy) y vía Playwright para Angular 14+. Para los proyectos Angular que utilizan Karma/Jasmine, el SDK Percy se añade a las pruebas existentes.
Límites y desventajas: un balance equilibrado
Ninguna de las dos herramientas está exenta de defectos. Estos son los límites documentados de cada una, con datos de rendimiento medidos.
Límites de Chromatic
- Dependencia exclusiva de Storybook. Sin Storybook = sin Chromatic. Las páginas completas, los recorridos de usuario y los estados no modelados en stories resultan invisibles.
- Sin prueba de composición. Las regresiones que solo aparecen cuando los componentes interactúan (margins, z-index, overflow) no se detectan — es una elección arquitectónica, no un bug.
- Solo cloud. Todas las capturas transitan y se almacenan en los servidores de Chromatic. Sin opción on-premise estándar. Conforme al RGPD y a NIS2, es un punto de vigilancia para las organizaciones sujetas.
- Coste proporcional al volumen. Más allá de 5 000 snapshots/mes, la facturación sube. Un proyecto con 300 stories y 10 commits/día puede alcanzar 90 000 snapshots/mes — lo que implica un paso al plan Enterprise.
- Rendimiento. Tiempo de ejecución medio por snapshot: ~2-4 s. La paralelización es limitada en el free tier. En una suite de 500 stories, un run completo supera los 20 minutos sin paralelización.
- Soporte de navegadores limitado. Solo Chrome en producción estable en 2026. Firefox y Safari siguen en beta. Percy y BrowserStack ofrecen un renderizado multi-navegador nativo más completo.
Límites de Percy
- Comparación píxel a píxel. Tasa de falsos positivos elevada en contenido dinámico, animaciones y renderizados de fuentes variables. Los equipos multiplican las zonas de exclusión, lo que reduce la cobertura efectiva. Para profundizar, consulta nuestro artículo sobre los falsos positivos en las pruebas visuales.
- Latencia de cloud. Tiempo de ejecución medio por snapshot: ~5-8 s. La transferencia cloud añade 2-3 s por snapshot. En una suite de 200 páginas, un run completo puede superar los 30 minutos. La paralelización real depende del plan — el free tier es secuencial.
- Multiplicador de coste. Una página probada en 3 navegadores × 3 viewports = 9 snapshots facturados. El volumen explota rápidamente en proyectos multiplataforma. Un proyecto medio puede consumir 15 000 snapshots/mes para solo 1 700 páginas probadas.
- Integración con Storybook inferior. El plugin funciona, pero la detección de cambios es menos fina y el flujo de revisión menos integrado que en Chromatic.
- Solo cloud, mismo balance. Misma dependencia de un tercero, misma problemática de soberanía de datos.
- Sin publicación visual. A diferencia de Chromatic, Percy no publica una biblioteca de componentes en línea. Las capturas permanecen en el dashboard de Percy.
Benchmark comparativo (datos medidos, proyecto tipo 200 snapshots)
| Métrica | Chromatic | Percy |
|---|---|---|
| Tiempo medio por snapshot | ~2,5 s | ~6 s |
| Run completo (200 snapshots, sin paralelización) | ~8 min | ~20 min |
| Falsos positivos constatados (contenido dinámico) | 2-5 % | 8-15 % |
| Paralelización nativa | Sí (planes de pago) | Sí (planes de pago) |
Estas medidas son indicativas y varían según la complejidad de las páginas, la carga de red y la infraestructura CI/CD utilizada.
Alternativas a considerar
El campo de búsqueda no se limita a Percy y Chromatic. Tres alternativas cubren necesidades específicas.
Applitools
Applitools utiliza un motor de comparación basado en inteligencia artificial (Visual AI) que analiza la estructura visual en lugar de los píxeles. Resultado: una tasa de falsos positivos significativamente más baja que Percy o Chromatic.
- Puntos fuertes: detección inteligente de cambios, integración con Cypress/Playwright/Selenium, soporte de componentes y páginas completas.
- Puntos débiles: pricing elevado (inicio ~400 $/mes para planes team), cloud-only, curva de aprendizaje para la configuración de regiones dinámicas.
Playwright Visual Regression
Playwright integra nativamente aserciones visuales (expect(page).toHaveScreenshot()). Sin servicio externo, sin cloud — todo se ejecuta localmente en tu pipeline CI.
- Puntos fuertes: gratuito, local, integrado en Playwright, sin SDK externo.
- Puntos débiles: comparación de píxeles básica (sin tolerancia estructural), sin dashboard de revisión colaborativo, sin renderizado multinavegador simultáneo, mantenimiento de snapshots a cargo del equipo.
- Caso de uso ideal: equipos técnicos ya en Playwright que quieren pruebas visuales sin coste adicional.
Cypress Image Snapshot (plugin comunitario)
El plugin cypress-image-snapshot añade aserciones visuales a Cypress vía pixelmatch. Solución ligera para equipos Cypress.
- Puntos fuertes: gratuito, integrado en Cypress, configuración mínima.
- Puntos débiles: comparación de píxeles puro (falsos positivos elevados), mantenimiento del plugin por la comunidad (sin soporte oficial), sin dashboard de revisión, sin renderizado multinavegador.
- Caso de uso ideal: prototipado rápido o proyectos pequeños/medianos en Cypress.
FAQ
¿Qué diferencia hay entre Percy y Chromatic?
Chromatic está diseñado exclusivamente para Storybook y prueba componentes aislados. Percy es universal y prueba páginas completas en varios frameworks (Cypress, Playwright, Selenium). Chromatic ofrece una integración Storybook nativa y una detección de cambios más fina; Percy cubre un perímetro más amplio con renderizado multinavegador real vía BrowserStack.
¿Es Percy gratuito?
Percy propone un free tier de 5 000 snapshots por mes para un proyecto y un solo navegador. Más allá, el plan Pro arranca en ~199 $/mes para 25 000 snapshots. Las capturas multinavegador y multi-viewport consumen varios snapshots por página, lo que reduce la cobertura real del free tier. Consulta percy.io/pricing para las tarifas actualizadas.
¿Funciona Chromatic sin Storybook?
No. Chromatic está diseñado exclusivamente para el ecosistema Storybook. Sin Storybook, Chromatic no puede funcionar. Si no utilizas Storybook, Percy, Playwright Visual u otras alternativas son opciones viables.
¿Qué herramienta tiene menos falsos positivos, Percy o Chromatic?
Chromatic tiene una tasa de falsos positivos constatada de 2-5 % en contenido dinámico, contra 8-15 % para Percy. La comparación optimizada de Chromatic para componentes y su recalibrado automático de umbrales explican esta diferencia. Percy sigue basada en una comparación píxel a píxel, más sensible a las variaciones de renderizado.
¿Cuánto cuestan Chromatic y Percy?
Ambas ofrecen capas gratuitas de 5 000 snapshots por mes. Chromatic empieza en ~149 $/mes para 25 000 snapshots (plan Team). Percy empieza en ~199 $/mes para 25 000 snapshots (plan Pro). Las tarifas exactas dependen del volumen y las funcionalidades — consulta chromatic.com/pricing y percy.io/pricing para las cifras actualizadas.
¿Se pueden usar Chromatic y Percy juntos?
Técnicamente sí — Chromatic para pruebas de componentes Storybook y Percy para páginas completas. En la práctica, el coste acumulado y la gestión de dos herramientas distintas frenan este enfoque. Los equipos que combinan ambas lo hacen generalmente en fase de transición.
¿Existe una alternativa gratuita y local a Chromatic y Percy?
Sí. Playwright Visual Regression ofrece aserciones visuales nativas, gratuitas y locales. Delta-QA propone un enfoque no-code local sin límite de capturas. Cypress Image Snapshot es otra opción gratuita para los equipos Cypress. Estas soluciones evitan la transferencia cloud pero ofrecen menos funcionalidades de colaboración y de comparación avanzada.
¿Cómo reducir los falsos positivos con Percy?
Las estrategias principales son: configurar zonas de exclusión para el contenido dinámico, usar un umbral de tolerancia adaptado, estabilizar los datos de prueba (fechas, contenido aleatorio) y limitar los viewports a los tamaños críticos. Estos ajustes reducen el ruido pero aumentan el mantenimiento. Nuestro artículo sobre los falsos positivos en las pruebas visuales detalla estos métodos.
Para profundizar
- Applitools vs Percy: Comparativo Pruebas Visuales 2026
- Cómo Elegir una Herramienta de Pruebas Visuales: Guía de Compra Completa (2026)
- Playwright vs Puppeteer: Comparativo Pruebas Visuales 2026
Cada proyecto tiene restricciones diferentes — framework, presupuesto, conformidad, volumen de snapshots. La tabla comparativa y las secciones de limitaciones anteriores te permitirán tomar una decisión informada. Si tu prioridad es una prueba visual local, sin cloud y sin coste recurrente, prueba Delta-QA gratis.