How to Perform Visual Regression Puppeteer

Maintaining UI consistency across frequent releases is critical to deliver a unseamed user experience. Even minor codification changes can introduce unexpected layout breaks, style inconsistencies, or visual regressions that impact how users interact with your covering.

Visual regression testing with Puppeteer offers an machine-driven solution to catch these UI number before they hit production.

By capturing and equate screenshots across builds, teams can ensure that new deployment preserve the intended look and feel of their web applications while accelerating the test process.

npm install puppeteer jest jest-image-snapshot -- save-dev

Update package.json: {'' scripts '': {'' test '': `` jest ''}}

const puppeteer = require ('puppeteer '); const {toMatchImageSnapshot} = require ('jest-image-snapshot '); expect.extend ({toMatchImageSnapshot}); describe ('Visual regression example ', () = & gt; {let browser; let paginate; beforeAll (async () = & gt; {browser = await puppeteer.launch (); page = await browser.newPage ();}); afterAll (async () = & gt; {wait browser.close ();}); it ('should jibe full page snap ', async () = & gt; {await page.goto ('https: //example.com '); const screenshot = await page.screenshot (); expect (screenshot) .toMatchImageSnapshot ({failureThresholdType: 'pixel ', failureThreshold: 100, // allows minor differences});}); it ('should match element snap ', async () = & gt; {await page.goto ('https: //example.com '); const element = await page. $ ('h1 '); const screenshot = await element.screenshot (); expect (screenshot) .toMatchImageSnapshot ();});});

npm test On failure, Jest auto-generates a __image_snapshots__ directory with comparison results.

Whether you & # 8217; re new to visual regression testing or look to optimize your be workflow, this usher supply practical insights for implementing reliable UI testing with Puppeteer.

What is Puppeteer and Why Use It for Visual Regression Testing?

is an open-source library developed by Google that provides a high-level API to control Chrome or Chromium browser through the DevTools Protocol. It ’ s primarily apply for automating web covering examination, generating screenshots, and performing performance or provide checks.

For, Puppeteer captures baseline screenshots of web pages and compares them against new shape to detect unintended UI modification. It helps developers identify layout transmutation, color mismatches, or missing elements early in the liberation cycle.

Key intellect to use Puppeteer for visual regression testing:

• Automation:Runs Chrome without a UI, enable tight and efficient screenshot coevals.
• Pixel-Perfect Comparisons:Supports visual diffing through integration with libraries like Pixelmatch or Resemble.js.
• Integration:Easily integrates with build pipelines for continuous visual validation.
• Customizable Control:Allows advanced constellation for viewport sizing, device emulation, and network throttling.

Pre-Requisite for Puppeteer Visual Regression Testing

You need to to do Optical Regression Tests with Puppeteer.

There are several way of performing Ocular Regression in Puppeteer. This article highlights the undermentioned two methods:

1. Puppeteer Visual Validation Test applyjest-image-snapshot
2. Puppeteer Visual Testing usingPercy

Puppeteer Visual Validation Test using jest-image-snapshot

The jest-image-snapshotis a node package it ply integration with Jest and Puppeteer with minimal settings.

Follow the below stairs to Perform Visual Testing use Puppeteer and Jest:

Step 1: Install jest-image-snapshotsoftware habituate the command

npm i -- save-dev jest-image-snapshot

Step 2:Add the visual regression test

Let & # 8217; s occupy the snap after navigating to home page and compare them using the code below.

//visual.test.js const {toMatchImageSnapshot} = require ('jest-image-snapshot '); expect.extend ({toMatchImageSnapshot}); describe ('Visual Testing ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //www.browserstack.com ')}) it ('Visual Regression Test ', async () = & gt; {const image = await page.screenshot (); expect (image) .toMatchImageSnapshot ({failureThreshold: ' 0.10 ', failureThresholdType: 'percent'});})})

In the above code

const {toMatchImageSnapshot} = require ('jest-image-snapshot ');

Importing thetoMatchImageSnapshotinvariable, which help to match the images.

expect.extend ({toMatchImageSnapshot});

By nonpayment Jest ’ sexpectdoesn ’ t have an image comparison technique, so you need to extend the functionality withexpect.extend ();

const image = await page.screenshot ();

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

The screenshot will be lead and saved in the variable image

expect (image) .toMatchImageSnapshot ({failureThreshold: ' 0.10 ', failureThresholdType: 'percent'});

The above code compares the screenshot.failureThresholdcreate image compare more flexible by supply icon difference tolerance.

Step 3:Execute your Puppeteer Visual Tests expend Jest by entering the below dictation

npx jest -c ./jest.config.js

Alternatively, if you receive configured the examination require inpackage.jsonyou can only execute it using the below command.

npm run tryout

The first clip when you execute the test, the Puppeteer enchant the understructure screenshot. In subsequent runs, it compares the screenshot with the base screenshot.

After the first execution, the__image_snapshots__folder will be created, and it saves the understructure snapshot file inside the folder.

The pass/fail trial results will be shown on the command line, as seen below.

If there is a difference in groundwork and actual screenshots, then the examination will be marked as a fail.

If you navigate todiff-outputbrochure, the ikon will be shown in side by side comparing.

Puppeteer Visual Testing for DOM Element

Following the above method, you will be able to perform visual testing for the accomplished page. However, there might be certain scenarios in which you need to execute optic validation for Single DOM ingredient such as Button, Checkbox, Menu, etc. Puppeteer endorse Optical Test for Single DOM Element. You just take to change the code to run Visual Tests for DOM Element.

Instead of taking the screenshot at the page level, you can occupy the screenshot at the element level, like below.

const element = await page. $ (' # signupModalButton '); const icon = await element.screenshot ();

In the above codification, the constituent is captured foremost, and so the screenshot is taken.

The complete codification of Puppeteer Visual Testing for DOM Element, looks like the snippet below.

//visual.test.js const {toMatchImageSnapshot} = require ('jest-image-snapshot '); expect.extend ({toMatchImageSnapshot}); describe ('Visual Testing ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {expect.extend (toMatchImageSnapshot); await page.goto ('https: //www.browserstack.com ')}) it ('Visual Regression Test ', async () = & gt; {const factor = await page. $ (' # signupModalButton '); const image = await element.screenshot (); expect (persona) .toMatchImageSnapshot ({failureThreshold: ' 0.10 ', failureThresholdType: 'percent'});})})

The execution step rest the same as that used in the late section.

Puppeteer Visual Testing Using Percy

is an AI-powered visual try platform that promote Puppeteer testing with intelligent mechanization and collaborative revaluation workflows. It seamlessly desegregate with Puppeteer to furnish a cloud-based dashboard for visual comparison, making it easier to critique, approve, and share test results across teams.

Why Use Percy with Puppeteer?

• AI-Powered Accuracy: Percy & # 8217; s automatically ignores visual noise from dynamic banners, animations, and anti-aliasing, focalize only on meaningful changes that regard user experience. This significantly reduces false positive and accelerates review workflow by up to 3x.
• Comprehensive Build History: Every Percy test performance triggers a build with side-by-side visual diffs, maintaining historical results for easy trailing and compare across deployment.
• Seamless Collaboration: Share visual trial report directly through Slack or CI pipeline, enabling team-wide visibility and quicker root cause analysis. Percy & # 8217; s highlights impactful changes with bounding boxes and human-readable summary.

• CI/CD Integration: Integrates into CI/CD line with a single line of code, automatically capturing screenshots on every commit and instantly flagging visual fixation like broken layouts or style shifts.
• : Monitor visual consistency across 3500+ browsers and device, with pliant scheduling options and the ability to liken staging, product, or any environment.

Percy supports all major frameworks and CI creature, offering quick onboarding with consecrated SDKs. Get started with a gratis plan (5,000 screenshots/month) or search paid plans starting at $ 199/month.

Integrating Percy for Puppeteer Jest

Step 1: Install @ percy/puppeteer and @ percy/cliusing npm:

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

Step 2:Write Puppeteer Tests using Percy

In the Puppeteer trial, thepercySnapshotdemand to be imported in order to take screenshots using the below bidding

const percySnapshot = require (' @ percy/puppeteer ') Once you import thepercySnapshot, you can perform a set of actions and then take a screenshot at the required footstep. For illustration, navigating to browserstack.com homepage first, so taking a screenshot and comparing for visual testing, the scenario can be indite as: //visual-percy.test.js const percySnapshot = require (' @ percy/puppeteer ') describe ('Visual Testing ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //www.browserstack.com ')}) it ('Visual Regression Test ', async () = & gt; {expect percySnapshot (page, `` percy-visual-test-puppeteer-jest '')})})

Step 3:Create Percy Project using the below step

• Login to Percy
• Create a new Project

Step 4: Set the PERCY_TOKENenvirons variable

Once a new Project is created, Navigate to Settings and Copy the Percy Token.

To run the Percy test, you want to set the environment variable. The setting up environment varying bet on the operating system and command-line tool you are using. Here ’ s how you can set PERCY_TOKEN for different CLIs, such as:

• Windows Command Line

set PERCY_TOKEN= & lt; your token here & gt;

• Mac/Linux Terminal

export PERCY_TOKEN= & lt; your item here & gt;

• Powershell Terminal

$ env: PERCY_TOKEN= '' & lt; your token here & gt; ''

Once the surround variable is set up, you are ready to execute your test.

Step 5:Execute your test using the command.

Execute Percy Visual Test for Puppeteer and Jest using the below command

npx percy exec -- jest -c ./jest.config.js

Wait until the execution cultivation. Once executing is complete, you will see the soma URL in the command line.

Navigate to the build URL, and you will be landed in Percy Build Dashboard. If there is any difference in the icon, the Percy dashboard shows the diff in side by side, as find below.

If there is no dispute, then Percy & # 8217; s dashboard shows the image with No Changes, as seen in the next screenshot.

Conclusion

Puppeteer was originally design to perform functional tests. However, it can also be expend for Optical Validation. Remember, visual examination is urge just for validation of web covering ’ s user interface changes. The functionality and dynamic data can not be verify utilise Optical Regression Tests.

Visual regression test makes easy and quick. It assist deliver consistent visuals and hence a seamless exploiter experience. It is normally commend for projects with frequent releases, and visual examination can be a roadblock in Continuous Deployment.

Useful Resources for Puppeteer

Understanding Puppeteer:

Tools Comparisons:

Related Guides