How to wait for an item to finish loading?

Question

Well, I'm testing on a page designed in Angular and Java with Selenium. When a query is made to the database or the page loads in its code this appears:

<span _ngcontent-c0 class = "loading"> </span>

When it finishes loading, it changes like this:

<span _ngcontent-c0 class = "loading" hidden> </span>

My problem is that this "loading" is intercepting the clicks that I sent in the test:

org.openqa.selenium.ElementClickInterceptedException: element click intercepted: Element <a class="white-text" id="aaidEntidadBancaria" title="Apply"> ... </a> is not clickable at point (460, 502) . Other element would receive the click: <span _ngcontent-c0 = "" class = "loading"> </span>

what kind of wait could i use? I already tried invisibilityOfElementLocated (locator) but it didn't work ...

Answer 1

You need to wait for the loader to be invisible or hidden inducing WebDriverWait for the invisibilityOfElementLocated() and you can use either of the following Locator Strategies:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("span.loading)));
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//span[@class='loading'])));
  

You can find a relevant discussion in Selenium invisibilityOf(element) method throwing NoSuchElementException + WebDriverWait.ignoring(NoSuchElementException.class) is not working

---

Once the loader is invisible or hidden you can induce WebDriverWait for the elementToBeClickable() and invoke click() as follows:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("span.loading)));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("a.white-text#aaidEntidadBancaria[title='Apply']"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//span[@class='loading'])));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//a[@class='white-text' and @id='aaidEntidadBancaria'][@title='Apply']"))).click();
  

You can find a relevant discussion in Element MyElement is not clickable at point (x, y)… Other element would receive the click

Answer 2

If invisibility_of_element_located is not working for you, you can try to work around the ClickIntercepted issue by using Javascript click:

# locate clickable element
clickable_element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.XPATH, "//a[@title='Apply']")))

# click with Javascript
driver.execute_script("arguments[0].click();", clickable_element)