Introduction

Modern web applications often delay loading certain content until it is actually needed. This technique is called Lazy Loading. Instead of loading everything when the page opens, the application loads elements after a user action or when they become visible.

Lazy loading improves website performance and reduces initial page load time. However, it also introduces synchronization challenges because the required elements are not immediately available.

In Selenium, the best approach for handling lazy-loaded content is to use Explicit Waits instead of fixed delays.

In this tutorial, you’ll learn how to automate lazy-loaded content using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is Lazy Loading?

Lazy Loading is a technique where content is loaded only when it is required instead of loading everything at once.

For example:

Page Opens

↓

Only Basic Content Loads

↓

User Clicks Start

↓

Additional Content Appears

This reduces page load time and improves the user experience.

Why Automate Lazy Loading?

Automating lazy-loaded content helps you:

Test dynamically displayed elements.
Verify asynchronous loading.
Validate user interactions.
Improve automation reliability.
Test modern web applications.

How Selenium Handles Lazy Loading

Instead of using fixed delays like time.sleep(), Selenium should wait until the required element appears.

A common approach is to use WebDriverWait together with an expected condition or a custom waiting function.

Example

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait


# Topic: 31. Modern Web Elements - Lazy Loading
# Practice site: https://the-internet.herokuapp.com/dynamic_loading/2
# Run: pytest -s 31_examples/test_02_lazy_loading.py
#
# Lazy-loaded content appears after the page starts or after a user action.
# Always wait for the content instead of using fixed sleep statements.


def test_wait_for_lazy_loaded_content():
    driver = webdriver.Chrome()

    try:
        driver.get("https://the-internet.herokuapp.com/dynamic_loading/2")

        driver.find_element(By.CSS_SELECTOR, "#start button").click()

        finish = WebDriverWait(driver, 10).until(
            lambda browser: browser.find_element(By.ID, "finish")
        )

        assert finish.text == "Hello World!"
    finally:
        driver.quit()

Understanding the Code

Import Required Libraries

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait

These modules are required to launch the browser, locate web elements, and wait for dynamically loaded content.

Create a Chrome Browser Instance

driver = webdriver.Chrome()

Starts a new Chrome browser session.

Open the Practice Website

driver.get("https://the-internet.herokuapp.com/dynamic_loading/2")

Navigates to the Dynamic Loading practice page.

Start Loading the Content

driver.find_element(
    By.CSS_SELECTOR,
    "#start button"
).click()

Clicks the Start button.

This action begins loading the hidden content in the background.

Wait Until the Content Appears

finish = WebDriverWait(driver, 10).until(
    lambda browser:
    browser.find_element(By.ID, "finish")
)

Waits until Selenium can locate the element with ID finish.

The wait automatically continues until the element becomes available or the timeout is reached.

Verify the Loaded Content

assert finish.text == "Hello World!"

Verifies that the lazy-loaded content displays the expected text Hello World!.

If the expected text does not appear, the test fails.

Close the Browser

driver.quit()

Closes the browser and ends the WebDriver session.

Practical Example

Suppose an online shopping website displays additional product details only after clicking View Details.

The automation script:

Opens the product page.
Clicks View Details.
Waits for the product information to load.
Verifies the displayed details.

Automation Testing Example

Consider a banking application.

After clicking Generate Statement, the transaction history loads dynamically.

The automation script:

Clicks Generate Statement.
Waits until the statement appears.
Verifies that the transaction data is displayed correctly.

Real-World Example

Lazy loading is commonly used in:

E-commerce websites
Social media platforms
Banking applications
News portals
Dashboard applications
Image galleries
Enterprise web applications

Examples include product descriptions, customer reviews, transaction histories, comments, and dynamically generated reports.

Advantages of Automating Lazy Loading

Tests asynchronous content loading.
Improves automation reliability.
Verifies dynamic user interfaces.
Reduces flaky test cases.
Simulates real user behavior.

Common Mistakes Beginners Make

Using `time.sleep()`

Avoid:

time.sleep(5)

Instead, use an Explicit Wait so Selenium waits only as long as necessary.

Trying to Access the Element Too Early

The element may not exist immediately after clicking the button.

Always wait until it becomes available.

Ignoring Dynamic Content

Some elements are created only after user interaction.

Attempting to locate them before they exist usually results in a NoSuchElementException.

Using Very Short Timeouts

A timeout that is too short may cause unnecessary test failures on slower environments.

Best Practices

Use Explicit Wait instead of fixed delays.
Wait for the specific element you need.
Verify the loaded content after it appears.
Avoid unnecessary polling or repeated searches.
Handle dynamically loaded content gracefully.

Conclusion

Lazy loading improves application performance by loading content only when needed. Selenium automates lazy-loaded content effectively by using Explicit Waits to detect when elements become available. This approach produces faster, more reliable, and less flaky automation scripts compared to using fixed sleep statements.

Frequently Asked Questions (FAQs)