Getting Element is not clickable exception while click on a menu link

Question

I am trying to click on a menu link but not have any luck. It always showing exception -

Exception in thread "main" org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (64, 64). Other element would receive the click: < div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4;">

I have following html snippet

<div id="RWR" class="clsDesktopHome" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; overflow: auto;">
    <div class="clsDesktop clsDesktopHomePage" style="width: 1553px; height: 430px; top: 0px; left: 15px;">
        <div id="foid:2" class="clsDesktopHeader clsTextOnDesktopColor">
            <div id="foid:1" class="clsDesktopTabs" style="margin-right: 230px; height: 28px; visibility: visible; width: auto;">
                <span class="clsDesktopTab clsDesktopTabActive clsDesktopTabTypeHome clsDesktopTabTypeHomeActive">
                    <span class="clsDesktopTabContent">
                        <span class="clsDesktopTabTypeIcon"></span>
                        <span class="clsDesktopTabMenuIcon"></span>
                        <span class="clsDesktopTabCollaborationIcon"></span>
                        <span class="clsDesktopTabCaption">Home</span>
                        <span class="clsDesktopTabCloseIcon"></span>
                    </span>
                </span>
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabInactive clsDesktopTabCanClose clsDesktopTabTypeSheet">
                <span class="clsDesktopTab clsDesktopTabHidden clsDesktopTabNoCaption clsDesktopTabTypeTabsMenu">
                <span class="clsDesktopTab clsDesktopTabInactive clsAddNewContainer clsDesktopTabTypeAddNew">
            </div>
        <div class="clsDesktopBelowTabs" style="height: 325px; visibility: visible;">
        <div id="foid:2" class="clsDesktopFooter clsTextOnDesktopColor" style="height: 18px; line-height: 18px;">
    </div>
    <div class="clsModalNode" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 10; background-color: rgb(0, 0, 0);"></div>
    <div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4; display: none;"></div>
</div>

And this is the snapshot how it looking like -

I'm using following code to accomplish the same -

    WebElement element = driver.findElement(By.xpath(".//*[@id='foid:1']/span[1]/span/span[4]"));
    WebDriverWait wait = new WebDriverWait(driver, 120);
    wait.until(ExpectedConditions.elementToBeClickable(element));

   //driver.findElement(By.xpath("//span[contains(text(), 'Home')]")).click();

    driver.findElement(By.xpath(".//*[@id='foid:1']/span[1]/span/span[4]")).click();

I did inspect the <div> tag in DOM which accepting the click. But I'm seeing this

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4;"></div>

with one additional attribute i.e. display:none;

Using following configurations:

Selenium 3.0.1
Driver -ChromeDriver

I don't know to to handle this situation.

Could you share more HTML with other tabs structure as well?? — Saurabh Gaur, Jan 13 '17 at 10:37
@amaurya123 I've tried `JavascriptExecuter`. not showing that exception but button didn't get clicked — NarendraR, Jan 13 '17 at 10:38
http://stackoverflow.com/questions/11908249/debugging-element-is-not-clickable-at-point-error — amaurya123, Jan 13 '17 at 10:41

Andersson · Accepted Answer · 2017-01-17T19:08:54.160

Try to wait until element that gets click disappeared:

new WebDriverWait(driver, 10).until(ExpectedConditions.invisibilityOfElementLocated(By.xpath('//div[@style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 30; background-color: rgb(221, 221, 221); opacity: 0.4;"]')));

As this answer was downvoted, I add some more details to explain why it could be acceptable solution.

It's a known issue (I personally have faced it few times) of chromedriver: chromedriver sometimes ignores modal windows such as "Page loading in progress"

and "thinks" that target element (that is covered by modal window) actually visible and clickable and tries to make click which is received by modal window.

So it makes sense to wait until modal window disappeared.

@Andersson, You are absolutely right. This solution is working for me. Thanks — NarendraR, Jan 13 '17 at 10:58

score 0 · Answer 2 · answered Jun 18 '17 at 12:15

0

I had the same problem and tried many solution but it didn't work.Lastly i saw selenium docs and found stalenessof

new WebDriverWait(driver, 10).until(ExpectedConditions.stalenessOf(findElement(By.xpath("element_path"))));

It should work now.

answered Jun 18 '17 at 12:15

hello

33
8

Getting Element is not clickable exception while click on a menu link

2 Answers2

Linked