Percy vs Chromatic: Which MCP should you use?
Percy
Visual review platform (BrowserStack)
Chromatic
Visual testing for Storybook
TL;DR
Percy captures full-page screenshots from any E2E framework. Chromatic is tied to Storybook — it captures each story as a snapshot, plus UI review workflows for designers. If your design system lives in Storybook, Chromatic is purpose-built; for general app screenshots, Percy is the pick.
Pick Percy
Pick Percy when you test full pages from Cypress/Playwright/etc, not just components.
Pick Chromatic
Pick Chromatic when you use Storybook and want story-level visual + interaction tests.
Feature-by-feature comparison
| Feature | 👁️Percy | 🎨Chromatic | Winner |
|---|---|---|---|
| Target | Full pages / E2E | Storybook stories | Tie |
| Storybook integration | None | Native | B |
| Cross-browser snapshots | Yes | Yes (Chrome, FF, Safari, Edge) | Tie |
| Interaction testing | No | Yes (via play functions) | B |
| Review UI | Excellent | Excellent, design-oriented | Tie |
| Pricing model | Per snapshot | Per snapshot | Tie |
| Owner | BrowserStack | Storybook team (Chromatic Inc) | Tie |
| Component-level diffs | DIY | Native per story | B |
Target
TiePercy
Full pages / E2E
Chromatic
Storybook stories
Storybook integration
BPercy
None
Chromatic
Native
Cross-browser snapshots
TiePercy
Yes
Chromatic
Yes (Chrome, FF, Safari, Edge)
Interaction testing
BPercy
No
Chromatic
Yes (via play functions)
Review UI
TiePercy
Excellent
Chromatic
Excellent, design-oriented
Pricing model
TiePercy
Per snapshot
Chromatic
Per snapshot
Owner
TiePercy
BrowserStack
Chromatic
Storybook team (Chromatic Inc)
Component-level diffs
BPercy
DIY
Chromatic
Native per story
Best for
Percy
- No clear wins on the compared features — see summary and tradeoffs above.
Best for
Chromatic
- Storybook integration: Native
- Interaction testing: Yes (via play functions)
- Component-level diffs: Native per story
Migration path
Not a direct migration — they test different things. If you're killing Storybook, drop Chromatic and move your visual coverage into Percy against your real pages. If you're adopting Storybook, adding Chromatic is a few lines in CI (npx chromatic --project-token=...). Teams often run both: Chromatic for the design system, Percy for the app.
Frequently asked questions
What is the main difference between Percy and Chromatic?
Percy captures full-page screenshots from any E2E framework. Chromatic is tied to Storybook — it captures each story as a snapshot, plus UI review workflows for designers. If your design system lives in Storybook, Chromatic is purpose-built; for general app screenshots, Percy is the pick. In short: Percy — Visual review platform (BrowserStack). Chromatic — Visual testing for Storybook.
When should I pick Percy over Chromatic?
Pick Percy when you test full pages from Cypress/Playwright/etc, not just components.
When should I pick Chromatic over Percy?
Pick Chromatic when you use Storybook and want story-level visual + interaction tests.
Can I migrate from one to the other?
Not a direct migration — they test different things. If you're killing Storybook, drop Chromatic and move your visual coverage into Percy against your real pages. If you're adopting Storybook, adding Chromatic is a few lines in CI (npx chromatic --project-token=...). Teams often run both: Chromatic for the design system, Percy for the app.
Do Percy and Chromatic both work with MCP-compatible AI agents?
Yes. Both have MCP servers installable via MCPizy (mcpizy install percy and mcpizy install chromatic). They work identically across Claude Code, Claude Desktop, Cursor, Windsurf, and any other MCP-compatible client. You can install both side by side and route queries in your agent's prompt.
More Testing & Browser comparisons
Playwright vs Puppeteer
Playwright (Microsoft) is the spiritual successor to Puppeteer — same core team, but cross-browser (Chromium, Firefox, WebKit), better auto-wait, built-in test runner, and first-class language bindings. Puppeteer remains solid for Chrome-only scraping/automation, but Playwright is the default for new projects.
Playwright vs Cypress
Cypress pioneered modern E2E DX (time-travel debugger, docs, VS Code-feel). Playwright caught up and surpassed on: cross-browser, multi-tab, iframe handling, parallelization, and API testing. Cypress still has the nicer 'first 30 minutes' experience; Playwright wins at scale.
Playwright vs Selenium
Selenium is the original cross-browser test framework — 20 years old, huge ecosystem, mandatory for legacy IE/old-Safari coverage. Playwright is modern, faster, has auto-wait, and doesn't need a separate driver. For new projects in 2026, Playwright wins on almost every axis except raw browser breadth.
Install both with MCPizy
Not sure? Run both side by side — swap between them in your AI agent with a single config line.