Percy und Chromatic für Storybook

Percy ist eine cloudbasierte VRT-Plattform, die sich in CI-Pipelines integrieren lässt. Sie erstellt Screenshots von Webseiten und Storybook-Stories, speichert Baselines in der Cloud und erzeugt Reviews visueller Diffs, die über eine Weboberfläche zugänglich sind. Percy unterstützt Playwright, Cypress, Selenium und Storybook.

Chromatic ist eine speziell für Storybook entwickelte VRT-Plattform. Sie erstellt in Cloud-Browsern Screenshots aller Stories, vergleicht sie mit Baselines und erzeugt eine Review-Oberfläche für Diffs. Außerdem veröffentlicht Chromatic Storybook als gehostete Website für Komponentendokumentation.

Percy und Chromatic erkennen automatisch jede Storybook-Story und erstellen davon einen Snapshot. Sie benötigen keinen zusätzlichen Testcode – erstellen Sie Stories für Ihre Komponenten, führen Sie die CLI aus, und jeder visuelle Zustand wird automatisch getestet. Dadurch gelingt die Einführung in bestehenden Storybook-Projekten schnell.

Installieren Sie @percy/cli und @percy/storybook, fügen Sie die Umgebungsvariable PERCY_TOKEN zur CI hinzu und ergänzen Sie percy storybook ./storybook-static in der CI-Pipeline. Percy erstellt automatisch Snapshots aller Stories und veröffentlicht einen VRT-Build im Percy-Dashboard.

Installieren Sie chromatic, fügen Sie CHROMATIC_PROJECT_TOKEN zur CI hinzu und führen Sie chromatic --project-token=... aus. Beim ersten Lauf werden Baselines angelegt. Nachfolgende Läufe vergleichen die Ergebnisse mit den Baselines und veröffentlichen Review-Links in den GitHub-PR-Prüfungen.

Beide Tools fügen eine PR-Prüfung hinzu, die „X Änderungen erkannt“ anzeigt. Durch einen Klick wird die Review-Oberfläche mit Diffs nebeneinander oder als Overlay geöffnet. Reviewer bestätigen beabsichtigte Änderungen und legen dadurch neue Baselines fest oder fordern bei unbeabsichtigten Regressionen Korrekturen an.

Verwenden Sie Storybook-Args (Controls), um mehrere Story-Varianten zu erstellen: Default, Loading, Error, Disabled, LongText, SmallViewport. Jede Variante wird zu einem separaten VRT-Snapshot – so erhalten Sie eine umfassende Zustandsabdeckung, ohne separate Testdateien schreiben zu müssen.

Chromatic und Percy unterstützen mehrere Viewport-Breiten pro Snapshot. Konfigurieren Sie die Viewports in der Story oder global in .storybook/preview.js. Führen Sie VRT für jeden Viewport und jedes Theme (hell/dunkel) aus, um responsive Regressionen und Theme-Regressionen gleichzeitig zu erkennen.

Akzeptieren Sie bei einem Versionssprung oder einer beabsichtigten Neugestaltung alle Änderungen. Beide Tools unterstützen die Stapelannahme. Nach einer umfassenden Aktualisierung des Designsystems können Sie alle Diffs auf einmal akzeptieren; die neuen Screenshots werden dann zur Baseline für zukünftige schrittweise Änderungen.

Kombinieren Sie Storybooks play()-Funktion (Interaktionstests) mit VRT: play() simuliert Benutzerinteraktionen, etwa das Klicken auf eine Schaltfläche oder das Öffnen eines Modals. Anschließend erfasst der VRT-Snapshot den daraus resultierenden Zustand. So testen Sie die visuelle Ausgabe komplexer interaktiver Komponenten.

Percy und Chromatic berechnen die Kosten pro Snapshot. Große Storybook-Sammlungen mit Hunderten von Stories, mehreren Viewports und Themes erzeugen pro PR Tausende von Snapshots. Überwachen Sie die Nutzung, setzen Sie Story-Decorators effizient ein und erwägen Sie, VRT für Stories mit ausschließlich logischem Schwerpunkt zu überspringen.

Was macht Chromatic im Vergleich zu allgemeinen VRT-Tools besonders geeignet für Storybook-Projekte?

Percy und Chromatic automatisieren VRT für Storybook, indem sie alle Stories in Cloud-Browsern erkennen und als Snapshots erfassen, PR-Reviews für Diffs erzeugen und Baselines verwalten. In Kombination mit Story-Args für die Zustandsabdeckung und play() für Interaktionstests bieten sie eine umfassende visuelle Qualitätssicherung für Komponentenbibliotheken.