Percy og Chromatic til Storybook

Percy er en cloudbaseret VRT-platform, der integreres med CI-arbejdsgange. Den tager skærmbilleder af websider og Storybook-eksempler, gemmer referencebilleder i skyen og genererer gennemgange af visuelle forskelle, som er tilgængelige via en webgrænseflade. Den understøtter Playwright, Cypress, Selenium og Storybook.

Chromatic er en VRT-platform, der er udviklet specifikt til Storybook. Den tager skærmbilleder af alle eksempler i cloudbrowsere, sammenligner dem med referencebilleder og genererer en grænseflade til gennemgang af forskelle. Chromatic udgiver også Storybook som et hostet websted med komponentdokumentation.

Både Percy og Chromatic finder automatisk alle Storybook-eksempler og tager et øjebliksbillede af hvert af dem. Der er ikke behov for yderligere testkode — skriv eksempler til dine komponenter, kør CLI'en, og hver visuel tilstand bliver testet automatisk. Det gør det hurtigt at tage værktøjerne i brug i eksisterende Storybook-projekter.

Installer @percy/cli og @percy/storybook, tilføj miljøvariablen PERCY_TOKEN til CI, og føj percy storybook ./storybook-static til CI-arbejdsgangen. Percy tager automatisk et øjebliksbillede af alle eksempler og opretter en VRT-kørsel i Percy-dashboardet.

Installer chromatic, tilføj CHROMATIC_PROJECT_TOKEN til CI, og kør chromatic --project-token=.... Den første kørsel opretter referencebillederne. Efterfølgende kørsler sammenligner med referencebillederne og sender links til gennemgang til GitHub-kontrollerne for pull requests.

Begge værktøjer tilføjer en kontrol af pull requests, som viser "X ændringer fundet." Når du klikker på den, åbnes grænsefladen til gennemgang med forskelle side om side eller som en overlejring. Reviewere godkender tilsigtede ændringer, hvilket opretter nye referencebilleder, eller anmoder om rettelser af utilsigtede regressioner.

Brug Storybook-argumenter (kontrolelementer) til at oprette flere varianter af et eksempel: Standard, Indlæser, Fejl, Deaktiveret, LangTekst, LilleVisningsområde. Hver variant bliver til et separat VRT-øjebliksbillede — omfattende dækning af tilstande uden at skrive separate testfiler.

Chromatic og Percy understøtter flere viewport-bredder pr. øjebliksbillede. Konfigurer viewports i eksemplet eller globalt i .storybook/preview.js. Kør VRT for hver viewport og hvert tema (lyst/mørkt) for samtidig at opdage regressioner i responsivitet og temaer.

Accepter alle ændringer ved en større versionsopdatering eller et tilsigtet redesign. Begge værktøjer understøtter masseaccept. Efter en større opdatering af designsystemet kan du acceptere alle forskelle på én gang, hvorefter de nye skærmbilleder bliver referencebilleder for fremtidige trinvise ændringer.

Kombiner Storybooks play()-funktion (interaktionstests) med VRT: play() simulerer brugerinteraktioner (klik på en knap, åbn en modal), hvorefter VRT-øjebliksbilledet indfanger den resulterende tilstand. Det tester det visuelle output fra komplekse interaktive komponenter.

Percy og Chromatic opkræver betaling pr. øjebliksbillede. Store Storybook-samlinger med hundredvis af eksempler, flere viewports og temaer genererer tusindvis af øjebliksbilleder pr. pull request. Overvåg forbruget, brug eksempel-dekoratorer effektivt, og overvej at springe VRT over for eksempler, der udelukkende fokuserer på logik.

Percy og Chromatic automatiserer VRT for Storybook ved at finde alle eksempler og tage øjebliksbilleder af dem i cloudbrowsere, generere gennemgange af forskelle for pull requests og håndtere referencebilleder. Kombineret med eksempelargumenter til dækning af tilstande og play() til interaktionstest giver de omfattende visuel kvalitetssikring af komponentbiblioteker.