Percy y Chromatic para Storybook

Percy es una plataforma de VRT basada en la nube que se integra con las canalizaciones de CI. Captura capturas de pantalla de páginas web e historias de Storybook, almacena las líneas base en la nube y genera revisiones de diferencias visuales accesibles mediante una interfaz web. Es compatible con Playwright, Cypress, Selenium y Storybook.

Chromatic es una plataforma de VRT diseñada específicamente para Storybook. Captura todas las historias en navegadores en la nube, las compara con las líneas base y genera una interfaz para revisar las diferencias. Chromatic también publica Storybook como un sitio alojado de documentación de componentes.

Percy y Chromatic descubren y toman automáticamente una instantánea de cada historia de Storybook. No se necesita código de prueba adicional: escriba historias para sus componentes, ejecute la CLI y cada estado visual se probará automáticamente. Esto agiliza la adopción en proyectos de Storybook existentes.

Instale @percy/cli y @percy/storybook, añada la variable de entorno PERCY_TOKEN a CI y añada percy storybook ./storybook-static a la canalización de CI. Percy toma automáticamente instantáneas de todas las historias y publica una compilación de VRT en el panel de Percy.

Instale chromatic, añada CHROMATIC_PROJECT_TOKEN a CI y ejecute chromatic --project-token=.... La primera ejecución establece las líneas base. Las ejecuciones posteriores comparan los resultados con las líneas base y publican enlaces de revisión en las comprobaciones de las solicitudes de incorporación de cambios de GitHub.

Ambas herramientas añaden una comprobación a la solicitud de incorporación de cambios que muestra «Se detectaron X cambios». Al hacer clic, se abre la interfaz de revisión con diferencias en paralelo o superpuestas. Los revisores aprueban los cambios intencionados, estableciendo nuevas líneas base, o solicitan correcciones para las regresiones accidentales.

Utilice los argumentos de Storybook (controles) para crear varias variantes de una historia: Default, Loading, Error, Disabled, LongText y SmallViewport. Cada variante se convierte en una instantánea de VRT independiente, lo que proporciona una cobertura completa de estados sin escribir archivos de prueba separados.

Chromatic y Percy admiten varios anchos de ventana gráfica por instantánea. Configure las ventanas gráficas en la historia o globalmente en .storybook/preview.js. Ejecute la VRT para cada ventana gráfica y cada tema (claro/oscuro) para detectar simultáneamente regresiones adaptables y de temas.

Acepte todos los cambios al aumentar la versión principal o realizar un rediseño intencionado. Ambas herramientas admiten la aceptación por lotes. Después de una actualización importante del sistema de diseño, acepte todas las diferencias a la vez y las nuevas capturas de pantalla se convertirán en la línea base para futuros cambios incrementales.

Combine la función play() de Storybook (pruebas de interacción) con VRT: play() simula las interacciones del usuario (hacer clic en un botón, abrir un cuadro de diálogo) y, después, la instantánea de VRT captura el estado resultante. Esto permite probar el resultado visual de componentes interactivos complejos.

Percy y Chromatic cobran por instantánea. Las suites grandes de Storybook con cientos de historias, varias ventanas gráficas y temas generan miles de instantáneas por solicitud de incorporación de cambios. Supervise el uso, utilice los decoradores de historias de forma eficiente y considere omitir la VRT en historias centradas exclusivamente en la lógica.

¿Qué hace que Chromatic sea especialmente adecuado para proyectos de Storybook en comparación con las herramientas de VRT genéricas?

Percy y Chromatic automatizan la VRT para Storybook descubriendo y tomando instantáneas de todas las historias en navegadores en la nube, generando revisiones de diferencias en las solicitudes de incorporación de cambios y gestionando las líneas base. Combinadas con los argumentos de las historias para cubrir estados y play() para probar interacciones, proporcionan una garantía de calidad visual completa para las bibliotecas de componentes.