Percy i Chromatic dla Storybook

Percy to oparta na chmurze platforma VRT, która integruje się z potokami CI. Wykonuje zrzuty ekranu stron internetowych i stories Storybooka, przechowuje obrazy bazowe w chmurze oraz generuje przeglądy różnic wizualnych dostępne w interfejsie internetowym. Obsługuje Playwright, Cypress, Selenium i Storybook.

Chromatic to platforma VRT zaprojektowana specjalnie dla Storybooka. Wykonuje wszystkie stories w przeglądarkach działających w chmurze, porównuje je z obrazami bazowymi i generuje interfejs przeglądu różnic. Chromatic publikuje również Storybooka jako hostowaną witrynę dokumentacji komponentów.

Oba narzędzia automatycznie wykrywają i zapisują zrzuty ekranu każdego story w Storybooku. Nie trzeba pisać dodatkowego kodu testów — wystarczy tworzyć stories dla komponentów, uruchomić interfejs wiersza poleceń, a każdy stan wizualny zostanie automatycznie przetestowany. Dzięki temu wdrożenie w istniejących projektach Storybooka jest szybkie.

Należy zainstalować @percy/cli i @percy/storybook, dodać zmienną środowiskową PERCY_TOKEN do CI oraz dodać percy storybook ./storybook-static do potoku CI. Percy automatycznie zapisuje zrzuty ekranu wszystkich stories i publikuje kompilację VRT w panelu Percy.

Należy zainstalować chromatic, dodać CHROMATIC_PROJECT_TOKEN do CI i uruchomić chromatic --project-token=.... Pierwsze uruchomienie ustanawia obrazy bazowe. Kolejne uruchomienia porównują z nimi nowe zrzuty i publikują odnośniki do przeglądu w kontrolach PR na GitHubie.

Oba narzędzia dodają kontrolę PR z komunikatem „X changes detected”. Kliknięcie go otwiera interfejs przeglądu z różnicami pokazanymi obok siebie lub jako nakładka. Osoby weryfikujące zatwierdzają zamierzone zmiany, ustanawiając nowe obrazy bazowe, albo żądają poprawek w przypadku niezamierzonych regresji.

Należy używać argumentów Storybooka (elementów sterujących), aby tworzyć wiele wariantów story: Default, Loading, Error, Disabled, LongText, SmallViewport. Każdy wariant staje się osobnym zrzutem VRT — zapewnia kompleksowe pokrycie stanów bez pisania oddzielnych plików testów.

Chromatic i Percy obsługują wiele szerokości widoku dla każdego zrzutu. Widoki można skonfigurować w story lub globalnie w .storybook/preview.js. Należy uruchamiać VRT dla każdego widoku i każdego motywu (jasnego/ciemnego), aby jednocześnie wykrywać regresje responsywności i motywów.

Należy zaakceptować wszystkie zmiany przy zwiększeniu głównego numeru wersji lub podczas zamierzonego przeprojektowania. Oba narzędzia obsługują akceptowanie zbiorcze. Po dużej aktualizacji systemu projektowego można zaakceptować wszystkie różnice jednocześnie, a nowe zrzuty staną się obrazami bazowymi dla przyszłych zmian przyrostowych.

Połącz funkcję play() Storybooka (testy interakcji) z VRT: play() symuluje interakcje użytkownika (kliknięcie przycisku, otwarcie modalu), a następnie zrzut VRT przechwytuje wynikowy stan. Umożliwia to testowanie wyglądu złożonych, interaktywnych komponentów.

Percy i Chromatic naliczają opłaty za każdy zrzut. Duże zestawy stories w Storybooku, obejmujące setki stories, wiele widoków i motywów, generują tysiące zrzutów dla każdego PR. Należy monitorować wykorzystanie, efektywnie używać dekoratorów stories i rozważyć pomijanie VRT dla stories dotyczących wyłącznie logiki.

Co sprawia, że Chromatic szczególnie dobrze nadaje się do projektów Storybooka w porównaniu z ogólnymi narzędziami VRT?

Percy i Chromatic automatyzują VRT dla Storybooka, wykrywając i zapisując zrzuty ekranu wszystkich stories w przeglądarkach działających w chmurze, generując przeglądy różnic dla PR oraz zarządzając obrazami bazowymi. W połączeniu z argumentami stories zapewniającymi pokrycie stanów i play() do testowania interakcji oferują kompleksowe zapewnianie jakości wizualnej bibliotek komponentów.