Sunday, 11 March 2018

Published March 11, 2018 by

How to handle Lazy Loading Webpage

Hello Learners,

Just like humans sometimes webpage elements also get lazy. We have often seen lazy loading-related scenarios on different e-commerce and other social media sites but, we are not aware about it that it is called as Lazy Loading. Also, how to handle such Lazy webelements through Selenium is a tricky question. But no worries!!  Let's move ahead in the post and find out what is this Lazy Loading & How to handle it?

What is Lazy Loading?

There is a new technology in web development, which is called Lazy Loading. This makes your web page lighter and loads fast. 

How it works is that it loads the page only what is visible on the screen, and on scrolling down the page, it again loads the rest of the page. So it loads only the visible part of the webpage, not the whole web page at one go. 

How to handle Lazy Loading?

How to handle Lazy Loading?

So the solution to your problem is to scroll down the web page where your element is visible. Make sure you do not scroll it down completely at a go, as if you directly reach the bottom of the page, then again it will not load the middle web page. 

So your interested element will be active only when you load that part of the page.

Here to scroll the page we are using Java- Script

The Syntax is as follows:-

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

So, the general Steps to Handle Lazy Loading scenarios are:-
  1. First, redirect to the page where you are getting a lazy loading scenario
  2. Define JavascripExecutor
  3. Use JavascripExecutor to scroll to page height
  4. Wait for 1-2 seconds for new images/content to get load
  5. Here you can put condition to check whether the page has reached to the bottom or not. By comparing total current elements loaded after scrolling down page with the previous total elements loaded.
  6. Again repeat step no. 3 to 5 to scroll the page if page has not reached to the bottom.

The Below Code shows the lazy loading handling on Pinterest. 

The Source Code for this topic is available on GitHub Repository, You can get it from this URL:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
package com.lazyloading.ui.test;

import java.util.NoSuchElementException;
import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

public class LazyLoading {

	WebDriver driver;
	String emailId = "emailId";
	String password = "password";

	@BeforeMethod
	public void setup() {

		System.setProperty("webdriver.chrome.driver", "/Users/ShubhamPatil/Desktop/chromedriver");
		driver = new ChromeDriver();
		driver.get("https://www.pinterest.com");
		driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
	}

	@Test
	public void test() throws InterruptedException {

		driver.findElement(By.xpath("//div[text()='Log in']")).click();
		driver.findElement(By.id("email")).sendKeys(emailId);
		driver.findElement(By.id("password")).sendKeys(password);
		driver.findElement(By.xpath("(//div[text()='Log in'])[2]")).click();

		Assert.assertTrue(driver.findElement(By.xpath("//span[text()='Home']")).isDisplayed(),
				"Home Page is not displayed");

		By elementLocator = By.xpath("//img[@loading='auto']");

		// Calling the locateElement method, to fetch all elements
		locateElement(elementLocator);
	}

	public void locateElement(By elementLocator) throws InterruptedException {
		WebDriverWait wait = new WebDriverWait(driver, 10);
		JavascriptExecutor js = (JavascriptExecutor) driver;

		// Initial element count
		int elementCount = driver.findElements(elementLocator).size();

		while (true) {
			// javascriptexecutor to scroll the page
			js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

			wait.ignoring(NoSuchElementException.class)
					.until(ExpectedConditions.invisibilityOfElementLocated(elementLocator));

			// Wait to load the new elements
			Thread.sleep(2000);

			// Check if the last fetch element count is same as new count,
			// If it's same then we already have fetch all the elements on the page.
			if (driver.findElements(elementLocator).size() == elementCount)
				break;

			// fetch the latest elements count
			elementCount = driver.findElements(elementLocator).size();
		}
	}

}


The Source Code for this topic is available on GitHub Repository, You can get it from this URL:-



If You like my post please like & Follow the blog, And get upcoming interesting topics.