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

Website performance and speed it the key to customer engagement and retention. Developers use various methods to ensure that the website loading time is less. Lazy loading is one such strategy that loads web contents/resources only when needed, to increase the performance of web pages. 

The web resources such as images, and files consume a lot of memory and decrease performance. Lazy loading is sometimes referred to as on-demand loading. This method ensures that the images load only when required, making the website faster.

One good example of lazy loading is https://medium.com/. Once you navigated to the home page, you can scroll down, and the articles keep loading, this is a form of lazy loading with an infinity scroll.

Advantages of Lazy Loading

• Improved User Experience: Lazy loading, ensure that it loads only part of the web page which is required. This reduces the load time of the web page and resource crunch which makes the web page glitch-free.
• Less Resouce Utilization:  This optimizes the resources so that website works seamlessly on lower configuration systems.
• Improved Performance: As mentioned above it not only makes the user experience smoother but also makes the performance faster.

Disadvantages of Lazy Loading

• Complicated Implementation: Lazy loading needs additional lines of code needs to be written so, this adds additional work to developers.
• Search Engine Optimization: Lazy loading make impact adversely if indexing has not done properly. Hence, one should be very careful when implementing lazy loading.
• Visual Testing: It is a testing technique, which compares two images pixel by pixel and provides the output that both are the same or different which can be used as pass/fail results for our tests. However, in case of Lazy Loading it might generate false results, since the images load on demand.

Difficulties with Lazy Loading in Visual Testing

As Visual Testing takes the screenshot of the web page and compares it with base images. Lazy loading makes the web resources load on demand, Images are also considered a resource so if you take a screenshot of the web page after navigating, you might not get the complete webpage. So, you need to work on a special testing mechanism for Visual Regression in  Lazy Loading.

For example, when testing web page https://sdk-test.percy.dev/lazy-loading/ when you navigate to this webpage only a few images will be loaded as you scroll the images keeps on loading. This is an example of lazy loading.

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

Cypress is a Test Automation tool built with NodeJS. It can be used for different types of testing, such as API Testing, End to End testing, Unit Testing, Integration Testing, and Component Testing.

Cypress supports Visual Regression Testing. The Cypress Visual Regression Testing article explains the basic setup. This article explores how to set up a Cypress Visual Regression Test for Lazy loading web pages.

Usually, Lazy Loading website loads assets as you scroll, so when you perform Visual Regression tests you need to scroll down the page to the bottom. This action can be done using the cypress command

cy.scrollTo('bottom');

The above command scrolls the page to the bottom so all resources will be loaded, and then you can take a screenshot. 

Run Cypress Tests on Real Device Cloud

The complete test script look like the below.

// visual-test.js
describe('Cypress Visual Testing Lazy Loading', () => {
it('Lazy Loading Test', () => {
cy.visit("https://sdk-test.percy.dev/lazy-loading/");
cy.scrollTo('bottom');
cy.compareSnapshot('lazy-loading');
})
})

Once you execute the test with the Cypress command

npx cypress run

The tests get executed, and the first run will be considered as the base run, Cypress captures the base image, and the subsequent run will compare with the base image and provide the result.

The report shows if there is any difference, highlighting the differences as seen below

If there is no difference Cypress simply mark the test result as Pass

Visual Testing with Lazy Loading Web Pages using Percy and Cypress

BrowserStack’s Percy is a cloud-based Visual Comparision tool, it provides a dedicated dashboard to compare the screenshots. Percy helps to review the images on the dashboard. The Percy provides cypress integration. 

Cypress Visual Testing guide explains the integration of Cypress with Percy. Let’s discuss how to implement Cypress Percy for lazy loading websites.

Step 1 Install @percy/cypress and @percy/cli

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

Step 2 Import @percy/cypress

Add the import statement inside cypress/support/index.js

//inside cypress/support/index.js
import '@percy/cypress';

Step 3 Create your lazy loading Visual Tests with Cypress and Percy

// visual-test.js
describe('Cypress Visual Testing Lazy Loading', () => {
it('Lazy Loading Test', () => {
cy.visit("https://sdk-test.percy.dev/lazy-loading/");
cy.scrollTo('bottom');
cy.percySnapshot('lazy-loading');
})
})

Step 4 Sign into Percy and create a Project. To do so Copy the Percy Token from Project Settings

Step 5 Enter the Percy Token using the following command for 

• macOS

export PERCY_TOKEN=<your_token>

• Windows OS Command Line

set PERCY_TOKEN=<your_token>

• PowerShell

$env:PERCY_TOKEN ="<your_token>"

Run your Percy Test 

Execute your Percy Test using the command

npx percy exec -- cypress run

Once execution is completed, Navigate to Percy Dashboard and Check for the latest build

If there is a change Percy will show the difference side by side

If there are no changes then Percy shows the message no Changes

Visual Testing is a smart and easy way for testing website UI functionality, However, with the modern architecture and design of web pages, Visual Testing has, its challenges. Lazy loading is one such challenge, at some extent the lazy loading website can be tested. However, if the website has implemented infinity scrolling then it would be difficult to test such a website with Visual testing.

For more accurate results, it is always recommended to use a Visual Testing tool like Percy that allows users to test on real devices and browser. Moreover, it uses pixel by pixel comparison to ensure that the visual regression is accurate and supports all the popular test automation frameworks such as Cypress, Playwright, Puppeteer, Storybook, TestCafe, etc.

Try Percy for Free