'How to wait for an item to finish loading?

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 ...

javaseleniumxpathcss-selectorswebdriverwait


Solution 1:[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

Solution 2:[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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 CEH

Related Questions