Percy et Chromatic pour Storybook

Percy est une plateforme VRT hébergée à distance qui s'intègre aux chaînes d'intégration continue. Elle capture des captures d'écran de pages Web et de scénarios Storybook, stocke les références dans une infrastructure distante et génère des revues de différences visuelles accessibles via une interface Web. Elle prend en charge Playwright, Cypress, Selenium et Storybook.

Chromatic est une plateforme VRT conçue spécialement pour Storybook. Elle capture tous les scénarios dans des navigateurs distants, les compare aux références et génère une interface de revue des différences. Chromatic publie également Storybook sous la forme d'un site hébergé de documentation des composants.

Percy et Chromatic découvrent et capturent automatiquement chaque scénario Storybook. Aucun code de test supplémentaire n'est nécessaire : écrivez des scénarios pour vos composants, exécutez le CLI et chaque état visuel est automatiquement vérifié. Cela permet une adoption rapide dans les projets Storybook existants.

Installez @percy/cli et @percy/storybook, ajoutez la variable d'environnement PERCY_TOKEN à l'intégration continue et ajoutez percy storybook ./storybook-static à la chaîne d'intégration continue. Percy capture tous les scénarios et publie automatiquement une exécution VRT dans le tableau de bord Percy.

Installez chromatic, ajoutez CHROMATIC_PROJECT_TOKEN à l'intégration continue et exécutez chromatic --project-token=.... La première exécution crée les références. Les exécutions suivantes les comparent aux références et publient des liens de revue dans les contrôles PR de GitHub.

Les deux outils ajoutent un contrôle PR qui affiche « X changements détectés. ». Un clic ouvre l'interface de revue avec des différences côte à côte ou en superposition. Les personnes chargées de la revue valident les changements intentionnels, ce qui crée de nouvelles références, ou demandent des corrections pour les régressions accidentelles.

Utilisez les arguments Storybook (contrôles) pour créer plusieurs variantes de scénario : Par défaut, Chargement, Erreur, Désactivé, LongText, SmallViewport. Chaque variante devient une capture VRT distincte — une couverture complète des états sans écrire de fichiers de test distincts.

Chromatic et Percy prennent en charge plusieurs largeurs de fenêtre d'affichage par capture. Configurez-les dans le scénario ou globalement dans les fenêtres d'affichage de .storybook/preview.js. Exécutez VRT pour chaque fenêtre d'affichage et chaque thème (clair/sombre) afin de détecter simultanément les régressions responsives et celles liées aux thèmes.

Acceptez toutes les modifications lors d'une augmentation majeure de version ou d'une refonte intentionnelle. Les deux outils prennent en charge l'acceptation par lot. Après une mise à jour majeure du système de conception, acceptez toutes les différences en une seule fois : les nouvelles captures d'écran deviennent alors la référence pour les futurs changements progressifs.

Combinez la fonction play() de Storybook (tests d'interaction) avec VRT : play() simule les interactions utilisateur (cliquez sur un bouton, ouvrez une fenêtre modale), puis la capture VRT enregistre l'état obtenu. Cette méthode vérifie le rendu visuel des composants interactifs complexes.

Percy et Chromatic facturent chaque capture. Les grandes suites Storybook comprenant des centaines de scénarios, plusieurs fenêtres d'affichage et plusieurs thèmes génèrent des milliers de captures par PR. Surveillez l'utilisation, utilisez efficacement les décorateurs de scénarios et envisagez d'ignorer VRT pour les scénarios consacrés uniquement à la logique.

Qu'est-ce qui rend Chromatic particulièrement adapté aux projets Storybook, par rapport aux outils VRT génériques ?

Percy et Chromatic automatisent VRT pour Storybook en découvrant et en capturant tous les scénarios dans des navigateurs distants, en générant des revues des différences dans les PR et en gérant les références. Associés aux arguments de scénario pour la couverture des états et à play() pour les tests d'interaction, ils fournissent une assurance qualité visuelle complète pour les bibliothèques de composants.