ContactSign inSign up
Contact
Storybook Playwright Cypress

Visual testing for Playwright

Ensure the UI quality of every page in your Playwright end-to-end tests. Every time your E2E tests run, Chromatic automatically checks for changes in those pages to find visual bugs.

Go to documentation
Homepage
Restaurant
Single dish
Add to cart
vscode logo
toyota logo
netlify-lightmode logo
github logo
mozilla logo
bbc logo
vscode logo
toyota logo
netlify-lightmode logo
github logo
mozilla logo
bbc logo
vscode logo
toyota logo
netlify-lightmode logo
github logo
mozilla logo
bbc logo
vscode logo
toyota logo
netlify-lightmode logo
github logo
mozilla logo
bbc logo
vscode logo
toyota logo
netlify-lightmode logo
github logo
mozilla logo
bbc logo

Test how user flows look and function

Playwright end-to-end tests ensure user flows work, but they're made for functionality not appearance. Chromatic complements Playwright tests by detecting visual bugs in web pages.

With just one click, you can launch Storybook in your browser to debug a failing interaction test.
Test in a real browser
Chromatic takes pixel-perfect snapshots of the code, styling, and assets so your tests reflect what users experience.
Cross browser coverage
Expand test coverage to Chrome, Firefox, Safari, and Edge in one click. All browsers run in parallel to keep your test suite fast.
Responsive viewport testing
Specify viewport widths in the same place as your Playwright E2E tests. Configure viewports for each test or all tests.
Set thresholds for changes
Customize the sensitivity of Chromatic’s diffing algorithm to control when a visual change gets flagged for review.
Create multiple snapshots per test
Chromatic snapshots the end state of tests and allows you to take snapshots on-demand during the test run.
Integrates with CI
Run visual tests on every commit automatically to ship with 100% confidence.
“Chromatic helps us to prevent at least three critical UI bugs per week that would otherwise make our platform unusable.”
Orr Gottlieb
Orr Gottlieb
Engineering manager
monday.com

How it works

Playwright drives the browser to specific pages and states in your app. For each state, Chromatic automatically captures the UI, complete with DOM, styling, and assets then takes a snapshot of it. Whenever tests run, new snapshots are captured and compared to baseline snapshots to find visual changes.

Powered by your E2E tests

End-to-end tests check key user flows like “sign up” and “buy now.” Chromatic piggybacks on the config, mocking, and settings you’ve already written in E2E tests to give you confidence that the UI looks correct. The best part is that it just works with your existing tooling—no custom setup necessary.

Playwright E2E Tests to Visual Tests
Example end-to-end test code in an editorThe Chromatic Library screen showing snapshots of several pages.

Save a full page archive not just the static image. Chromatic records the exact state of the UI by saving the DOM, styling, and assets as an archive to guarantee consistent visual test snapshots. You can open the archive in your own browser to debug tests or link reproductions to teammates.

Other tools only save an image of the UI. We believe this a worse developer experience because it slows down debugging. An image isn’t inspectable with devtools so you have to spin up a heavyweight E2E framework or scrub through video files to hunt for visual bugs.

“Chromatic has been indispensable since the day we added it. It has really increased the confidence and speed with which we merge changes 💯”
Siddharth Kshetrapal
Siddharth Kshetrapal
Design systems engineer
GitHub

Spot the difference between pages

Detect visual changes in pages down to the tiniest detail. Verify UI changes to color, position, scale, and layout to catch accidental bugs.

BaselineBuild 9 on master
NewBuild 10 on feature-branch
Accuracy to the pixel
Even the tiniest tweak can set off major bugs. Our eagle-eyed algorithm catches the subtlest UI changes.
Multiple perspectives to view changes
See changes quickly using different views: 1up, 2up, Diff, and more. Each view emphasizes changes in a unique way.
Selectively ignore elements
Ignore specific UI elements from your tests, focusing only on the changes you care about.
“Visual diffs make changes apparent and unmistakable... Chromatic has been extremely useful and confidence-inspiring.”
Lauren Eastridge
Lauren Eastridge
Director of open source
Formidable

Merge faster with an intuitive dashboard

Approve changes in a glance using Chromatic’s web-based merge manager. Get timely test notifications in your Git and CI tool.

E2E Test dashboard
Every decision in one place
Post comments and change requests right beside your live components, so that everyone can follow decision-making.
Assign reviewers
Request review from design, product, and engineering in a shared workspace online.
Connects to your workflows
Keep everyone in the loop with Slack, Figma, and custom webhooks.

Debug locally and with your team

Visual Tests run in real browsers using industry-standard JavaScript APIs. Conveniently debug issues with your own browser devtools and share reproductions with teammates.

With just one click, you can launch Storybook in your browser to debug a failing interaction test.
Fully-inspectable UI
Reproductions are easier than ever with fully-inspectable DOM, styling, and assets uploaded with each test.
Verify tests with your team
Verify changes with design, product, and engineering using the testing dashboard.
Share links to debug
Send teammates a link to a specific instance of a component to ensure they’re referencing the exact same test you are.
Never fix the same bug twice.
Get started for freeBook a demo

Frequently asked questions

“Chromatic has supercharged our PR reviews, making it easy to see visual changes at a glance. We have also come to rely on it to catch unintended style changes and regression bugs in our components.”
Tim Hingston
Tim Hingston
Principal engineer
Apollo
Company
AboutCareersTerms of ServicePrivacySecurity • SOC 2StatusContact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.