Percy e Chromatic per Storybook

Percy è una piattaforma VRT basata sul cloud che si integra con le pipeline CI. Acquisisce screenshot delle pagine web e delle story di Storybook, archivia le baseline nel cloud e genera revisioni delle differenze visive accessibili tramite un'interfaccia web. Supporta Playwright, Cypress, Selenium e Storybook.

Chromatic è una piattaforma VRT progettata specificamente per Storybook. Acquisisce tutte le story nei browser cloud, le confronta con le baseline e genera un'interfaccia per la revisione delle differenze. Chromatic pubblica inoltre Storybook come sito ospitato di documentazione dei componenti.

Percy e Chromatic rilevano e acquisiscono automaticamente uno snapshot di ogni story di Storybook. Non è necessario scrivere codice di test aggiuntivo: scriva le story per i componenti, esegua la CLI e ogni stato visivo verrà testato automaticamente. Questo rende rapida l'adozione nei progetti Storybook esistenti.

Installi @percy/cli e @percy/storybook, aggiunga la variabile d'ambiente PERCY_TOKEN alla CI e aggiunga percy storybook ./storybook-static alla pipeline CI. Percy acquisisce gli snapshot di tutte le story e pubblica automaticamente una build VRT nella dashboard di Percy.

Installi chromatic, aggiunga CHROMATIC_PROJECT_TOKEN alla CI ed esegua chromatic --project-token=.... La prima esecuzione stabilisce le baseline. Le esecuzioni successive confrontano i risultati con le baseline e pubblicano i link per la revisione nei controlli delle PR di GitHub.

Entrambi gli strumenti aggiungono un controllo alla PR che mostra "X changes detected". Facendo clic si apre l'interfaccia di revisione con differenze affiancate o sovrapposte. I revisori approvano le modifiche intenzionali, stabilendo nuove baseline, oppure richiedono correzioni per le regressioni accidentali.

Utilizzi gli argomenti di Storybook (i controlli) per creare più varianti della story: Default, Loading, Error, Disabled, LongText, SmallViewport. Ogni variante diventa uno snapshot VRT separato: una copertura completa degli stati senza dover scrivere file di test separati.

Chromatic e Percy supportano più larghezze del viewport per ogni snapshot. Configuri i viewport nella story oppure globalmente in .storybook/preview.js. Esegua il VRT per ogni viewport e per ogni tema (chiaro/scuro) per rilevare contemporaneamente le regressioni responsive e quelle dei temi.

Accetti tutte le modifiche al momento di un incremento della versione principale o di una riprogettazione intenzionale. Entrambi gli strumenti supportano l'accettazione in blocco. Dopo un aggiornamento importante del design system, accetti tutte le differenze in una volta sola: i nuovi screenshot diventeranno la baseline per le future modifiche incrementali.

Combini la funzione play() di Storybook (test delle interazioni) con il VRT: play() simula le interazioni dell'utente, ad esempio facendo clic su un pulsante o aprendo una modale, quindi lo snapshot VRT acquisisce lo stato risultante. In questo modo viene testato l'output visivo dei componenti interattivi complessi.

Percy e Chromatic applicano un costo per snapshot. Suite Storybook di grandi dimensioni, con centinaia di story, più viewport e più temi, generano migliaia di snapshot per ogni PR. Monitori l'utilizzo, utilizzi in modo efficiente i decorator delle story e valuti di escludere dal VRT le story incentrate esclusivamente sulla logica.

Che cosa rende Chromatic particolarmente adatto ai progetti Storybook rispetto agli strumenti VRT generici?

Percy e Chromatic automatizzano il VRT per Storybook rilevando e acquisendo gli snapshot di tutte le story nei browser cloud, generando revisioni delle differenze nelle PR e gestendo le baseline. In combinazione con gli argomenti delle story per la copertura degli stati e play() per i test delle interazioni, offrono una garanzia completa della qualità visiva per le librerie di componenti.