How to perform Visual Regression Testing using Cypress

Optical fixation screen in Cypress compares snapshots of web pages to help identify unintended UI changes.

Learn all about ocular regression try in Cypress, how to perform it and the tools that make the process easier.

What is Regression Testing?

Regression Testing is the eccentric of package testing operation conducted to ensure that the recent codification alteration get not negatively affected the survive features or introduced new issues.

All or part of impacted features is tested as piece of the fixation testing process. Any issue which come into existence due to the latest code changes should be get in this eccentric of testing.

Role of Automation in Regression Testing

Unlike Sanity and Smoke, the orbit of regression testing is vast, since the QA has to test the full application or subset of features in fixation testing. Considering that for Regression affect a lot of time and sweat, also it is not cost-effective. This is the reason, why most organizations are opting for. oftentimes works in Risk-based approach, opting for test mechanisation frameworks for a streamlined test process.

Types of Regression Testing

Regression Testing can be relegate into Functional Regression Testing and Visual Regression Testing. Fundamentally both work differently as explained below.

Functional Regression Testing

Function Regression Testing is the character of screen where workflow or use-cases will be tested using manual or automation tools. It involves recruit some value by fetch selectors from browser DOM. This also include validating text-based values by getting them either programmatically or manually. Most of the modern examination in practice is free-base on this approach.

Visual Regression Testing

A tab what the user will see after any code changes have been executed. This is make by compare screenshots taken ahead and after the code changes. This is why visual regression tests are besides sometimes phone visual snapshot test. highlights any optic changes that occur after the code update.

Optical tryout generate, analyze, and compare browser snapshots to find if any pixel have changed. These pixel differences are called ocular diffs (sometimes called perceptual diffs, pdiffs, CSS diffs, UI diffs). You can set the doorway values, which give you the flexibility to equate images with small differences or ignore small differences.

Visual Regression Testing using Cypress

is a democratic test automation framework, it grant a lot of extensibility. Visual Regression Testing is one of the Extensile features of Cypress. There are a lot of plugins available in Cypress that can be used to entrance optical ikon and compare them. This tutorial, explains Cypress Visual Testing usingCypress Image Diff plugin.

Step by Step Tutorial of Cypress Visual Regression

To set up Cypress Visual Regression environment, you need to instal the pre-requisites listed below.

• Install NodeJS
• Install Visual Studio Code
• Install Cypress

Step 1: Install the cypress picture diff npm bundle

Navigate your project Root folder (the directory where package.json is located). Enter the below command

npm i -D cypress-image-diff-js

Step 2: Configure Image Diff Plugin

Navigate to cypress/plugin/index.js and inscribe the commands written below

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

Step 3: Import and add the Cypress image dictation

Navigate tocypress/support/commands.jsand enter the codification written below

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

Step 4: Configure Reporter

Navigate tocypress/support/index.jsand enter the codification written below

after (() = & gt; {cy.task ('generateReport ')})

Step 5: Write your maiden Cypress Visual Test

Navigate tocypress/integrationfolder add new filemodel visual-test.js. Enter the code snippet written below

// visual-test.js describe ('Cypress Visual Testing ', () = & gt; {it ('Compare fullpage of Google page ', () = & gt; {cy.visit (`` https: //www.google.com/? hl=hi ''); cy.compareSnapshot ('google-page ');})})

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

Step 6: Run your first Optical Regression Test with Cypress

Run your Cypress Visual Test using the below bidding.

npx cypress run -- spec `` cypress/integration/visual-test.js ''

Step 7: View Report

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

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 control, an HTML report, if the tryout passes there will not be any images shown if the test fails it will evidence baseline, comparing, and difference in that image.
• cypress-visual-screenshots:This folder moderate three subfolders viz.baseline, comparison, and diff, where each folder contains the respective icon files.

Passed Test Report looks like below:

Failed Test Report Looks like the below:

How to perform Cypress Visual Testing of an element

Cypress can be habituate to execute optic test on a specific element, where it liken the before and after screenshots of the specified elements as understand in the example below.

describe ('Visuals ', () = & gt; {it ('should compare screenshot from a give element ', () = & gt; {cy.visit ('www.google.com ') cy.get (' # report-header ') .compareSnapshot ('search-bar-element ')})})

This codification snippet take a snapshot of element# report-headerand compares visually if it is same or not.

Adding Threshold to Visual Test

By nonpayment, the value of the threshold will be zero, which means it should match incisively with the base image. However, you can make it flexible by applying other threshold values.

Check out former utilitarian mapping ofcypress-image-diff plugin

Executing Cypress Visual Comparison Test using BrowserStack Automate

To run Cypress Visual Comparison Tests on Real Device Cloud like BrowserStack postdate the steps mentioned below.

Step 1: Install

Step 2: Create browserstack.jsonfile usingbrowserstack-cypress init command

Step 3:Enter the below codification

{'' auth '': {'' username '': `` & lt; my_username & gt; '', '' access_key '': `` & lt; my_access_key & gt; ''}, '' browser '': [{'' browser '': `` chrome '', '' os '': `` Windows 10 '', '' version '': ['' latest '', '' latest - 1 '']}], '' run_settings '': {'' cypress_config_file '': `` ./cypress.json '', '' cypress_version '': `` 9 '', '' project_name '': `` My sandbox project '', '' build_name '': `` Build no. 1 '', '' parallels '': `` 2 '', '' npm_dependencies '': {'' cypress-image-diff-js '': `` ^1.18.0 ''}}}

Note:

• You can find the username and admission key by logging into the browserstack website
• You can also vary the browser settings and platform scope from browserstack.json file

Step 4: Configure cypress.jsonfile to include the.js files.

{'' testFiles '': [`` * .js '']}

Step 5:Execute your Browserstack Test

Use the below command to execute Cypress Visual Test in Browserstack

browserstack-cypress run –sync

Executing Cypress Visual Regression Test with Percy

is a ocular testing tool that helps in visual testing of an application. Since Percy is now a part of BrowserStack, you can access Percy Dashboard with BrowserStack credentials. You can use Percy with Cypress to perform a visual test by follow the stairs written below:

Step 1:Install Percy using the undermentioned command

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

Step 2:To import Percy to Cypress, navigate tocypress/support/index.jsFile and enter the following command

import ' @ percy/cypress '

Step 3:Write your 1st Percy Visual Test Script as shown below

describe ('Cypress Visual Testing ', () = & gt; {it ('Compare fullpage of Google page ', () = & gt; {cy.visit (`` https: //www.google.com/? hl=hi ''); cy.percySnapshot ('Google ');})})

This example does a optic comparison of the Google.com Page using Percy and Cypress

Run your Percy Test

Go to http: //percy.iomake a sample project. Once you create a Sample Project Percy will generate API key. Copy the Percy Token from there.

Talk to an Expert

Enter the Percy Token using the following command for MacOS

export PERCY_TOKEN= & lt; your_token & gt; For Windows OS, recruit the Percy Token using the command written below

set PERCY_TOKEN= & lt; your_token & gt;

For powershell use below command to enter Percy Token

$ env: PERCY_TOKEN == & lt; your_token & gt;

Once the Percy Token is entered use below command to run your Percy Cypress Tests

npx percy exec -- cypress run

Cypress Visual Tests Starts Running and it give you postdate result in command line

Why perform Cypress Visual Testing on BrowserStack Percy?

is an AI-powered platform that automatise for web covering. It helps teams hold consistent and precise user interface by capturing and comparing UI snapshots on every code modification.
Integrated into, Percy speedily identifies layout transformation, styling problems, and unintended content updates expend advanced AI. This reduces followup effort, lowers false positives, and supports faster and more reliable releases.

:

• Effortless Visual Regression Testing:Works smoothly with CI/CD pipelines using a elementary integration step. Supports functional exam entourage, Storybook, and Figma to enable early visual examination across the maturation workflow.
• Automated Ocular Regression:Takes snapshot on every commit, compares them with baselines, and detects visual issues such as broken layout, color mismatches, or UI component errors.
• :Uses advanced algorithms and AI Agents to filter out optic noise caused by animations, dynamic banners, anti-aliasing, and precarious page element. It tag only meaningful visual change that affect user experience. Features like Intelli ignore and OCR assist distinguish important UI changes from minor pel shifts and significantly reduce false positive.

• :Highlights detected change with open bounding boxes, render human-readable summaries, and hie up review cycles by up to three times.
• No-Code Optic Monitoring:Optic Scanner make it leisurely to scan and monitor chiliad of URLs across more than 3500 browsers and device. Supports on-demand scan, schedule runs, dynamic part ignoring, and surroundings comparisons such as staging versus production.
• Elastic and Comprehensive Monitoring:Enables scheduled scan at any frequency, maintains historical solution, and support comparisons across any environment. Works with documented page, local testing, and helps teams detect topic before they reach users.
• Broad Integrations:Compatible with all major frameworks, CI tools, and common development workflows. Offers SDKs for simple onboarding and scalable visual examination across teams.

is the AI-powered visual test solution for aboriginal iOS and Android apps. It runs tests on real devices to ensure ordered UI across different blind sizing and operating systems. AI-driven treatment of dynamic content reduces flakiness and avoids unnecessary false positives.

With an integration that requires exclusively one line of code, App Percy back framework such as Appium, WebdriverIO, Java, and Python. Parallel execution speeds up build time, and a unified dashboard provides screenshots, logarithm, video, and compliance with essential data privacy standards.

Pricing Details of Percy:

• Free Plan:Includes up to 5,000 screenshots per month and is suitable for smaller teams or initial evaluations.
• Paid Plan:Starts at 199 USD and includes advanced features, with enterprise pricing available for larger teams.

Best Practices for Visual Regression Testing in Cypress

While running ocular fixation tests apply Cypress, you can follow the given better practices to run efficient and exact examination:

• Leverage a reliable visual examination library: Cypress does not come with in-built visual examination capability, so it is best to utilize third-party libraries like cypress-image-snapshot and percy-cypress as per your project needs.
• Baseline images should be set up properly: Once the stable state of UI is confirmed, you can beguile baseline snapshots. Store the baseline images in version control to guarantee consistency.
• Avoid flaky visual tests: In order to reduce you can wait for UI elements to fully load by usingcy.wait() or cy.intercept ()where necessary. Also, ensure surround eubstance when it comes to browser, viewport sizing, resolution etc.
• Test stable constituent alone: You should obviate prove highly dynamic elements like timestamps, carrousel, or live data feeds. Exclude untable regions in snapshots if necessary.
• Execute tests in controlled environment: Obtain consistent results across different runs by use Docker or a CI/CD grapevine. For better accuracy, you can run tests in headless modality.
• Manage Tolerance level: It is crucial to set little tolerance levels to get major UI changes while allowing minor pixel departure.

Conclusion

Visual regression screen in Cypress assist identify and debug unexpected visual changes and thus ensures UI consistency. Combining Cypress optic regression try with tools like Percy farther simplifies this summons by offering automated visual comparing, baseline management and smooth CI/CD integration and alleviate effective tests and accurate results.

Useful Resources for Visual Testing

Frequently Asked Questions

1. Does Cypress have built-in visual regression testing?

Cypress does not proffer native visual regression testing. It can occupy screenshots, but it can not compare images or generate optical diffs. If you are looking to run visual regression tests, you need a plugin or a dedicated optic testing service.

2. What are the benefits of using a cloud-based ocular testing program with Cypress?

Cloud platforms provide stable, scalable environments for visual testing. They support multiple browsers and device, handle baseline direction, use supercharge comparison logic, and offer collaborative dashboards. They also integrate with CI/CD so teams can monitor UI quality endlessly.

3. What are mutual challenge in Cypress visual regression essay?

Dynamic content, animations, and charge postponement often create inconsistent screenshots. Managing baselines can be time-consuming, and distinguishing real issues from noise is difficult without the rightfield tooling. Large suites can slow down test execution due to high screenshot book.

4. How can I make my Cypress visual fixation tests more robust?

Wait for the UI to stabilize before capturing screenshots, examination specific components when potential, and use comparison limen to cut mistaken positives. Regularly update baselines and ignore unstable regions to keep results reliable as the UI evolves.

5. Why should I use an AI-powered visual testing tool like Percy with Cypress?

Percy focuses on meaningful UI changes by filtering out noise from animations and dynamic elements. It integrates quick with Cypress, automates baseline handling, highlights diffs intelligibly, and scales across browsers and devices. This helps teams catch visual subject earlier and release them with confidence.

Related Guides