How to run your first Visual Test with Cypress

is NodeJS-based, open-source instrument. Cypress tests can be created either employ Javascript or Typescript. The Cypress work many lineament which are need for automating mod web coating. The lineament such as auto wait, support for single-page application (SPA), and easy debugging of examination make Cypress unique in the market.

Cypress automation tool is not limited to only, it also supports API Testing,, and Component Testing. The Cypress Dashboard is a proprietary instrument that help organizations to view the analytics of the tests. However, in most cases, the open-source version of Cypress is full plenty for testing.

The User Interface is the core of any web application. If the user interface is glitch-free and smooth, then there are eminent chances that the application catch the attention of the user. To make the user interface bug-free one demand to perform. Visual regression testing aid test the User interface in an easy and efficient way. Cypress supports Visual Regression Testing with third-party plugins.

This article explains an easy way to perform Visual Testing use Cypress. In Cypress, the Visual Regression testing can be done in multiple ways. Let us look at the leisurely and nigh popular way.

How to Perform Ocular Validation in Cypress Step by Step, Beginner Guide

There are many Visual Testing plugins available for Cypress however since it is a third party, many model are not up to date. For the purpose of this example let us useCypress picture diff plugin.

To get started with this, one take to assure that they have a.

Step 1: Install Cypress Visual Diff Plugin

npm i -D cypress-image-diff-js

Step 2: Configure Diff Plugin

1. There are considerable changes in the Cypress Version 10, this clause explains both versions. Follow the instructions considering the adaptation you get. Read
2. If you are not certain about the version you are utilise then use the commandnpx cypress -–versionknow the current edition.

Version 9 or below

Navigate to cypress/plugin/index.js and enter the commands indite below

// cypress/plugin/index.js module.exports = (on, config) = & gt; {const getCompareSnapshotsPlugin = require ('cypress-image-diff-js/dist/plugin ') getCompareSnapshotsPlugin (on, config)}

Version 10 and Above

Navigate to cypress.config.js file and add the below code.

const {defineConfig} = require ('cypress ') const setupNodeEvents = require ('cypress-image-diff-js/dist/plugin ') module.exports = defineConfig ({video: false, screenshotOnRunFailure: true, e2e: {setupNodeEvents,}})

Step 3: Import and add the Cypress image command

Version 9 or Below

Navigate to cypress/support/commands.js and enter the code indite below.

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

Version 10 or above

Navigate to support/e2e.js and the below code

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

Step 4: Write the Testcase

Let & # 8217; s write a simple trial case to perform the Visual Regression Test on the BrowserStack homepage.

• Navigate to Browserstack Home Page
• Perform Visual Validation Test

Create your inaugural visual examination, inside theintegration folder.

//first-visual-test.cy.js describe ('Cypress Visual Testing Demo ', () = & gt; {it ('Navigate to Browserstack habitation page ', () = & gt; {cy.visit ('https: //browserstack.com ') cy.compareSnapshot ('home-page ')})})

Step 5: Execute your Cypress Visual Test

Cypress provides two alternative to execute the tests. You can either use the Cypress window to accomplish the trial or use the command line.

Executing Test Using Cypress Test Runner Window

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

• Unfastened Cypress utilize the below bid

npx cypress open

• Click on first-visual-test.cy.js The tests start execution.

Using Cypress CLI

npx cypress run

The above bid straight executes your test and gives the result in command line/terminal

Step 6: View the Result

Once the test performance is complete you can see whether the termination passes or fail.

Please line that to see the literal result you need to execute the Cypress trial at least two times, this is because the Visual Test compares screenshots, the baseline screenshot is compared against the genuine screenshot. The maiden time when you run the test, the baseline screenshot is captured and the next run will compare them against the baseline screenshot.

If there is no difference in the screenshot, the test is marked as Passed.

If the base and the actual screenshot are different then there is an issue with the user interface so, the exam will be marked as a fail.

The cypress-visual-screenshotsdirectory create after the test run contains all the images namely, base, literal, and diff. The diff contains the difference in the images between the foot and genuine.

How to execute the first Cypress Visual Test on Percy

is a cloud-based visual regression screen platform, that let you to reexamine, consent, reject and formalize the ocular divergence. Percy endorse all major automation tools. Cypress visual tests can also be integrated with Percy.

Let & # 8217; s looking at the Percy and Cypress Visual Testing in detail

Step 1:Install postulate dependency packages for Percy and Cypress

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

Step 2: Configure Cypress Support

To integrate Cypress and Percy you need to put some shape code in the support brochure.

Cypress version 9 or below

Navigate to cypress/support/ index.js and add the below command.

import ' @ percy/cypress ';

Cypress Version 10 or above

Navigate to cypress/support/e2e.js and add the below command.

meaning ' @ percy/cypress ';

Step 3:Write a simple optical substantiation test

You can use the existing visual test, just modifying the few lines of code. Let & # 8217; s re-use what we have pen above.

describe ('Cypress Visual Testing Demo ', () = & gt; {it ('Navigate to Browserstack home page and compare images ', () = & gt; {cy.visit ('https: //browserstack.com ') cy.percySnapshot ('first-percy-test ');})})

In the above codification, in comparing with the previous script, you can see the only change is line cy.percySnapshot (& # 8216; first-percy-test & # 8217;);, This line takes a screenshot of the current screenshot on the browser and the Percy CLI uploads the screenshot.

Step 4: Set the PERCY_TOKENenvironment variable

To Execute Percy Tests with Cypress you require to set the environment variable.

1. To get the surround variable
2. Login to Percy
3. Navigate to Project Settings
4. Copy PERCY_TOKEN
5. Set the environment variable ground on the command line tools you are using.

# Unix $ exportation PERCY_TOKEN= '' & lt; your-project-token & gt; '' # Windows $ set PERCY_TOKEN= '' & lt; your-project-token & gt; '' # Powershell $ $ Env: PERCY_TOKEN= '' & lt; your-project-token & gt; ''

Step 5:Execute Percy Cypress Test

To execute the Percy Cypress test you need to run the command

npx percy exec -- cypress run

Note: Run the above bid two times at least to view the results, as explained earlier the visual validation works based on the comparison of two images, the first run enamor the groundwork screenshot and the subsequent run will compare the screenshot against the base image.

Step 6:View the Results

Wait until the execution of the test, once the test execution is complete, you will see the test results with the build URL. The chassis URL points to Percy ’ s flesh, clicking on the URL takes to the current execution build. The build dashboard clearly shows whether there are any differences or not.

Since Percy uploads the screenshots to Percy & # 8217; s infra, the captured images are uncommitted anytime and anywhere, this facilitate in peer reviews and takes any additional activity on issue that are found during visual tests.

If there are no changes in the image Percy shows the substance & # 8220; No changes & # 8221;

If there are any alteration in the screenshots then Percy demo side-by-side difference

Visual Testing is the virtually popular and recommend approach for User Interface Validation, still, visual fixation alone can & # 8217; t ratify off the examination, as Visual Regression doesn & # 8217; t guarantee the functionality of web applications. Optical try needs very less inscribe knowledge and construe visual testing event is an easy task. There is no doubt that visual fixation helps to catch any regressions at an early degree of development which in turn fastens the growing cycle.

Percy help teams automate visual testing by becharm screenshots, and comparing them with the base. With increased visual coverage, teams can deploy code modification with confidence with every commit.

Related Guides