<div id="loading" style="display: none;">
<div></div>
<div></div>
I tried to write a Selenium test to make sure this behavior is covered. I saw that the loading icon element is always available on DOM tree because I just used Jquery to handle its displaying. Beside that, the loading icon is appeared dynamically and quickly disappear afterwards. It is hard to checking the visibility on GUI of loading icon. By normal way that I frequently used, the code looks like:
public boolean isLoadingIconDisplayed() {
List<WebElement> loadingIcons = driver.findElements(By.id("loading"));
if(!loadingIcons.isEmpty()){
for(WebElement loadingIcon: loadingIcons){
if(loadingIcon.getCssValue("display").equals("none")){
return false;
}
}
};
return true;
}
But, it did not work. I thought that I need a waiter likes a listener to check this loading appearing before clicking on table. I found the solution with Explicit Waits:
public boolean isLoadingIconDisplayed() {
try {
(new WebDriverWait(driver, 3)).until(ExpectedConditions.invisibilityOfElementLocated(By.id("loading")));
return true;
} catch (Exception e) {
return false;
}
}
"An explicit waits is code you define to wait for a certain condition to occur before proceeding further in the code".
References:
[1]. http://stackoverflow.com/questions/25239856/wait-for-loading-icon-to-disappear-from-the-page
[2]. http://stackoverflow.com/questions/12779575/selenium-how-to-locate-dynamic-element-like-notification-messages
[3]. http://docs.seleniumhq.org/docs/04_webdriver_advanced.jsp