How to wait until div layer is hidden

Question

I have this code which is used to click on a dropdown button:

Wait until is hidden:

new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[contains(@class, 'ngx-spinner-overlay')]")));
new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.ngx-spinner-overlay")));

Code to click on a button:

Thread.sleep(4000);
WebDriverWait button2Wait = new WebDriverWait(driver, Duration.ofSeconds(timeout));
WebElement button2 = button2Wait.until(ExpectedConditions.elementToBeClickable(By.xpath(dropDownId)));
new Actions(driver).moveToElement(button2).build().perform();
button2.click();

But from time to time I get exception:

org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <mobileweb-value-selector _ngcontent-jkb-c228="" id="equipment" selectorskin="component" property.id="equipmentId" property.name="equipmentLookupCode" _nghost-jkb-c212="" class="ng-star-inserted">...</mobileweb-value-selector> is not clickable at point (694, 368). Other element would receive the click: <div _ngcontent-jkb-c171="" class="ngx-spinner-overlay ng-tns-c171-0 ng-trigger ng-trigger-fadeIn ng-star-inserted ng-animating" style="background-color: rgba(255, 255, 255, 0.75); z-index: 99999; position: fixed;">...</div>
  (Session info: chrome=110.0.5481.177)

Do you know how I can implement a code which waits until this div layer is hidden?

Answer 1

you can just wait until the overlay div layer is hidden using the ExpectedConditions class and the invisibilityOfElementLocated method.

the below code will first wait for the overlay div layer to be hidden using the invisibilityOfElementLocated method. Once the overlay is hidden, it will click on the dropdown button. This should help avoid the ElementClickInterceptedException caused by the overlay layer intercepting the click.

// Wait for overlay to be hidden
new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.ngx-spinner-overlay")));

// Click on dropdown button
Thread.sleep(4000);
WebDriverWait button2Wait = new WebDriverWait(driver, Duration.ofSeconds(timeout));
WebElement button2 = button2Wait.until(ExpectedConditions.elementToBeClickable(By.xpath(dropDownId)));
new Actions(driver).moveToElement(button2).build().perform();
button2.click();

Answer 2

First thing first, I don't see any error/issue as such in your code block.

As per the spec Element Click by default scrolls into view. So from a generic perspective using Actions seems to me a overhead.

---

This usecase

As a best attempt, I would prefer the folling lines of code:

new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.ngx-spinner-overlay")));
new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.elementToBeClickable(By.xpath(dropDownId))).click();

Incase the attempt fails, using Actions and clicking within the chain as:

new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.ngx-spinner-overlay")));
WebElement button2 = new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.elementToBeClickable(By.xpath(dropDownId)));
new Actions(driver).moveToElement(button2).click(button2).build().perform();

Incase the Actions attempt fails, then using the executeScript() method from JavascriptExecutor as follows:

new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.ngx-spinner-overlay")));
WebElement button2 = new WebDriverWait(driver, Duration.ofSeconds(timeout)).until(ExpectedConditions.elementToBeClickable(By.xpath(dropDownId)));
((JavascriptExecutor)driver).executeScript("arguments[0].click();", button2);