Element is not clickable at point because another element obscures it

Question

I am using Selenium webdriver and i got the following exception

org.openqa.selenium.ElementClickInterceptedException: Element <div id="nav-icon3"> is not clickable at point (21,37) because another element <div class="loader-section section-left"> obscures it
Build info: version: '3.141.59', revision: 'e82be7d358', time: '
Driver info: org.openqa.selenium.firefox.FirefoxDriver

Session ID: 868f9daa-dd6c-4b53-846d-7323e7b0408e
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)

My code is given below.

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
      WebElement element = driver.findElement(By.id("nav-icon3"));
      JavascriptExecutor executor = (JavascriptExecutor)driver;
      executor.executeScript("arguments[0].click()", element);
    driver.findElement(By.id("nav-icon3")).click();
      driver.findElement(By.xpath("//ul[@id='slide-out']/li/ul/li[2]/a")).click();
      driver.findElement(By.xpath("//ul[@id='slide-out']/li/ul/li[2]/div/ul/li/a")).click();
      driver.findElement(By.id("newTravelerLink")).click();

Answer 1

If you code a method to wait you can use that wait method in your project

private static WebElement waitForElement(By locator, int timeout)
{
    WebElement element=new WebDriverWait(driver,timeout).until(ExpectedConditions.presenceOfElementLocated(locator));
    return element;
}

The above code is wait method

If you want to use this method

---

waitForElement(By.xpath("//button[@type='submit']"),50); This for example ,you can use your web element here

Answer 2

This error message...

org.openqa.selenium.ElementClickInterceptedException: Element <div id="nav-icon3"> is not clickable at point (21,37) because another element <div class="loader-section section-left"> obscures it

...implies that the element <div id="nav-icon3"> can't be clicked as the element <div class="loader-section section-left"> obsecures it.

---

Solution

To click() on the element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following Locator Strategies:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#nav-icon3"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@id='nav-icon3']"))).click();
  

Incase the click() still fails you need to induce WebDriverWait either for invisibilityOf() as follows:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOf(driver.findElement(By.cssSelector("div.loader-section.section-left"))));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#nav-icon3"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOf(driver.findElement(By.xpath("//div[@class='loader-section section-left']"))));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@id='nav-icon3']"))).click();
  

Or for invisibilityOfElementLocated() as follows:

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("div.loader-section.section-left")));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div#nav-icon3"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath("//div[@class='loader-section section-left']")));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[@id='nav-icon3']"))).click();
  

---

Reference

You can find a couple of relevant detailed discussions in:

• How to wait until all loaders disappears using Selenium WebDriver through Java

Answer 3

I've encountered this problem while doing an adFly bot.

Using waits or similar methods is often useless, don't rely on using elementobeclickable() too.

The only way to get around it is to get all the element at that position and remove all of those from the page except the one you're interested in.

Step 1:

Get the X and Y Points of EVERY div, iframe, span in the page. Try out these three WebElements first (using getX() and getY() methods of Point (https://www.programcreek.com/java-api-examples/?class=org.openqa.selenium.Point&method=getX) through a cycle.

put them all in an ArrayList called let's say, overlappingElements,

then remove from the ArrayList the obscuredElement.

Step 2:

Remove every WebElement that overlap over your WebElement in another cycle.

JavaScriptExecutor jsExecutor = (JavaScriptExecutor) driver;

for(int i = 0; i < overlappingElements.size(); i++) {

jsExecutor.executeScript(
    "arguments[0].parentNode.removeChild(arguments[0])", overlappingElements.get(i));

}

Step 3: Just click() on obscuredElement.