Pixel Perfect vs Chromatic: contra el diseño o contra la versión anterior
Si usas Storybook, seguro conoces Chromatic. Pixel Perfect no lo reemplaza: responden dos preguntas distintas. Aquí está cuál responde cada uno, junto con Percy y Applitools, con datos de sus webs.
La diferencia de fondo
Chromatic, Percy y Applitools son pruebas de regresión visual: toman capturas de tus componentes o páginas y las comparan con las que aprobaste antes. Responden «¿cambió algo que no quería cambiar?». En Chromatic, la línea base es la última captura aceptada en la misma rama.
Pixel Perfect compara la página contra el diseño de Figma, valor por valor. Responde «¿la página quedó igual al diseño?» y te dice qué cambiar: «el título mide 44 px y en Figma 48».
Una regresión visual da por buena la primera versión que apruebas. Si esa versión ya salió distinta al Figma, la prueba no lo va a notar: compara contra sí misma.
Lado a lado
| Pixel Perfect | Chromatic | Percy | Applitools | |
|---|---|---|---|---|
| Contra qué compara | Contra el diseño de Figma | Contra la última captura aceptada de tu código, en la misma rama | Contra capturas aprobadas antes. También puede usar un diseño de Figma como referencia | Contra la línea base de ejecuciones anteriores. Con su plugin, un frame de Figma puede ser la línea base |
| Qué te entrega | Cada diferencia con el valor de Figma y el de la página: espaciado, tipografía, color, tamaños | Las diferencias de píxeles entre la captura nueva y la aceptada | Las diferencias visuales entre capturas | Las diferencias visuales entre la captura y la línea base |
| Qué necesitas | La app, el link del frame y la dirección de la página. Sin tests ni Storybook | Storybook, o tests de Vitest, Playwright o Cypress | Su SDK en tus tests (Playwright, Cypress, Selenium, Storybook…) o su CLI | Su SDK en el código de tus tests |
| Dónde corre | En tu computadora, cuando lo necesitas | En tu CI en cada push, con un check en el pull request | En tu CI, con el estado en el pull request | En tu CI, con el estado en el pull request de GitHub |
| Precio de entrada | Se descarga gratis | Gratis hasta 5000 capturas al mes. Starter: USD 179 al mes | Gratis hasta 5000 capturas al mes. Desktop: USD 199 al mes con pago anual | Sin plan gratis (tiene prueba gratis). Starter: USD 667 al mes con pago anual |
Datos de Chromatic, Percy y Applitools tomados de sus webs, documentación y precios oficiales el 24 de octubre de 2026. Pueden cambiar: revisa sus webs. El plugin de Figma de Chromatic muestra tus historias dentro de Figma; no compara el diseño con el componente.
Cuándo usar cada uno
- Chromatic: si tu equipo trabaja con Storybook y quiere que cada pull request avise cuando un componente cambia sin querer.
- Percy: si ya tienes tests de Playwright, Cypress o Selenium y quieres sumarles capturas en tu CI.
- Applitools: si necesitas regresión visual a gran escala, con su IA visual, y tienes presupuesto de empresa.
- Pixel Perfect: si diseño, producto o QA necesitan saber si la pantalla quedó igual al Figma antes de darla por terminada, sin escribir tests.
Se usan juntos
Un flujo que funciona: con Pixel Perfect revisas la pantalla contra el Figma hasta que queda igual. Cuando la apruebas, esa versión pasa a ser la línea base de Chromatic o Percy, que a partir de ahí avisan si algo cambia sin querer.
Así la línea base nace correcta y la regresión visual cuida que no se rompa.