Loadable Components In Selenium: Make Your Test Robust For Slow Loading Web Pages

A Loadable Component in Selenium is a PageObject that extends the LoadableComponent class, checks isLoaded(), and calls load() again when a page has not finished rendering. The get() method calls isLoaded() first and only falls back to load(), so the retry happens automatically instead of a fixed sleep or a hardcoded delay. This guide covers extending LoadableComponent, implementing load() and isLoaded(), a Java PageObject example, and how AI-driven wait strategies now handle the same slow-loading-page problem.

The component that’s gonna help us in page loading is an extended version of Page Object Model pattern called Loadable component. The Selenium LoadableComponent class extends PageObject to check isLoaded() and retry load(), keeping automation tests reliable on slow-loading web pages.

On a side note, to make your life of testing easy and fuss-free while debugging, you can try the LT Debug Chrome extension.

To start with, we would first have to make sure that all the PageObject classes extends the abstract LoadableComponent class and in turn provide implementation for the following two methods:

• protected abstract void load()
• protected abstract void isLoaded() throws java.lang.Error

Code to ensure whether the page or component inside the page is completely loaded in given in isLoaded(). If the page is not completely loaded, java.lang.Error is thrown

Fallback or mitigation code is given load(), if isLoaded() fails to load the complete page successfully.

Let’s take an example on how it works :

Suppose, we have a LoginPage with username, password and submit button.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.CacheLookup;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;

public class LoginPage {

private WebDriver driver;

@FindBy(id = "login_username")
private WebElement usernameInputBox;

@FindBy(id = "login_password")
private WebElement passwordInputBox;

@FindBy(id = "login_submit")
private WebElement loginButton;

public AdminLoginPageUsingLoadableComponent(WebDriver driver){
this.driver = driver;
PageFactory.initElements(driver, this);
}

public NextPage login(String loginUsername, String loginPassword){
usernameInputBox.sendKeys(loginUsername");
passwordInputBox.sendKeys(loginPassword");
loginButton.click();

return PageFactory.initElements(driver, NextPage.class);
}

}

Now, the above PageObject can be transformed using LoadableCompenent like below.

import org.junit.Assert;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.CacheLookup;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
import org.openqa.selenium.support.ui.LoadableComponent;

public class LoginPageUsingLoadableComponent extends LoadableCompenent {

private WebDriver driver;

@FindBy(id = "login_username")
private WebElement usernameInputBox;

@FindBy(id = "login_password")
private WebElement passwordInputBox;

@FindBy(id = "login_submit")
private WebElement loginButton;

public LoginPageUsingLoadableComponent(WebDriver driver){
this.driver = driver;
PageFactory.initElements(driver, this);
}

public NextPage login(String loginUsername, String loginPassword){
usernameInputBox.sendKeys(loginUsername");
passwordInputBox.sendKeys(loginPassword");
loginButton.click();

return PageFactory.initElements(driver, NextPage.class);
}

@Override
protected void load() {
driver.get("http://www.example.com/login");
}

@Override
protected void isLoaded() throws Error {
Assert.assertTrue(driver.getCurrentUrl().contains("login"));
}

}

LoginPageUsingLoadableComponent loginPage = new LoginPageUsingLoadableComponent(driver).get();

The get() method from the LoadableComponent class will ensure sure the page or the component is loaded by invoking the isLoaded() method. If the assertion fails there, load() method is called, followed by isLoaded().

Hope this article helps in stabilizing UI tests !!!

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email