Régression visuelle (Chromatic)Visual regression (Chromatic)
Détecter et bloquer toute régression visuelle non intentionnelle sur les composants avant qu'elle n'atteigne le dépôt.Detect and block any unintentional visual regression on components before it reaches the repository.
Flux du pipelinePipeline flow
01 · Déclencheur01 · Trigger
Composants, tokens ou Storybook modifiésComponents, tokens or Storybook modified
components/ · tokens/ · .storybook/ — tout changement visuel potentiel.components/ · tokens/ · .storybook/ — any potential visual change.
02 · Capture02 · Capture
Publication + comparaison baselinePublication + baseline comparison
npm run chromatic → Storybook publié sur Chromatic → captures comparées au baseline approuvé.npm run chromatic → Storybook published on Chromatic → captures compared against approved baseline.
03 · Résultat03 · Outcome
Approbation ou blocageApproval or block
Chromatic exit 0 ou changements explicitement approuvés → commit autorisé. Régressions détectées → commit bloqué.Chromatic exit 0 or changes explicitly approved → commit cleared. Regressions detected → commit blocked.
Valeur métierBusiness value
Aucune régression visuelle silencieuse. Chaque pixel qui change est capturé, comparé au baseline et soumis à approbation. Les designers contrôlent les évolutions visuelles — pas les accidents de code.No silent visual regression. Every changed pixel is captured, compared to the baseline and submitted for approval. Designers control visual changes — not code accidents.
Matrice de déclenchementTrigger matrix
| Fichier modifiéChanged file | ActionAction |
|---|---|
components/agtc-*.js | Oui — capture + comparaison baselineYes — capture + baseline comparison |
tokens/*.json | Oui — impact visuel potentielYes — potential visual impact |
.storybook/ | Oui — configuration des capturesYes — capture configuration |
site/build.js | Non — pas de stories StorybookNo — no Storybook stories |
ContrôlesChecks
- Chromatic exit 0 ou changements visuels explicitement approuvésChromatic exit 0 or visual changes explicitly approved
- Aucune régression non intentionnelle sur les composants existantsNo unintentional regression on existing components
- Captures de tous les états : default, hover, focus, disabled, loadingCaptures of all states: default, hover, focus, disabled, loading
- CHROMATIC_PROJECT_TOKEN en variable d'environnement (jamais en clair dans le dépôt)CHROMATIC_PROJECT_TOKEN as environment variable (never in plain text in repo)
- Workflow CI .github/workflows/chromatic.yml actifCI workflow .github/workflows/chromatic.yml active
CommandeCommand
export CHROMATIC_PROJECT_TOKEN=chpt_xxx
npm run chromatic
# CI : secret GitHub CHROMATIC_PROJECT_TOKEN injecté automatiquement