Visual testing with Cypress

Shumnan Sun

Follow

Published in

Cypress.io Thailand

4 min readDec 17, 2021

--

Eliminate painful manual pixel-perfect visual verification testing forever

Visual regression testing is a type of testing to validate the layout and appearance by comparing 2 captured screenshots. This ensures the important content appears properly and found out where and how does it the different.

Before starting, I recommend checking out the visual testing best practices to avoid over-engineering your test script. Because if you validate the few elements not the displayed element visually, it’s better to assert the element with Cypress built-in assertion instead.

This article is based on Test with Cypress, Cucumber, and TypeScript. So it uses TypeScript and Cucumber within Cucumber by default.

1) Pre-requisite

Clone repository from railsfriend:cy_visual_test_initial

Ensure all Rails and Node.js dependencies installed

npm install
bundle install

Ensure NodeJS is installed and initialized in the project

node -v
npm init

Start Rails project to ensure it’s setup correctly

rails s

2) Install Cypress Visual testing and configure

Execute command to install and add to package.json

npm install cypress-visual-regression --save-dev

From this step, if you have additional plugins, ensure previous configurations are not overwritten

Add plugin configuration to the JavaScript index file

cypress/plugins/index.js

Add plugin additional configuration to TypeScript Definition File

cypress/plugins/index.d.ts

Add the last plugin configure

cypress/support/commands.js

Add Cypress Configuration Parameters

screenshotsFolder - Set directory for store actual screenshot result
trashAssetsBeforeRuns - Set to true to always clear file in screenshotsFolder before executing scripts
video - Set to false to disable video recording while executing scripts

cypress.json

4) Implement visual testing scenario

Implement additional test scenarios into feature file

cypress/integration/Login.feature

Implement additional test scenarios into the step definition file

cypress/integration/Login/Login.ts

More configuration detail can be found in cypress-visual-regression readme

5) Prepare base image

Execute test to save base image for comparison.
The Screenshots would be saved into cypress/snapshots/base

cypress run --env type=base

Generated screenshots after test execution completed

Note: Actual images are always created. This step included.

5) Modify page appearance

Modify file to change the displayed text

app/views/home/index.html.erb

This will make actual screenshots different from the base image except for the navigation bar.

6) Compare images

Execute test with as an environment variable to save the actual image and compare.

cypress run --env type=actual

diff images are created when comparing failed on a set threshold

landing_page-diff.png show **different texts**

nav_bar-diff.png show no different

Summary

Visual testing is important when you need consistent GUI. This can be archived by integrating cypress-visual-testing into your test scripts. The unique capability of this cypress plugin is able to compare both page and pages components (via chaining with Cypress get or find command).

These decrease manual visual verification significantly with little effort for configuration.

Goodbye painful pixel-perfect visual verification

Another 3rd party tool

If you need comparing management, it’s required additional tools from a 3rd party, one of them is Percy. The guide is published in official Percy documentation and ready for implementation
(This need different command and implementation)

Percy was acquired by Browserstack last year and allowed to