Visual testing for Cypress
Check the UI of every page in your Cypress 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
Cypress end-to-end tests ensure user flows work, but they're made for functionality not appearance. Chromatic complements Cypress tests by detecting visual bugs in web pages.
Key Features
- 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 Cypress 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.”
Orr Gottlieb, Engineering Manager
How it works
Cypress 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.
“I really believe Chromatic was the last missing block to really perform visual regression testing. In an era where front-end development tools got more and more visual, testing interfaces had to inherently become visual: this is Chromatic.”
Loic Chollier, Sr. Director of Engineering
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 |
Frequently asked questions
How do visual tests fit into my testing strategy? How fast are visual tests with Cypress? What if my Cypress 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.”
Tim Hingston, Principal Engineer