Chromatic Setup for Component Visual Testing
Chromatic is a cloud service for visual testing of UI components, built on top of Storybook. It screenshots each story before and after changes, compares pixel-by-pixel and requires review on differences. Catches regressions that regular unit and e2e tests miss: padding changed 2px, button color shifted, responsiveness broke on tablet.
Prerequisites
Chromatic works on top of Storybook — must already be configured. Supports React, Vue, Angular, Svelte, Web Components. Supported Storybook versions: 6.x, 7.x, 8.x.
Connection
npm install --save-dev chromatic
npx chromatic --project-token=YOUR_PROJECT_TOKEN
On first run Chromatic accepts all stories as baseline. On next runs — compares with baseline and shows diff.
GitHub Actions Integration
name: Visual Tests
on: [push]
jobs:
chromatic:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Required for TurboSnap
- uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- run: npm ci
- name: Run Chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitZeroOnChanges: true # Don't fail, wait for approval
With exitZeroOnChanges: true pipeline doesn't block — changes await visual approval in Chromatic interface.
TurboSnap — Speed Up Testing
TurboSnap analyzes which files changed in commit and tests only stories using changed components. On large projects reduces test time from 20 minutes to 2–3 minutes.
- uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
onlyChanged: true # Enables TurboSnap
Review Process for Changes
When Chromatic finds visual changes, creates link to review interface. There: list of changed stories, pixel-perfect diff (added/removed), ability to accept or reject each change.
Accepted changes become new baseline. Workflow integrates into GitHub Pull Requests: "UI Review" status check blocks merge until approval.
Cost
Chromatic is paid service. Free tier: 5000 snaps/month. For actively developing project with 200+ stories usually needs paid plan from $149/month.
Timeframes
Chromatic setup for existing Storybook with GitHub Actions integration and PR status check — 1 day.