Wait for AJAX and HTTP Calls to Complete

⚡Scenario Overview

Wait for AJAX and HTTP Calls to Complete

Key Takeaways & Cheat Sheet

✓Understand JavaScript jQuery active requests and fetch/XHR states
✓Execute JS script to check if jQuery.active == 0 in legacy apps
✓Leverage modern custom waits on specific DOM changes if jQuery is not used
✓Avoid hardcoded sleeps after submitting async forms

Short Direct Answer

Asynchronous AJAX requests update sections of a page without a full page reload. To sync tests with these changes, you can monitor the application's network state. For legacy applications using jQuery, check `jQuery.active == 0` via the JavaScript Executor. For modern SPA frameworks, track specific DOM shifts or use a custom wait condition targeting loader indicators.

⚠️ Senior Warning (Red Flag)

Do not assume jQuery.active is available on all modern web apps. Modern React/Angular applications use Fetch API or Axios, which do not register on jQuery.active. Check for specific element content instead.

💡 STAR Deep Dive Explanation & Pro Tip

Always prefer waiting for specific target elements or state indicators over arbitrary framework-level network status checks.

SeleniumAutomation.java

Selenium 4 + Java

// ✅ Wait for legacy jQuery AJAX calls to complete
public boolean waitForJQueryAJAX(WebDriver driver) {
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(15));
    return wait.until(d -> (Boolean) ((JavascriptExecutor) d)
        .executeScript("return typeof jQuery != 'undefined' ? jQuery.active == 0 : true"));
}

// ✅ Wait for modern Fetch API / DOM stabilization
public void waitForDomStabilization() {
    new WebDriverWait(driver, Duration.ofSeconds(10)).until(
        d -> ((JavascriptExecutor) d)
            .executeScript("return document.readyState").equals("complete")
    );
}