pause code execution while progress bar is displayed

Question

I have this code which is used to display in angular spa application progress bar:

Other element would receive the click: <div _ngcontent-nne-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>

I tried to use this code in order to stop java code with selenium execution while code is displayed:

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

But unfortunately it's not working.

Do you know how I can properly implement this?

Answer 1

You were pretty close. As per your code trials:

By.xpath("//div[@class='ngx-spinner-overlay']")

would match to the <div> having the only classname ngx-spinner-overlay, which isn't the case here.

---

Solution

You can use either of the following locator strategies:

• Using cssSelector:

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

• Using xpath:

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