Wait for "loading" icon to disappear from the page

Question

We are doing automation for a web application and most of the scenarios have a loading icon appearing at the center of a page. We need to wait for this loading icon to disappear.

The HTML:

<div id="loading" style="display: none; visibility: hidden;">
<div></div>
<div></div> 

Example: We have search functionality in most of the scenarios. We are getting this loading icon while the search executes.

With the Selenium webdriver, we are using the ID.

We are getting for loading to complete id= "loading". Please any give any solution for the above issues I am facing.

We have a variety of subsequent testing functionality like clicks & sendkeys that can only be used once loading is complete.

Kumkumagai

Answer 1

Explicit Wait should help:

public static String waitForElementNotVisible(int timeOutInSeconds, WebDriver driver, String elementXPath) {
    if ((driver == null) || (elementXPath == null) || elementXPath.isEmpty()) {

        return "Wrong usage of WaitforElementNotVisible()";
    }
    try {
        (new WebDriverWait(driver, timeOutInSeconds)).until(ExpectedConditions.invisibilityOfElementLocated(By
                .xpath(elementXPath)));
        return null;
    } catch (TimeoutException e) {
        return "Build your own errormessage...";
    }
}

Proto

I have also used Explicit wait condition for the invisibility of loading icon. But still sometimes I face problems. One thing I noticed is there is some mili-seconds gap between the display of loading symbol & on click on any search icon. If our code executes between this period then we will face issues again. – Terhune

Answer 2

I have recently faced this issue. My solution might sound hacky but it worked pretty well in my case:

public static void loadingWait(WebDriver driver, WebElement loader) {
    WebDriverWait wait = new WebDriverWait(driver, 5000L);
    wait.until(ExpectedConditions.visibilityOf(loader)); // wait for loader to appear
    wait.until(ExpectedConditions.invisibilityOf(loader)); // wait for loader to disappear
}

you can call this method after clicking on submit button. You have to pass driver, and loader web element to this method.

Tetrahedron

What if the element appears ONLY if the process takes too long? – Udo

Answer 3

I faced this issue and the solution is really simple :

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("path_of_loader")));

Generally, you must have something like this on your website:

So use path_of_loader = //div[@id='circular3dG']

... you can also try searching using keywords like loader, spinner or use a page to inspect loader/spinner where it takes long to load the page.

Inspect

Answer 4

You can also wait till the ajax calls have been completed. Loading wheel disappears when all the ajax calls have completed (in most of the scenarios):

WebDriverWait wait = new WebDriverWait(d, timeOutSeconds);
wait.until(waitForAjaxCalls()); 

public static ExpectedCondition<Boolean> waitForAjaxCalls() {
        return new ExpectedCondition<Boolean>() {
            @Override
            public Boolean apply(WebDriver driver) {
                return Boolean.valueOf(((JavascriptExecutor) driver).executeScript("return (window.angular !== undefined) && (angular.element(document).injector() !== undefined) && (angular.element(document).injector().get('$http').pendingRequests.length === 0)").toString());
            }
        };
    }

Jesusitajet

The above will only work in case of the website is using angular. – Latter