In Selenium Webdriver, ExpectedCondition.elementToBeClickable is not waiting until the progress bar disappears

Question

This question is similar to the one below:
i.e. How to wait till Progress bar disappears.
How to wait dynamically until the progress bar to load completely in Selenium Webdriver?

My situation is a bit different. In my scenario, all the elements are disabled when the progress bar appears. I am using explicit wait but still getting the exception.

Scenario: After providing all the details in the Signup Page the script clicks on the "Create Account" button. At this point a circular progress bar appears and it persists for 1 or 2 seconds. If the password entered is invalid the error message is displayed at the top of the Signup page. I now need to click on the "Cancel" button and repeat the process.

When the progress bar appears the whole page is disabled. The user will be able to continue only after the disappearance of the progress bar.

Here's my code:

WebDriverWait myWaitVar = new WebDriverWait(driver,20);

After clicking on the "Create Account" button the progress bar is displayed. The code should now wait until the "Cancel" button appears.

//Click on the "Create Account" button.
driver.findElement(By.id("createAccount")).click();

//Wait till the "Cancel" button shows up -- this may take some time.
myWaitVar.until(ExpectedConditions.elementToBeClickable (By.id("cancelRegister")));

//Click on the "Cancel" button.
driver.findElement(By.id("cancelRegister")).click();

When I execute the above code I always get NoSuchElementException at the last line.

I tried with ExpectedCondition.visibilityOfElement() but this also produces NoSuchElementException.

The only way I can get it to work is by forcing it to sleep:

Thread.sleep(3000);

The script works fine with the sleep.

Why doesn't WebDriverWait wait until the progress bar disappears? The code successfully parses the elementToBeClickable() but it always throws an exception when the "Cancel" button is clicked.

Answer 1

ExpectedConditions.elementToBeClickable returns element if condition will be true means it returns element if element appears on the page and clickable, No need to find this element again, just omit last line as below :-

//Click on Create Account btn:
driver.findElement(By.id("createAccount")).click();

//Wait till "Cancel" button is showing up. At cases, it may take some time.
WebElement el = myWaitVar.until(ExpectedConditions.elementToBeClickable(By.id("cancelRegister")));
el.click();

Edited1 :- If you're unable to click due to other element receive click you can use JavascriptExecutor to perform click as below :

//Click on Create Account btn:
driver.findElement(By.id("createAccount")).click();

//Wait till "Cancel" button is showing up. At cases, it may take some time.
WebElement el = myWaitVar.until(ExpectedConditions.elementToBeClickable(By.id("cancelRegister")));
((JavascriptExecutor)driver).executeScript("arguments[0].click()", el); 

Edited2 :- It seems from provided exception, progress bar still overlay on cancelRegister button. So best way is to wait for invisibility of progress bar first then wait for visibility of cancelRegister button as below :

//Click on Create Account btn:
driver.findElement(By.id("createAccount")).click();

//Now wait for invisibility of progress bar first 
myWaitVar.until(ExpectedConditions.invisibilityOfElementLocated(By.id("page_loader")));

//Now wait till "Cancel" button is showing up. At cases, it may take some time.
WebElement el = myWaitVar.until(ExpectedConditions.elementToBeClickable(By.id("cancelRegister")));
el.click();

Hope it works...:)

Answer 2

You can have a wait there to make sure that progress bar disappears.

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("progressbar")).size() == 0);
 }
});