Visual Testing with Cypress

Fast, easy and reliable visual UI testing

Evolve Your Testing

Since you’re looking at Cypress, you probably want to improve your web application testing. New tools. New techniques. That means going beyond functional testing, and adding Visual UI Testing.

Why Visual Testing

merge icon

Simplify Your Validation Code

Writing line after line of code to check each visual attribute of each element is crazy. You can end up with as much validation code as front-end app code. Your visual validation code needs to be per-page — not per-attribute. That’s exactly how our Cypress SDK works.

responsive testing icon

No More Manual Testing of Responsive Web Apps

If your web application is responsive, that means that it looks different in different widths of the browser. Manually testing each and every browser relevant browser width is, in practice, impossible. You need to automate responsive visual testing.

puzzle icon

Refactor Your CSS and HTML — Worry-free

Changing your CSS and markup code today is a challenge. Any change in your CSS and HTML is a lesson in fear. You can never know what your code change affected, especially when running on multiple browsers and viewport sizes. Sure, you can manually test, but that takes time away from development. You need to automate.

Why Use Applitools with Cypress

Visual Testing as Fast as Cypress

If you’ve switched to Cypress, you know it’s fast.

Speed is crucial for visual tests, too, so you can check for regressions before every commit. But taking lots of screenshots, across many browser sizes, takes lots of time.

That’s why, for every page you test with Applitools, we upload its DOM and resources to Applitools Visual Grid. Then we use our grid of thousands of browsers to take screenshots on multiple browser sizes and verify them, in parallel. This makes your visual testing much faster.

security icon

Visual Testing as Reliable as Cypress

You probably know that Cypress tests run reliably. Reliability is essential for visual tests. When comparing screenshots from previous tests, slight differences due to different operating systems, browsers, or GPUs shouldn’t generate false positives. These waste your time and are all too common with traditional visual testing tools.

Applitools Eyes’ AI algorithms ignore minor differences when comparing screenshots, viewing them as a human would.

finger snap icon

Visual Testing as Easy as Cypress

Cypress’ value also comes from an interactive — dare we say fun — testing environment that makes building and debugging your tests a joy.

Applitools gives you an intuitive, thoughtful web UI to manage your visual test results. Manage baseline across source code branches. Compare screenshots. Bulk accept or reject visual bugs. Submit bugs in one click. All of which makes visual bug processing go fast and easy.

multiple windows icon

Cross-browser Visual Testing

As great as Cypress is, it only works with Google Chrome. Which means you can’t use Cypress to catch bugs occurring on other browsers.

Applitools offers cross-browser visual testing. Once we’ve uploaded your page DOM and resources to our Visual Grid, we render it on Firefox as well as Chrome. So you can find visual bugs that don’t occur on Chrome.

“Applitools Eyes integrates seamlessly with Cypress and has everything I need for cross-browser visual testing coverage by circumventing the Google Chrome-only restriction built into Cypress.”
Omri Aharon
Omri Aharon Autodesk
Frontend team leader

How Applitools works with Cypress

Your Cypress test scripts call the Applitools API, as detailed in this tutorial. Our Cypress SDK then extracts a DOM Snapshot that we send to Applitools Visual Grid. Our visual grid renders the page across multiple browsers with different viewport sizes, in parallel. Each page rendering screenshot is sent to our AI comparison engine to find significant differences that indicate a visual bug.

Cypress flow chart

Works with your toolchain

Applitools integrates with every popular continuous integration tool. (And some unpopular ones too.) Plus GitHub, Visual Studio, Jira. So you can:

Include visual UI testing in your continuous integration builds.

Submit visual bugs into Jira with one button click.

Ensure your visual baselines are validated on each GitHub pull request for your code.

Map changes in visual appearance to underlying code changes with UI Version Control.

Get Started

Bring visual testing to Cypress. Get a free Applitools account, then follow our Cypress tutorial.