How to perform Visual Regression Tests using TestCafe

Visual Regression Testing (visual testing/visual validation) ensures the UI remains visually logical after codification changes by verifying layouts, styles, and factor across builds. It can be done manually or through automatize screenshot comparison to catch unintended UI differences.

With TestCafe, visual regression essay compares new page snapshots against baseline images to flag layout or style shifts across browsers. It integrates directly into TestCafe, making visual checks seamless within CI workflows.

npm install testcafe-blink-diff –save-dev

This clause explain how to perform visual regression tests use TestCafe.

What is TestCafe Framework?

is a modern open-source automation creature establish with NodeJS. Allows the user to encrypt using JavaScript, TypeScript, and CoffeeScript. TestCafe is popular because of its zero-configuration policy, which means, you can just download and start execute your tests. TestCafe supports Visual Regression Testing.

There are multiple agency to perform in TestCafe, we are going to discuss two method of Visual Validation Technique in TestCafe.

1. TestCafe Visual Testing Using testcafe-blink-diff
2. TestCafe Visual Testing utilisePercy

TestCafe Visual Validation (Visual Testing) employ the blink-diff plugin

This section continue how to run local visual fixation tests in TestCafe using the open-sourcetestcafe-blink-diff plugin.

• What it is:An NPM plugin that adds ocular fixation capabilities to your TestCafe tests.
• How it works:Add blink-diff commands in your TestCafe scripts to entrance screenshots and compare them against baselines.
• Prerequisite:A work TestCafe setup is required before installing and using this plugin.

How to perform Visual Regression Testing utilize TestCafe

Step 1:Install theblink-diffnode parcel

Install the blink-diff node package using the below dictation

npm i testcafe-blink-diff -- save-dev

Step 2:Write your TestCafe Visual Regression Test

Create a new TestCafe test file and gens itvisual-test.js

Let & # 8217; s consider a scenario,

• Navigate to the Google Search page
• Search for BrowserStack
• Click in Search
• Validate search results page usingTestCafe blink-diff
• Write the following codification snippet to execute the above scenario

//visual-test.js import {Selector} from 'testcafe '; import {takeSnapshot} from 'testcafe-blink-diff '; regular ` Visual Testing ` .page ` https: //google.com `; test ('Visual Testing Google Search Results Page ', async t = & gt; {expect t .maximizeWindow () .typeText ('input [name= '' q ''] ', 'Browserstack ') .click ('input [type= '' submit ''] [value= '' Google Search ''] ') .expect (Selector (' # result-stats ') .exists) .ok ({timeout: 5000}); await takeSnapshot (t);});

In the above code

We are importingtakeSnapshot, using third-party librarytestcafe-blink-diff

importee {takeSnapshot} from 'testcafe-blink-diff ';

We are performing a set of actions for the scenario mentioned utilise the TestCafe syntax.

In the end, you can take screenshots use the commandawait takeSnapshot (t);

The section below report how to execute the test script for TestCafe Visual Validation.

Execute Visual Regression Tests in TestCafe

To run visual regression tests in TestCafe, you follow a simple three-step flowing: capture a baseline image, capture the latest UI province, and equate both to detect ocular changes. The elaborate steps are explained below.

1. Capture Base Image

To capture the base image, you need to recruit the below command

npx testcafe chrome: headless tests -s tests/screenshots -- take-snapshot base

In the above bidding,

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

tests: Folder name where your Testcafe trial exist

-s tests/screenshots:Folder name to create a base image, If observe leaflet gens doesn & # 8217; t exist Testcafe creates a new.

& # 8211; take-snapshot foot:This is the denotation that deal the captured image as a baseline persona for the future.

After execution of the above command, the base ikon will be trance and stored in the screenshots directory

2. Capture Actual Snapshot

To capture Actual Snapshot, the command is almost the like as the base image seizure command. The only difference is, at the end instead ofbase specify actuallike below.

npx testcafe chrome: headless tests -s tests/screenshots -- take-snapshot actual

After executing of the above dictation, the actual ikon will be captured and stored in the screenshots directory

3. Compare Two icon

You get the base and actual image, now you need to equate the two picture, for that you need to enroll the below command.

npx testcafe-blink-diff tests/screenshots -- compare base: real -- exposed -- threshold 0.03

In the above command, the threshold is the image departure tolerance, the value can be anywhere between 0 to 3.

Test Results

Once you recruit the above command, the .html results will be generated, it will testify the result pass/fail along with the image difference

Visual Testing for Specific DOM Element

In the above method, you will be able to capture full-page snapshots and compare them. The plugin can capture a DOM Element on the webpage, and compare them.

To equate the DOM element you need to pass the TestCafe Selector totakeSnapshot () function.

For Example, If you want to capture results count (results stats) on the Google Search page, you can write simple codification like the below.

await takeSnapshot (t, {label: 'google-result-stats ', selector: [Selector (' # result-stats ')]});

The Complete Testcafe code looks like below

//visual-test.js import {Selector} from 'testcafe '; import {takeSnapshot} from 'testcafe-blink-diff '; regular ` Ocular Testing ` .page ` https: //google.com `; trial ('Visual Testing Google Search Results Page ', async t = & gt; {await t .maximizeWindow () .typeText ('input [name= '' q ''] ', 'Browserstack ') .click ('input [type= '' submit ''] [value= '' Google Search ''] ') .expect (Selector (' # result-stats ') .exists) .ok ({timeout: 5000}); await takeSnapshot (t, {label: 'google-result-stats ', picker: [Selector (' # result-stats ')]});});

Execution steps stay the like, once you execute the tryout you will the outcome.

Optic Regression employ Testcafe and Percy

Percy is the most popular Visual Testing Review Platform.Percy is now part of Browserstack. Like Browserstack, Percy also supports all major automation tools. Percy do Visual Testing easier by providing a consecrate comparison page. You can run your visual test in Percy employ TestCafe across many browser and validate them.

Integrate Testcafe with Percy for Visual Testing

Step 1:Install requires Percy packages

To use Percy in your Testcafe fabric, you involve to install two packages, namely@ percy/cli and @ percy/testcafe. Use the below command to install the required package.

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

Step2:Write a Tescafe Percy script to capture a shot

//visual-test.js import {Selector} from 'testcafe '; import percySnapshot from ' @ percy/testcafe '; fixture ` Optic Testing ` .page ` https: //google.com `; test ('Visual Testing Google Search Results Page ', async t = & gt; {expect t .maximizeWindow () .typeText ('input [name= '' q ''] ', 'Browserstack ') .click ('input [type= '' submit ''] [value= '' Google Search ''] ') .expect (Selector (' # result-stats ') .exists) .ok ({timeout: 5000}); wait percySnapshot (t, 'TestCafe Percy Example ');});

Step 3:Add the surroundings Variable

Get the Percy project item, by logging into Percy and Navigating to Project scene

Set Percy Token Windows Command Prompt

set PERCY_TOKEN=your_project_token

Set Percy Token Windows Powershell/Visual Studio Code Terminal

$ env: PERCY_TOKEN= '' your_project_token ''

Set Percy Token Mac/Linux based Terminal

exportation PERCY_TOKEN=your_project_token

Step 4:Execute the Percy Visual Tests in Testcafe

Using the below command accomplish your Percy Testcafe script

npx percy exec -- testcafe chrome: headless trial

The Percy exec command fulfil the TestCafe hand. It performs very similar activeness likenpx testcafe testsbut at the end the snapshot will be sent to Percy ’ s infra.

Talk to an Expert

Step 4:View the difference

Login to Percy, Click on the several bod you will see the comparison.

If there is a difference Percy shows the difference side by side

If there is no difference Percy expose the message& # 8220; No Changes & # 8221;

Why use BrowserStack Percy?

Once TestCafe is incorporate, the key advantage of using a cloud-based optical testing platform like include:

• :AI-powered interference decrease discount active elements such as animations, ads, and timestamps, significantly understate false positives compared to local pixel-diff creature.
• Comprehensive Coverage:Automatically tests UI across multiple browsers, devices, and responsive viewports without requiring complex local setups.
• Centralized Review:A unified cloud dashboard enable teams to review, approve, or decline visual changes collaboratively, ameliorate follow-up efficiency and transparency.
• CI/CD-Ready Scalability:Built to fit seamlessly into mod pipeline, supporting fast parallel execution for frequent, large-scale deployments.

Pricing

• Gratuitous Plan:Available with up to 5,000 screenshots per month, saint for getting started or for small undertaking.
• Paid Plan:Starting at $ 199 for advanced features, with custom pricing uncommitted for enterprise program.

Conclusion

Unlike, early picture comparison tools, Percy provides image comparison across browser, and can be easily integrated with Test Automation model like, TestCafe,, and to nominate a few. Moreover, Percy helps in perform.

The ocular Comparison proficiency is recommended only for User Interface substantiation, Visual Testing doesn & # 8217; t guarantee any functional flowing or application behavior. In a typical scenario, QA Validation quiz can not be signed off but by Visual Validation. However Visual Testing saves a lot of time and effort which is required for UI proof.

Related Guides