Visual Testing in Cypress 10

This article is about how to do Visual Testing in Cypress 10 using cypress-image-diff plugin. This is one among from huge list.

Typically such plugins take an image snapshot of the entire application under test or a specific element, and then compare the image to a previously approved baseline image. If the images are the same (within a set pixel tolerance), it is determined that the web application looks the same to the user. If there are differences, then there has been some change to the DOM layout, fonts, colors or other visual properties that needs to be investigated.

What is Visual Testing?

Automated process of detecting and reviewing visual UI changes.

• To gain full confidence in every visual change at every step.
• To protect against visual regressions and bugs across browsers and responsive widths.
• Any changes in color, width, border, etc of any web element could be identified.
• To identify UI changes both in Web applications as well as in Mobile applications.

Benefits of Visual testing

• Catch visual regressions before they reach users.
• Write smaller, more effective tests
• Delete/refactor CSS, layouts and designs without fear
• Test visualization easily
• Helps continuous deployment

Challenges faced before

• Hard to test complex app states — comparing each state of an application may not be possible. But this is not the case with cypress.
• Performance — If we need to do each state of an application then test script performance will be a question.
• Consistent and deterministic rendering.
• Day-to-day review process & approval workflow.

Visual Test Run :

During every run, it renders and compares snapshots across browsers and screens, highlighting relevant visual diffs.

Test Review :

Review and approve visual changes to ensure your UI is always production-ready and keep your team on the same page.

Project setup

Step 1: Create a folder inside workspace. Goto folder -> npm init

Enter the details, this would create package.json file

Step 2 : Install cypress and dependencies.

npm install cypress

This will install the latest version(10.4.0) of cypress.

To perform visualization testing we need, cypress-image-diff-js library.

JavaScript End to End Testing Framework | cypress.io testing tools (npmjs.com)

npm i cypress-image-diff-js

These will update package.json as

“dependencies”: {
“cypress”: “¹⁰.4.0”,
“cypress-image-diff-js”: “¹.21.0”
}

Step 3: Provide configuration in cypress.config.js as below,

const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin')
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
getCompareSnapshotsPlugin(on, config)
},

Here, we have included the plugin details.

Step 4 : To import and add the cypress image command, enter the below code into cypress/support/commands.js file,

// cypress/support/commands.js
const compareSnapshotCommand = require('cypress-image-diff-js/dist/command')
compareSnapshotCommand()

Step 5 : And write below code into cypress/support/e2e.index to generate reports,

require('./commands')
after(() => {
cy.task('generateReport')
})

Step 6: First cypress visual test,

describe('To interact with button', () => {
it.only('should load bookscrap website', () => {
cy.visit('http://books.toscrape.com/index.html')
cy.url().should('include','index.html')
cy.compareSnapshot('home-page')
})

Note : Threshold values, which give you the flexibility to compare images with small differences or ignore small differences.

cy.compareSnapshot('home-page', 0.1)

The above code, navigates to the BookStore Home page and compares if it is visually fine.

Note: When you first time run this script, it takes the base image and subsequent runs are compared with that base image.

Step 7: To run this code,

npx cypress run — spec “cypress/e2e/samples/btnclick.cy.js”

Note: First Time when you run the test, it will be passed automatically as both base, and comparison images are fresh, and you might not see any difference.

Step 8: To view the reports ,

One of the key features of this plugin is that it generates the good HTML report. Once you run the test, two folders will be created i.e.:

• cypress-visual-report: It contains, an HTML report, if the test passes there will not be any images shown if the test fails it will show baseline, comparison, and difference in that image.
• cypress-visual-screenshots: This folder contains three subfolders namely baseline, comparison, and diff, where each folder contains the respective image files.

To simulate the UI difference, let we modify screen resolution using cy.viewport(),

describe('To interact with button', () => {
it.only('should load bookscrap website', () => {
//Default size is maximum
cy.viewport(1080, 720);
cy.visit('http://books.toscrape.com/index.html')
cy.url().should('include','index.html')
cy.compareSnapshot('home-page')
})

Now the test will fail and generate the new screenshot and also the diff.

Final report generated under /cypress-visual-report is,

To compare a single element,

it.only('should click Classics Category',() => {
cy.get('a').contains('Classics').click()
cy.get('h1').compareSnapshot('H1Element', 0.1)
// cy.get('h1').contains('Classics')
})

To update baseline image :

If there are wanted changes to the application in test and if we need to update baseline image, you have to manually copy the comparison image into the baseline folder, replacing the image.

Reference :

Visual Testing | Cypress Documentation

cypress-image-diff-js — npm (npmjs.com)

Conclusion :

There are many plugins available for visual testing and many are not compatible with Cypress 10. This plugin works well in headless mode also it generates .html report.