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

Capturing lazy-loaded images correctly is essential for reliable visual regression testing, preventing missing elements that could lead to inaccurate results.

This article explores how to capture lazy-loaded images for visual regression testing using Puppeteer effectively.

What is Visual Testing

Testing the Visual aspect of the web page is called Visual Testing. Visual Testing is also called Visual Validation or Visual Regression Testing. Visual testing can be done by comparing two snapshots (base and actual). Visual Testing can be automated and done manually.

Visual Testing compares baseline and actual screenshots to detect visual discrepancies. It can be done manually or through automated tools to highlight differences. It ensures UI consistency, enhances user experience, and prevents visual bugs across browsers and devices.

What are Lazy Loaded Images

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

Lazy loading is beneficial for media-heavy websites, ensuring a smoother user experience while optimizing bandwidth usage. However, proper implementation is essential to prevent issues like delayed rendering or missing images in automated tests and search engine indexing.

Advantages of Lazy Loading Images

Lazy loading images offers several significant advantages, here are some of them:

• Faster Page Load: Lazy loading significantly reduces the initial page load time by loading only the images within the user’s viewport, leading to a quicker and more responsive website.
• Optimized Resource Usage: It prevents unnecessary loading of off-screen images, reducing memory consumption and improving overall efficiency.
• Improved Website Performance: Lazy loading enhances website responsiveness and ensures smoother interactions by decreasing the number of images loaded at once.
• Lower Network Load: This technique minimizes bandwidth usage and reduces the number of server requests, leading to better performance, especially for users on slower networks.
• Better User Experience: Lazy loading creates a seamless browsing experience by progressively loading images as users scroll, preventing lags and unnecessary delays.

Disadvantages of Lazy Loading Images

Though it has some great benefits, lazy-loaded images do have a few disadvantages too:

• Delayed Rendering: Images might take time to load, which can lead to content jumps and poor user experience.
• Accessibility Problems: There are chances for the screen reader to miss detecting lazy-loaded images if they rely a lot on JavaScript without proper fallbacks.
• SEO Issues: If you don’t have proper noscript fallbacks or structured data, search engine crawlers can miss lay-loaded images, which can affect your SEO performance.
• Testing challenges: Testing lazy-loaded images demands additional configurations to simulate user interactions and trigger image loading.
• Dynamic Behavior: Lazy loading is triggered dynamically, and therefore, ensuring consistency across test runs can be challenging.
• False Positives and Negatives: Visual regression tests can capture placeholders instead of loaded images. Also, there are chances of images not loading within a test’s time limits. The mentioned scenarios can lead to accurate results and false test failures.

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

It is essential to capture Lazy-loaded images during visual regression testing 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 efforts correspond to the final rendered state of the page.
• Detecting Visual Defects: If placeholders don’t load correctly or fail to get replaced by actual images, the design can be affected. It is necessary to capture lazy-loaded images to correctly identify these issues.
• User Experience Validation: Visual regression testing helps 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 being rendered as expected and in a way that search engines can index.

Visual Regression Testing in Puppeteer

Puppeteer framework was initially designed for functional testing. But you can perform Visual Validation Testing using third-party packages.

One of the challenges in visual validation is testing lazy loading websites. As the web page assets will be loaded dynamically as the user scrolls down, if you capture the snapshot after navigation, only part of the web page gets captured. To overcome the lazy loading problem in Visual Testing, the simplest solution is to scroll to the bottom of the webpage before taking the screenshot.

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

Prerequisites:

1. Setup Basic Puppeteer Framework
2. Knowledge of Visual Testing in Puppeteer 

Step 1: Install jest-image-snapshot

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 image number 40.

To address the above issue, you need to follow the below steps

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

Step 2: Install the scroll-to-bottomjs

Puppeteer doesn’t provide any direct command to scroll to the bottom. The scroll-to-bottom action can be achieved by the third-party plugin scroll-to-bottomjs.

Command:

npm i scroll-to-bottomjs

Step 3: Write Visual Regression Test using Puppeteer for Lazy loading 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', () => {

jest.setTimeout(50000);

beforeAll(async () => {

await page.goto('https://sdk-test.percy.dev/lazy-loading')

})

it('Visual Regression Test - Lazy Loading', async () => {




await page.evaluate(scrollToBottom);

await page.waitForTimeout(5000);

const image = await page.screenshot({ fullPage: true });

expect(image).toMatchImageSnapshot({

failureThreshold: '0.10',

failureThresholdType: 'percent'

});

})

})

Let’s see what the above code snippet does,

• const { toMatchImageSnapshot } = require(‘jest-image-snapshot’); : This is required for comparison of image
• let scrollToBottom = require(“scroll-to-bottomjs”);: This helps to call the scroll to bottom function.
• expect.extend({ toMatchImageSnapshot }); : By default the expect doesn’t support snapshot comparison, you need to extend the support using this code.
• await page.evaluate(scrollToBottom); : scrollToBottom helps lazy loading website to scroll to the bottom of the webpage.
• const image = await page.screenshot({ fullPage: true }); : This code takes the screenshot, as you are using the option fullPage: true, which takes the screenshot of the entire webpage.
• expect(image).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 command

npx jest -c ./jest.config.js

Alternatively, if you have configured the tests command in package.json you can simply execute npm run test

The first time you execute the test, Puppeteer captures the base screenshot, the subsequent run compares the actual screenshot with the base screenshot.

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

Example Output shows the failed scenario:

__diff_output__ folder shows the snapshot difference

Percy is a popular visual validation and review platform, which makes the Visual Comparison experience better. Using Percy you can do both manual and automated visual comparisons. Percy provides a dedicated build dashboard, where you can compare differences, review, approve, comment, or reject the build.

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 imported, 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 take a screenshot at the required step.

let scrollToBottom = require("scroll-to-bottomjs");

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

//visual-percy-lazyloading.test.js

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

let scrollToBottom = require("scroll-to-bottomjs");

describe('Visual Testing Percy-Lazy Loading', () => {

jest.setTimeout(50000);

beforeAll(async () => {

await page.goto('https://sdk-test.percy.dev/lazy-loading')

})

it('Visual Regression Test Percy - Lazy Loading', async () => {

await page.evaluate(scrollToBottom);

await page.waitForTimeout(5000);

await percySnapshot(page, "percy-lazyload-visual-test-puppeteer-jest")

})

})

• await page.evaluate(scrollToBottom): scrollToBottom function, scrolls the lazy loading web page to the bottom.
• await percySnapshot(page, “percy-lazyload-visual-test-puppeteer-jest”): percySnapshot takes the snapshot of the full page and names 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 environment variable as per your tool.

• Windows command line

set PERCY_TOKEN=<your token here>

• Mac/Linux terminal

export PERCY_TOKEN=<your token here>

• Powershell

$env: PERCY_TOKEN="<your token here>"

Step 4: Execute Percy Test

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

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 build number. Navigate to the URL to get the details.

Once you Navigate to the Build URL, the image diff overlay will be loaded side by side if there is any difference. If there is no difference Percy just shows “No Changes.”

Useful Resources for Lazy Loading

• What is Lazy loading?
• Implementing Lazy Loading in React
• How to Lazy Load Images in Javascript
• How to capture Lazy Loading Images for Visual Regression Testing in Cypress
• How to reduce False Positives in Visual Testing?

Conclusion

Visual Regression is essential for the visual correctness of the application which might get unnoticed while functional testing. Considering the UI aspect of the application, automated Visual Validation Testing saves time and effort, also it doesn’t need any expertise in coding. The modern frameworks that implement lazy loading can have infinite scrolling, in such scenarios, it is very difficult to perform manual visual testing.

You can use tools like BrowserStack Percy to enhance this process and automate visual comparisons by integrating with Puppeteer.

Try Percy Now