Element is clickable when ran in debug mode, but ran normally throws ElementClickInterceptedException

Question

I am trying to do web automation. I am defining a pop-up menu containing a button defined with either xpath or css respectively as

• XPath:-->: //button[contains(text(), 'Open Door')

• CSS:-->: div.device-item.content.view-content > div.detail > div > button.btn.btn-primary.ng-star-inserted

While all is well, it throws

org.openqa.selenium.ElementClickInterceptedException: element click intercepted:

when I am debugging the test one step at a time, it runs successfully by clicking the button, with out any problem. But when I am running the test, it fails. I hope it is not a wait issue, as we apply check waiting for the presence of the button and verify it exists and clickable.

I believe many would advice to use JavaScriptExecutor approach, but our framework has a problem of returning any web element as a custom object called "Element" which is neither Web Element nor sub class of it, but extends Object and implements an interface called IElement, so we can't use JavaScriptExecutor method since it needs Web Element form of the button which we want to click on.

Answer 1

If it works in debug it means the overlay disappear automatically. You can wait for it to vanish

WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("[id^='device-card']")));

And in any case you can wait for the button to be clickable

button = wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[contains(text(), 'Open Door')")));
button.click();

Answer 2

It will look something like:

driver.executeScript("document.querySelector('button.btn').click()")

Just adjust the css

Answer 3

There are a couple of things you need to take care:

• XPath //button[contains(text(), 'Open Door'): This xpath can be optimized further in either of the formats:
  • //button[text()='Open Door']
  • //button[contains(., 'Open Door')]
• CSS: div.device-item.content.view-content > div.detail > div > button.btn.btn-primary.ng-star-inserted looks good however I strongly believe button.btn.btn-primary.ng-star-inserted would also work.
• "...Executes successfully in debug mode...": As the browser client gets ample time to settle the webpage dynamics and the desired WebElement gets enough time to get interactive.
• "...we amply check waiting for the presence of the button and verify it exists and clickable...": Is a myth as:
  • presenceOfElementLocated(): Is the expectation for checking that an element is present on the DOM of a page. This does not necessarily mean that the element is visible.
• where as:
  • elementToBeClickable(): Is the expectation for checking an element is visible and enabled such that you can click it.
• As your usecase is to invoke click() on the element you need to use the ExpectedConditions as elementToBeClickable().

• Example:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("css_element"))).click();
  

You can find a detailed discussion in What is the most efficient way to wait for a page element (xpath) to show up in Selenium Webdriver?

• Finally, when using the Selenium java clients, of coarse there are methods from JavascriptExecutor but that should be the last resort.

---

Update

As you are still seeing the error ...ElementClickInterceptedException: element click intercepted..., you can add an additional step to induce WebDriverWait for the invisibility and you can use either of the following options:

• invisibilityOf(WebElement element):

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOf(overlapping_webelement));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("css_clickable_element"))).click();
  

• invisibilityOfElementLocated(By locator):

  new WebDriverWait(driver, 20).until(ExpectedConditions.invisibilityOfElementLocated(By.cssSelector("css_overlapping_element")));
  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("css_clickable_element"))).click();
  

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

Answer 4

1. you can move the mouse to that element and then click on it, even I was facing this issue and this solution solved it

   Actions clickOnBtn = new Actions(driver);
   clickOnBtn .moveToElement("//button[contains(text(), 'Open Door')").click().build().perform;
   

2. this happens even when the element is not visible completely onscreen, in this case you can scroll to that element and then use the above code as shown below

   JavascriptExecutor jse2 = (JavascriptExecutor)driver;
   jse2.executeScript("arguments[0].scrollIntoView()", ele); 
   Actions clickOnBtn = new Actions(driver);
   clickOnBtn .moveToElement("//button[contains(text(), 'Open Door')").click().build().perform;
   

3. click element using javascriptExecutor

   JavascriptExecutor executor = (JavascriptExecutor)driver;
   executor.executeScript("arguments[0].click();", ele);
   

4. This even happens sometimes with the way we selected the element, the xpath can be changed, we can try to use a parent tag rather than the button and try

Answer 5

you can define your own ExpectedCondition with click action:

public class SuccessfulClick implements ExpectedCondition<Boolean> {
    private WebElement element;

    public SuccessfulClick(WebElement element) { //WebElement element
        this.element = element;
    }

    @Override
    public Boolean apply(WebDriver driver) {
        try {
            element.click();
            return true;
        } catch (ElementClickInterceptedException | StaleElementReferenceException | NoSuchElementException e) {
            return false;
        }
    }
}

and then use it:

wait10.until(elementToBeClickable(btn));
wait10.until(new SuccessfulClick(btn));