Percy and Chromatic for Storybook
Integrate Percy and Chromatic into CI pipelines for automated visual review of Storybook components.
Percy and Chromatic for Storybook is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Percy Overview
Percy is a cloud-based VRT platform that integrates with CI pipelines. It captures screenshots of web pages and Storybook stories, stores baselines in the cloud, and generates visual diff reviews accessible via a web UI. It supports Playwright, Cypress, Selenium, and Storybook.
Chromatic Overview
Chromatic is a VRT platform purpose-built for Storybook. It captures all stories in cloud browsers, compares them to baselines, and generates a diff review UI. Chromatic also publishes Storybook as a hosted component documentation site.
Storybook Integration
Both Percy and Chromatic automatically discover and snapshot every Storybook story. No additional test code is needed — write stories for your components, run the CLI, and every visual state is automatically tested. This makes adoption fast in existing Storybook projects.
Percy Setup
Install @percy/cli and @percy/storybook, add the PERCY_TOKEN environment variable to CI, and add percy storybook ./storybook-static to the CI pipeline. Percy snapshots all stories and posts a VRT build to the Percy dashboard automatically.
Chromatic Setup
Install chromatic, add CHROMATIC_PROJECT_TOKEN to CI, and run chromatic --project-token=.... The first run establishes baselines. Subsequent runs compare against baselines and post review links to GitHub PR checks.
Review Workflow
Both tools add a PR check that shows "X changes detected." Clicking opens the review UI with side-by-side or overlay diffs. Reviewers approve intentional changes (establishing new baselines) or request fixes for accidental regressions.
Story Args for VRT Coverage
Use Storybook args (controls) to create multiple story variants: Default, Loading, Error, Disabled, LongText, SmallViewport. Each variant becomes a separate VRT snapshot — comprehensive state coverage without writing separate test files.
Viewport and Theme Testing
Chromatic and Percy support multiple viewport widths per snapshot. Configure in the story or globally in .storybook/preview.js viewports. Run VRT for each viewport and each theme (light/dark) to catch responsive and theme regressions simultaneously.
Baseline Management
Accept all changes at a major version bump or intentional redesign. Both tools support batch acceptance. After a major design system update, accept all diffs at once and the new screenshots become the baseline for future incremental changes.
Interaction Testing with VRT
Combine Storybook's play() function (interaction tests) with VRT: play() simulates user interactions (click a button, open a modal), then the VRT snapshot captures the resulting state. This tests visual output of complex interactive components.
Cost and Snapshot Limits
Percy and Chromatic charge per snapshot. Large Storybook suites with hundreds of stories, multiple viewports, and themes generate thousands of snapshots per PR. Monitor usage, use story decorators efficiently, and consider skipping VRT for purely logic-focused stories.
Knowledge Check
What makes Chromatic specifically well-suited for Storybook projects compared to generic VRT tools?
Summary
Percy and Chromatic automate VRT for Storybook by discovering and snapshotting all stories in cloud browsers, generating PR diff reviews, and managing baselines. Combined with story args for state coverage and play() for interaction testing, they provide comprehensive visual quality assurance for component libraries.
Frequently asked questions
Is the “Percy and Chromatic for Storybook” lesson free?
Yes — the full text of “Percy and Chromatic for Storybook” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Percy and Chromatic for Storybook”?
Integrate Percy and Chromatic into CI pipelines for automated visual review of Storybook components. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Percy and Chromatic for Storybook” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Visual Regression Testing Concepts
- Percy and Chromatic for Storybook
- CSS Unit Testing with Jest
- Accessibility Testing: color-contrast and focus