Recipe
Chromatic Visual Regression
Pixel-perfect UI testing with Chromatic's cloud rendering infrastructure.
Overview
Chromatic captures screenshots of every Storybook story across browsers and viewports, then diffs them against approved baselines. Meridian uses it to catch visual regressions before they ship.
Setup
npm install --save-dev chromatic
npx chromatic --project-token=<your-token>Workflow
- Push a branch — Chromatic auto-detects Storybook stories.
- Review diffs in the Chromatic UI; accept or deny changes.
- Merge only when the build passes visual review.
CI Integration
- run: npx chromatic --exit-zero-on-changes
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_TOKEN }}