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.
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.
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.
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.
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.
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.
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.
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.
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.