Chromatic

Chromatic est la plateforme officielle de tests visuels pour Storybook, créée par les mainteneurs du projet. Elle automatise la détection des régressions visuelles en comparant les captures d’écran de chaque composant entre les versions. Chromatic transforme la revue de code en revue visuelle, rendant les changements d’interface immédiatement visibles.

Fonctionnalités principales

Chromatic capture automatiquement chaque story de Storybook dans un navigateur cloud et compare les résultats avec la version précédente. Les différences sont mises en évidence pixel par pixel, permettant de détecter les régressions visuelles avant qu’elles n’atteignent la production. L’interface de revue collaborative permet à l’équipe d’approuver ou de rejeter les changements visuels. Le Storybook est publié en ligne pour un accès facile par toute l’équipe. Les tests d’interaction vérifient les comportements dynamiques des composants.

À qui s’adresse Chromatic ?

Chromatic est essentiel pour les équipes qui maintiennent des bibliothèques de composants ou des design systems. Les équipes frontend qui utilisent déjà Storybook bénéficient d’une intégration naturelle. Les projets où la cohérence visuelle est critique apprécient la détection automatisée des régressions.

Tarification

Le plan gratuit inclut 5 000 snapshots par mois, suffisant pour les petits projets. Le plan Starter à 149 dollars par mois offre 35 000 snapshots. Les plans supérieurs sont disponibles pour les grandes équipes avec des besoins plus importants.

Notre avis

Chromatic est un complément indispensable à Storybook pour les équipes soucieuses de la qualité visuelle. La détection automatique des régressions évite des heures de tests manuels. Le coût peut devenir significatif pour les projets avec beaucoup de composants, mais la valeur ajoutée en termes de qualité est indéniable.