Visual testing for Playwright
Check the UI of every page in your Playwright end-to-end tests. Every time your E2E tests run, Chromatic captures and compares those pages to catch visual bugs.
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.
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 in the same CI workflow as your E2E tests to catch regressions before merge.
“Chromatic helps us to prevent at least three critical UI bugs per week that would otherwise make our platform unusable.”
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.
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.
“Chromatic has been indispensable since the day we added it. It has really increased the confidence and speed with which we merge changes 💯”
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.
| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
| propertyName* | This is a short description summary |
defaultValue | Set string |
Debug locally and with your team
Visual Tests run in real browsers using industry-standard JavaScript APIs. Debug issues with your own browser devtools and share reproductions with teammates.
Frequently asked questions
How do visual tests fit into my testing strategy?
How fast are visual tests with Playwright?
What if my Playwright tests are flaky, will this be too?
How is this different than local visual tests?
Does this replace full-page components in Storybook?
“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.”