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

Modern web design is always concerned about smooth user interface and performance. Lazy loading is one of the major features which improves the website performance and provides a smooth user experience. 

Lazy loading speeds up the initial loading of the web application as it renders the assets which are required only for the top of the web page, and as the user continues to scroll down the page, the corresponding web assets get loaded. The lazy loading technique avoids all the web page assets to be loaded at once, rather it loads chunk by chunk thereby decreasing the load time and increasing the performance. Since the memory utilization is optimized the user experience will be glitch-free.

Advantages of lazy loading:

• Lazy loading increases the performance
• Enhances User Experience 
• Decreases the network activity 
• Optimizes web resources

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 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

//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 differencePercy 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. 

Try Percy now

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 .

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.”

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.  

BrowserStack allows you to automate visual testing using popular frameworks like Puppeteer. 

Try BrowserStack now