How to capture Lazy Loading Images for Visual Regression Testing in Puppeteer

Modern web applications progressively rely on lazy-loading techniques to improve execution and charge hurrying. However, lazy-loaded images can easily break visual fixation testing if they aren ’ t fully rendered before a screenshot is conduct. That ’ s where Puppeteer comes to play.

await page.evaluate (() = & gt; {window.scrollBy (0, window.innerHeight);});

This clause explore how to capture lazy-loaded ikon for visual fixation testing using Puppeteer effectively.

What is Visual Testing

Testing the Visual aspect of the web page is phone. Optic Testing is also called Optical Validation or. Visual testing can be do by compare two snapshots (base and actual). Visual Testing can be automated and done manually.

compares baseline and existent screenshots to detect optic discrepancies. It can be done manually or through automated instrument to highlight differences. It ensures UI consistence, enhances user experience, and prevents visual bugs across browsers and devices.

What are Lazy Loaded Images

Lazy-loaded picturerefer to persona on a web page that aren ’ t instantly loaded when the page is first rendered. These images are loaded just when the user reaches the piece of the page where they are actually located (the user ’ s viewport).

is beneficial for media-heavy websites, ensuring a smoother user experience while optimizing bandwidth usage. However, proper effectuation is indispensable to foreclose issues like delayed rendering or miss images in and search engine indexing.

Advantages of Lazy Loading Images

Lazy loading is widely adopted because it offers several performance benefits:

• Faster initial lading:Only in-view images load immediately, improving perceived swiftness.
• Improved responsiveness:Loading ikon progressively help maintain smooth scrolling and interactions.
• Optimized resource custom:Reduces memory and CPU cargo by avoiding early rendering of heavy assets.

Disadvantages of Lazy Loading Images

Despite its benefits, lazy loading introduces some challenges in testing such as:

• Delayed rendering:Images may load late, causing visible transmutation or layout jumps.
• Accessibility gaps:Screen readers may miss images if proper fallbacks aren ’ t provided.
• SEO restriction:Without correct pullout (e.g.,& lt; noscript & gt;), crawlers may not index picture.
• Discrepant results:Dynamic load can cause variability across test test, leading to false positive or incomplete seizure in test.

Why is it Important to Capture lazy-loaded Images for Optic Regression Testing

It is indispensable to beguile Lazy-loaded images during to facilitate the visual and functional integrity of an application

• Visual Validation: Lazy-loaded images are triggered and loaded dynamically. When that ’ s the case, the chances of the images being skipped or incomplete screenshots are high. Capturing them makes sure that the results of the visual testing feat correspond to the final rendered province of the page.
• Detecting Visual Defects: If procurator don ’ t load correctly or betray to get replaced by real images, the design can be involve. It is necessary to charm lazy-loaded icon to correctly identify these issues.
• User Experience Validation: Visual regression testing aid ensure that all the images of a page load seamlessly and provides a consistent user experience, which is why it is essential to capture lazy-loaded images.
• SEO Validation: Capturing lazy-loaded images helps you validate that they are be rendered as expected and in a way that search engine can index.

Visual Regression Testing in Puppeteer

was initially designed for. But you can perform Visual Validation Testing using third-party software.

One of the challenges in visual validation is try lazy burden websites. As the web page plus will be lade dynamically as the user scroll downwardly, if you enamor the shot after piloting, but part of the web page gets charm. To overcome the lazy loading trouble in Visual Testing, the simplest solution is to scroll to the bum of the webpage before taking the screenshot.

How to capture Lazy Loading Images for Visual Regression Testing in Puppeteer

Prerequisites:

2. Knowledge of

Step 1: Install jest-image-snapshot

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

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

Consider the webpage https: //sdk-test.percy.dev/lazy-loading when you navigate to this webpage, only a few images loads, as you scroll down, the images keep loading until it reaches picture figure 40.

To direct the above issue, you need to follow the below stairs

1. Navigate to https: //sdk-test.percy.dev/lazy-loading
2. Scroll to the bottom of the webpage
3. Take a snapshot of the entire webpage
4. Compare base and real images in a subsequent run

Step 2: Install thescroll-to-bottomjs

Puppeteer doesn & # 8217; t provide any unmediated command to scroll to the tooshie. The scroll-to-bottom action can be achieved by the third-party pluginscroll-to-bottomjs.

Command:

npm i scroll-to-bottomjs

Step 3: Write Optic Regression Test using Puppeteer for Lazy load webpage

//visual-lazyloading.test.js const {toMatchImageSnapshot} = require ('jest-image-snapshot '); let scrollToBottom = require (`` scroll-to-bottomjs ''); expect.extend ({toMatchImageSnapshot}); describe ('Visual Testing - Lazy Loading ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //sdk-test.percy.dev/lazy-loading ')}) it ('Visual Regression Test - Lazy Loading ', async () = & gt; {await page.evaluate (scrollToBottom); await page.waitForTimeout (5000); const image = await page.screenshot ({fullPage: true}); expect (image) .toMatchImageSnapshot ({failureThreshold: ' 0.10 ', failureThresholdType: 'percent'});})})

Let & # 8217; s see what the above code snippet perform,

• const {toMatchImageSnapshot} = require (& # 8216; jest-image-snapshot & # 8217;);: This is required for comparison of image
• let scrollToBottom = require (& # 8220; scroll-to-bottomjs & # 8221;);: This helps to call the scroll to bottom function.
• expect.extend ({toMatchImageSnapshot});: By default the expect doesn & # 8217; t support snapshot compare, you need to extend the support using this code.
• await page.evaluate (scrollToBottom);: scrollToBottom help lazy loading website to scroll to the bottom of the webpage.
• const ikon = await page.screenshot ({fullPage: true});: This code takes the screenshot, as you are using the pick fullPage: true, which takes the screenshot of the entire webpage.
• expect (icon) .toMatchImageSnapshot (): At the end, you need to ensure the captured image is the same as the base image.

Step 4: Execute your Visual Comparison Tests using Puppeteer

Execute your Jest Puppeteer Visual Regression Test using the bid

npx jest -c ./jest.config.js

Alternatively, if you receive configured the tests require in package.json you can simply fulfill npm run tryout

The first time you fulfill the exam, Puppeteer captures the base screenshot, the subsequent run compares the actual screenshot with the bag screenshot.

The pass/fail consequence will be shown on the command line

Example Output shows the failed scenario:

__diff_output__ folder shows the snapshot difference

Scaling Visual Regression Testing with Percy

Once has loaded all lazy-loaded images and the page is full interpret, the next measure is ensuring that these visuals remain consistent across code changes. This is where Percy by BrowserStack append important value.

is an AI-powered optic testing platform that automates screenshot capture, comparison, and reappraisal. It handles the integral visual regression workflow, get it easy to get layout shifts, styling issues, or changes caused by lazy-loaded content.

Why Use Percy with Lazy-Loaded Pages?

• Automated optic regression:Percy captures snapshots on every commit and compares them against your baselines, highlighting layout shifts or missing persona that often occur when lazy-loaded substance doesn ’ t render correctly.
• Optical AI that reduces false positives:automatically ignores visual interference, such as brio flicker or anti-aliasing, so only meaningful changes are flagged. This is especially helpful for pages with dynamically load persona or scrolling-driven behavior.

• Open, actionable diffs:Percy draws bounding boxes around visual alteration and provides human-readable summaries through its, making it easier to spot number introduced by lazy-loading scripts or viewport-dependent content.
• Casual integration with Puppeteer workflows:After your Puppeteer script scrolls and loads all images, bestow Percy is as uncomplicated as telephone a shot. Percy works seamlessly in, so every shape mechanically checks for visual regression.
• Scalable review and collaboration:Teams can review diffs, comment, approve, or cull changes directly in Percy ’ s dashboard—ensuring that UI alteration are intentional and fully corroborate before release.

Pricing Options for Percy

• Free Plan:Includes up to5,000 screenshots per month, ideal for getting started or testing smaller projects.
• Paid Plan: Starts at $ 199/monthfor advanced features, withcustom enterprise pricingavailable for larger teams and workflows.

Visual Testing using Percy Puppeteer for Lazy Loading Website

Step 1: Install @ percy/puppeteer and @ percy/cli using npm:

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

Step 2: Write Puppeteer Tests using Percy

In the Puppeteer test, the percySnapshot needs to be import, in order to take a screenshots

const percySnapshot = require (' @ percy/puppeteer ')

Once you import the percySnapshot, you can perform a set of actions and then lead a screenshot at the required stride.

let scrollToBottom = require (`` scroll-to-bottomjs '');

• scrollToBottom:The scrollToBottom function helps to scroll the lazy loading webpage to the underside.

//visual-percy-lazyloading.test.js const percySnapshot = require (' @ percy/puppeteer ') let scrollToBottom = require (`` scroll-to-bottomjs ''); describe ('Visual Testing Percy-Lazy Loading ', () = & gt; {jest.setTimeout (50000); beforeAll (async () = & gt; {await page.goto ('https: //sdk-test.percy.dev/lazy-loading ')}) it ('Visual Regression Test Percy - Lazy Loading ', async () = & gt; {look page.evaluate (scrollToBottom); await page.waitForTimeout (5000); await percySnapshot (page, `` percy-lazyload-visual-test-puppeteer-jest '')})})

• await page.evaluate (scrollToBottom): scrollToBottom function, scroll the otiose loading web page to the tooshie.
• await percySnapshot (page, & # 8220; percy-lazyload-visual-test-puppeteer-jest & # 8221;): percySnapshot takes the snapshot of the total page and name it as percy-lazyload-visual-test-puppeteer-jest.

Talk to an Expert

Step 3: Set PERCY_TOKEN

Navigate to Percy Project Settings (If Project is not created already create one) and copy the PERCY_TOKEN. Set the environs variable as per your tool.

• Windows command line

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

• Mac/Linux terminal

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

• Powershell

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

Step 4: Execute Percy Test

Execute Percy Visual Test for Puppeteer and Jest using the below bidding.

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

Once the Percy Test is completed, you will see the results in the command line with the Percy make number. Navigate to the URL to get the details.

Once you Navigate to the Build URL, the persona diff overlayer will be laden side by side if there is any difference. If there is no difference Percy just shows & # 8220; No Changes. & # 8221;

Useful Resources for Lazy Loading

Conclusion

Visual Regression is crucial for the visual correctness of the coating which might get unnoticed while. Considering the UI aspect of the application, automated Optic Validation Testing saves time and attempt, besides it doesn ’ t postulate any expertise in befool. The modern frameworks that implement indolent load can have infinite scrolling, in such scenarios, it is very hard to perform manual optical testing.

You can use tools like BrowserStack Percy to heighten this operation and automate visual compare by integrating with Puppeteer.

Related Guides