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

Website performance and speed is the key to customer betrothal and retention. Developers use various methods to assure that the website loading time is less.

This clause yield you a detailed account of how you can capture work-shy load images for visual testing in Cypress.

What is Work-shy Loading in Cypress?

is a technique for delaying the loading of resources (like image, video, or iframes) until they are needed, typically when the exploiter scrolls them into view. This improves page execution and reduces initial load time.

In Cypress, lazy loading can create testing challenges because not all content may be seeable or loaded when the test runs.

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

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

Cypress supports. The article explains the basic setup. This clause 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 prat. This action can be done use the cypress command

cy.scrollTo ('bottom ');

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

The complete test script looks like the one below.

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

Once you fulfill the test with the Cypress bid

npx cypress run

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

The report shows if there is any departure, highlighting the dispute as seen below

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

Difficulties with Lazy Loading in Visual Testing

As Visual Testing lead the screenshot of the web page and compares it with base images. Lazy loading makes the web resources load on demand, Images are also deal a resourcefulness so if you take a screenshot of the web page after navigating, you might not get the consummate 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.

Optical Testing with Lazy Loading Web Pages using Percy and Cypress

is a cloud-based Visual Comparision instrument, it cater a consecrate splasher to compare the screenshots. Percy helps to review the images on the splasher. The Percy provides cypress integration.

guide explicate the integrating of Cypress with Percy. Let & # 8217; s discourse how to implement Cypress Percy for lazy loading website.

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

Step 1 Install @ percy/cypressand@ percy/cli

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

Step 2 Import@ percy/cypress

Add the importee statement insidecypress/support/index.js

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

Step 3 Create your work-shy laden Visual Tests with Cypress and Percy

// visual-test.js describe ('Cypress Visual Testing Lazy Loading ', () = & gt; {it ('Lazy Loading Test ', () = & gt; {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 thePercy Tokenfrom Project Settings

Step 5 Enter the Percy Tokenusing the following command for

• macOS

export PERCY_TOKEN= & lt; your_token & gt;

• Windows OS Command Line

set PERCY_TOKEN= & lt; your_token & gt;

• PowerShell

$ env: PERCY_TOKEN = '' & lt; your_token & gt; ''

Run your Percy Test

Execute your Percy Test using the command

npx Hotspur exec -- cypress run

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

If there is a modification Percy will show the divergence side by side

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

Why Percy Is Ideal for Cypress Visual Tests?

As progressively intersect with modern UI form like lazy loaded images and components, squad need a reliable way to ensure that every ocular ingredient renders correctly under real conditions. brings stability to this workflow through automated, AI-backed visual testing that fits naturally into existing development and CI practices.

• Effortless Visual Regression Testing:Seamlessly integrates into CI/CD pipelines with a individual line of codification and work with functional examination suites, Storybook, and Figma for true shift-left examination.
• Automated Optical Regression:Captures screenshots on every commit, compares them side-by-side against baselines, and instantly flags visual regressions like broken layout, style shifts, or component bugs.
• : The Visual AI Engine uses advanced algorithms and AI Agents to mechanically discount optic noise caused by active banners, animations, anti-aliasing, and other unstable factor. It focuses only on meaningful changes that affect the user experience. Features like & # 8220; Intelli ignore & # 8221; and OCR help differentiate important visual shifts from minor pixel-level differences, greatly reducing false positive alerts.

• :Highlights impactful changes with bounding boxes, volunteer human-readable sum-up, and accelerates review workflows by up to 3x.
• No-Code Visual Monitoring:Visual Scanner permit rapid no-install setup to scan and monitor 1000 of URLs across 3500+ browsers/devices, initiation scans on-demand or by schedule, ignore dynamical contented regions as needed, and equate staging/production or early environs directly.
• Flexible and Comprehensive Monitoring:Schedule scans hourly, daily, hebdomadary, or monthly, analyze historical results, and compare any environs. Supports local testing, authenticated pages, and proactive bug sensing before public release.
• Broad Integrations:Supports all major frameworks and CI tools, and offers SDKs for quick onboarding and frictionless scalability.

extends these capability to aboriginal mobile applications on iOS and Android. It runs visual tests on real devices to deliver pixel accurate issue, while intelligent handling of dynamical elements reduces flakiness. Setup takes only one line of code, and support couplet Appium, WebdriverIO, Java, Python, and more.

Parallel execution hotfoot up build times by up to ten times, and a unified dashboard provide logs, screenshots, and video recordings with full compliance to data seclusion standards.

Pricing Details for Percy

• Costless Plan:Up to 5,000 screenshots per month, suitable for smaller labor or initial adoption.
• Paid Plan: Starts at 199 USD with additional features and enterprise stage scalability.

Advantages of Lazy Loading in Cypress Visual Testing

Here are the key advantages of lazy burden in Cypress Visual Testing:

• Faster Page Load Times:Only necessary content is loaded initially, improving load speed and cut initial bandwidth usage, which is peculiarly utilitarian during test execution.
• Optimized Resource Usage:By deferring the loading of off-screen images or elements, it minimize memory and processing demands, do exam more effective, peculiarly on limited test environments.
• Improved Performance Feedback:Lazy loading helps simulate existent user conditions more accurately during testing, allowing squad to identify performance issues early.
• Scalability for Large Pages: For page with heavy content or long whorl, lazy loading helps Cypress handle tests more smoothly by loading content in manageable chunks.

Disadvantages of Lazy Loading in Cypress Visual Testing

Here is the lean of key challenges:

• Increased Test Complexity:Additional Cypress commands like scrollIntoView () or expressed waits may be needed to insure lazy-loaded elements are present.
• Visual Testing Inconsistencies: Lazy-loaded images may cause false failures in visual fixation exam if snapshot are taken before content fully heaps.
• Higher Maintenance Overhead: Visual tests involving lazy-loaded substance require more careful timing and dynamic handling, increase the complexness and upkeep of your examination suite.

Talk to an Expert

Conclusion

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

For more accurate upshot, it is forever recommended to use a Visual Testing tool like Percy that allows users to test on existent devices and browser. Moreover, it uses pixel by pel comparison to ensure that the visual regression is exact and supports all the democratic tryout mechanisation frameworks such as Cypress,,,,, etc.

Utile Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Frequently Asked Questions

1. Why does lazy lade create issues in Cypress optic tests?

Lazy load delays rendering until an ingredient enters the viewport, which can do incomplete or inconsistent visuals if the shot is capture before all contented loads.

2. How can one ascertain all lazy-loaded substance appears before taking a visual snapshot?

Scrolling the page manually or use cy.scrollTo () helps trigger lazy-loaded elements so that Percy or any optical testing tool captures the amply rendered UI.

3. Does one want to scroll the entire page during visual testing?

Yes. Scrolling through the total page ensures all section, including below-the-fold images or components, experience loaded and are ready for stable shot.

Related Guides