How to Improve Cypress Test Coverage with Visual Testing

Getting Started — March 17, 2021

Cypress is a powerful tool for automating tests inside of a browser, but can be limited by only running code-based tests. How can we take advantage of Cypress and add the power of automated Visual Testing with Applitools Eyes?

Just looking for an example? Check out the Applitools Cypress Tutorial on GitHub.com.

What is Cypress?

Cypress is an end-to-end testing framework built on JavaScript that allows QA engineers, developers, or really anyone familiar with working in JavaScript, the ability to write tests that interact directly with browsers.

Tools like Jest might make sense to test the input and output of a function, but you can use Cypress to interact with a button inside of the browser that invokes that function. Taking that a step further, you can automate an entire customer journey using Cypress each step of the way.

How does Cypress work with Applitools?

Cypress is really good at running tests in the browser, but in order to get effective coverage of that customer journey, you need to write a lot of code with specific selectors that can end up requiring constant maintenance.

That’s where Applitools steps in, adding an additional layer of Visual Testing on top of your tests, combining the interaction automation of Cypress with the AI-powered Applitools Eyes.

When using Applitools Eyes with Cypress, Cypress will still be used to open up the browser, interact with the site, and even visit pages. But, instead of writing lots of assertions for each UI component, Applitools will capture a snapshot of that entire page and upload it to the cloud where it performs its change detection algorithms on your app.

What are we going to build?

We’re going to start off with an existing project that already has Cypress installed.

For more information about installing Cypress, visit the Cypress docs at: https://docs.cypress.io/guides/getting-started/installing-cypress.html#Installing

With our project ready to go, we’ll first install the Applitools Eyes Cypress SDK using npm.

Once installed, we’ll write a new test that covers a basic example of how you can use Applitools Eyes to add Visual Testing coverage to your app.

Step 1: Installing the Applitools Eyes Cypress SDK

To get started with the Applitools Eyes Cypress SDK on a project, first install the SDK from npm:

npm install @applitools/eyes-cypress --save-dev

This will pull down the SDK from npm and add it as a package to your project.

Step 2: Setting up the Applitools Eyes Cypress SDK with Cypress

Once installed, the Applitools Eyes Cypress SDK makes configuration easy by making a setup command available.

To configure Applitools Eyes for Cypress, run:

npx eyes-setup
An image of the CLI successfully running npx eyes-setup
Running the Eyes setup command

This will do a few things:

  • Configure the Applitools Eyes Cypress SDK as a plugin
  • Add new Cypress commands to help interact with Applitools Eyes
  • Import Typescript definitions to optionally use in the project

But once finished, we’re all set up and ready to write our first Applitools Eyes test!

Step 3: Writing a new test with Cypress

To get a good sense of how Applitools works, we’re going to use a demo app with an alternate version that includes a breaking change.

We can create a new Cypress test by adding the following code:

Embedding: https://gist.github.com/dannyshain/c05e652a423597b4e533f00a0beb4e36.js

Here’s a breakdown of what’s happening:

  • We’re defining a new Cypress test
  • Before each test, we’re going to visit our demo app
  • In our test, we click the login button to log into the app
  • We check that 2 of the on-page headers exist to confirm what page we’re on
This shows a successfully run Cypress test
Successfully running a Cypress test

And this works great! We’re confident that the process of logging in is working well.

There are two potential problems with this though.

First, we don’t have any existing IDs on the page that allow us to select the specific headers on the page. If that changes the order, it breaks. To alleviate that, we could apply IDs in the code, but even in that case, if someone makes a small change to the text, it breaks.

Additionally, we’re testing specific text nodes on the page that we have access to with code, what happens if an image breaks or if a color changes that makes the app unusable accidentally?

We can test this out by switching the URL we’re visiting in our Cypress test to:

beforeEach(() => cy.visit('https://demo.applitools.com/index_v2.html'));

After the test runs, we can see that it was successful, but if we notice on the login page, we have a broken image!

A test result showing a successful test using Cypress, even when the page has a broken image.
False positive testing with Cypress

This is where Applitools shines, where we would still be able to detect this issue with Visual Testing.

Step 4: Adding Visual Testing to Cypress with Applitools Eyes

Because we have Applitools Eyes already installed, setting up our test is straightforward.

Let’s update our test to use Applitools Eyes instead of checking specific selectors on the page:

Embedding: https://gist.github.com/dannyshain/fb4056c5974d58d03e8c69ce5e92dc6c.js

Note: remember to switch back to the original demo for the first run!

In our test, we’re now:

  • Opening Applitools Eyes at the start of the test
  • Using Check Window to take a snapshot of our Login page
  • Logging into our application
  • Taking another snapshot with Check Window of our dashboard
  • And closing Eyes
An image showing the first check with Applitools Eyes, which sets the baseline images for our test.
Running the first check with Applitools Eyes

Like our first Cypress test, everything looks successful. We were able to log into the app and take a snapshot of both pages.

We can even see these snapshots by logging into our Applitools account.

The baseline images for the Login Window and App Window in Applitools
Baseline tests in Applitools

Now, let’s try changing our demo URL again:

beforeEach(() => cy.visit('https://demo.applitools.com/index_v2.html'));

This time, we can see that Cypress actually fails.

The Cypress test now fails due to the detection of visual diffs
Failing Cypress test due to visual diffs detected

Cypress lets us know that it’s because diffs were detected on the Login screen, so let’s take a look in Applitools.

Applitools Eyes is displaying the differences between the baseline and checkpoint image, highlighting the differences
Changes detected with Applitools Eyes

We can see that Applitools found that we have a broken image on our page, so it flagged it as an issue, something our previous Cypress-only test wouldn’t have caught!

While we were able to take advantage of Cypress to run our tests inside of a browser, we were able to effectively use Applitools Eyes to provide automated Visual Testing for our app.

Get Started Today

Want to try out Applitools Eyes for yourself? You can get started today with a free-forever account at the link below.

Are you ready?

Get started Schedule a demo