Wait for complex page with JavaScript to load using Selenium.

We can wait for a complex page with JavaScript to load with Selenium. After the page is loaded, we can invoke the Javascript method document.readyState and wait till complete is returned.

Understanding document.readyState

The document.readyState property returns the loading status of the document. It has three possible values:

• loading - The document is still loading
• interactive - Document has finished loading but sub-resources may still be loading
• complete - The document and all sub-resources have finished loading

Syntax

JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("return document.readyState").toString().equals("complete");

Method 1: Using document.readyState Check

This method checks if the page DOM is completely loaded by verifying the document ready state.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;

public class PageLoadCheck {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        
        try {
            driver.get("https://www.tutorialspoint.com/index.htm");
            
            // Javascript Executor to check page ready state
            JavascriptExecutor js = (JavascriptExecutor)driver;
            if (js.executeScript("return document.readyState").toString().equals("complete")) {
                System.out.println("Page loaded completely.");
            }
            
            // Perform actions after page load
            WebElement searchBox = driver.findElement(By.id("search-input"));
            searchBox.sendKeys("Selenium");
            
        } catch(Exception e) {
            System.out.println("Error: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

Method 2: Combining with Explicit Wait

For better reliability, combine document.readyState check with explicit wait for specific elements to be present.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.JavascriptExecutor;
import java.time.Duration;

public class CompletePageLoadWait {
    public static void main(String[] args) {
        WebDriver driver = new ChromeDriver();
        
        try {
            driver.get("https://www.tutorialspoint.com/index.htm");
            
            // Check document ready state
            JavascriptExecutor js = (JavascriptExecutor)driver;
            if (js.executeScript("return document.readyState").toString().equals("complete")) {
                System.out.println("Page DOM loaded completely.");
            }
            
            // Wait for specific element to be present
            WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
            wait.until(ExpectedConditions.presenceOfElementLocated(By.id("search-input")));
            
            // Element is now ready for interaction
            driver.findElement(By.id("search-input")).sendKeys("Selenium WebDriver");
            System.out.println("Successfully interacted with the page element.");
            
        } catch(Exception e) {
            System.out.println("Element not located or page not loaded: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

Best Practices

Key Points

• Always use try-catch blocks when waiting for page elements
• Combine document.readyState with explicit waits for better reliability
• Set appropriate timeout values based on your application's loading time
• Consider using WebDriverWait with custom expected conditions for complex scenarios

Conclusion

Using document.readyState with explicit waits provides the most reliable approach for handling complex JavaScript-heavy pages in Selenium. This combination ensures both DOM readiness and element availability before interaction.