Visual testing using Cypress

As we all know user interface is the core of any web application. If the user interface is glitch free and smooth, then there are high chances that the application catches the attention of the user. To make it bug free one needs to perform Visual regression testing. Cypress supports Visual regression testing with many third party plugins. In this article we will cover visual testing with cypress using PERCY plugin as it makes the integration more smoother and easier.

Lets get started:

For the basic cypress installation you can refer https://medium.com/@puneetvashisth/cucumber-integration-with-cypress-9465db0fde83 article.

Now create account for free on https://percy.io/ to use percy token.

Next thing is to install percy using command-

npm install --save-dev @percy/cli @percy/cypress

Add to your cypress/support/e2e.js file-

import '@percy/cypress'

To use snapshots, we use -

cy.percySnapshot();
cy.percySnapshot(snapshotName);
cy.percySnapshot(snapshotName, options);

Now lets add this in our test case-

describe('visual testing', function() {
  it('Validate homepage', function() {
    cy.visit(<URL under test>);

    // Take a snapshot for visual diffing
    cy.percySnapshot();
  });
});

NOTE- We can pass name and options in the above method as cy.percySnapshot([name][, options]).

name- The snapshot name; must be unique to each snapshot; defaults to the test title. Best option is to use cy.state(‘runable’).fullTitle() as name.

options- We can pass the specification/dimensions if required.

Now to run the percy, we need to provide token which we get on percy website like-

After setting token, we need to run below command. We can keep this in package.json to use it further.

percy exec --cypress run

Once the test run completed we can see the build on percy like-

When we open the build we can see the screenshots/images which we can use it further to validate the pixel perfect UI.

We can use this if any new changes are being done on any component/page w.r.t older version.

Hope you enjoyed this article and please share any feedback which requires improvement in the article. I would be very happy to hear the improvements.