Selenium: Waiting for an element do disappear

Question

I posed with a difficult task. I am fairly new to selenium and still working through the functionalities of waiting for elements and alike.

I have to manipulate some data on a website and then proceed to another. Problem: the manipulation invokes a script that makes a little "Saving..." label appear while the manipulated data is being processed in the background. I have to wait until I can proceed to the next website.

So here it is: How do i wait for and element to DISAPPEAR? Thing is: It is always present in the DOM but only made visible by some script (I suppose, see image below).

This is what I tried but it just doesn't work - there is no waiting, selenium just proceeds to the next step (and gets stuck with an alert asking me if I want to leave or stay on the page because of the "saving...").

private By savingLableLocator = By.id("lblOrderHeaderSaving");

    public boolean waitForSavingDone(By webelementLocator, Integer seconds){
    WebDriverWait wait = new WebDriverWait(driver, seconds);
    Boolean element = wait.until(ExpectedConditions.invisibilityOfElementLocated(webelementLocator));
    return element;
}

UPDATE / SOLUTION:

I came up ith the following solution: I built my own method. Basically it checks in a loop for the CssValue to change.

the loops checks for a certain amount of time for the CSSVALUE "display" to go from "block" to another state.

public void waitForSavingOrderHeaderDone(Integer _seconds){
    WebElement savingLbl = driver.findElement(By.id("lblOrderHeaderSaving"));   
    for (int second = 0;; second++) {
        if (second >= _seconds)
            System.out.println("Waiting for changes to be saved...");
        try {
            if (!("block".equals(savingLbl.getCssValue("display"))))
                break;
        } catch (Exception e) {

        }
    }

Solution 1

You can wait for a WebElement to throw a StaleElementReferenceException like this:

public void waitForInvisibility(WebElement webElement, int maxSeconds) {
    Long startTime = System.currentTimeMillis();
    try {
        while (System.currentTimeMillis() - startTime < maxSeconds * 1000 && webElement.isDisplayed()) {}
    } catch (StaleElementReferenceException e) {
        return;
    }
}

So you would pass in the WebElement you want to wait for, and the max amount of seconds you want to wait.

Solution 2

Webdriver has built in waiting functionality you just need to build in the condition to wait for.

Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
   .withTimeout(30, SECONDS)
   .pollingEvery(5, SECONDS)
   .ignoring(NoSuchElementException.class);

WebElement foo = wait.until(new Function<WebDriver, WebElement>() {
 public WebElement apply(WebDriver driver) {
   return (driver.findElements(By.id("lblOrderHeaderSaving")).size() == 0);
 }
});

Solution 3

I'm not sure, but you can try something like this :)

driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //time in second
WebElement we = driver.findElement(By.id("lblOrderHeaderSaving"));   
assertEquals("none", we.getCssValue("display"));

Comments

[Christoph Zabinski]

The IDE (Eclipse) wants me to change the return type of the Webelement foo to boolean - Why ? It tell me to change "public WebElement apply(WebDriver driver) {..." to "public boolean apply(WebDriver driver) {..." Hint from the IDE: "cannot convert from boolean to WebElement"

[Christoph Zabinski]

Eventually this is KIND of what I did to come up with a solution. The key was using the CssValue and checking it's state in a loop. then proceed.

[daniel.kahlenberg]

@christoph-zabinski If you change the suggestion (the second statement WebElement...) @nguyen-vu-hoang makes slightly it will work: WebElement foo = wait.until(ExpectedConditions.invisibilityOfElementLocated(B‌​y.id("lblOrderHeader‌​Saving")));