Element is not clickable when another element covers it

Question

I am writing a test that at some point navigates to another page. The first thing that page is will be to run a javascript that pops up a span with a message. After some seconds, that span will dissapear.

I am trying to click a link that will go below the span and chromedriver does not seem to allow that.

System.InvalidOperationException: unknown error: Element is not clickable at point (165, 177). Other element would receive the click: ...

This is really an expected behavior and also a bit impresssive.

Can I click the link without waiting for the span to dissapear?

Possible duplicate of [Debugging "Element is not clickable at point" error](https://stackoverflow.com/questions/11908249/debugging-element-is-not-clickable-at-point-error) — Mate Mrše, Apr 24 '19 at 08:28

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

I have no suggestion how to click the element as long as the massage is displayed but you could skip waiting for it to disappear by removing it on your own using javascript and webDriver.executeScript:

How to make a DIV visible and invisible with JavaScript

edited May 23 '17 at 12:27

Community

1
1

answered Nov 12 '14 at 11:53

Sebastian

5,721
3
43
69

Johnny · Answer 2 · 2014-11-13T09:05:43.583

I would suggest you to use "smart" wait that will verify that the window has disappeared. It's implemented using WebDriverWait and ExpectedConditions.

Example in Java:

WebDriverWait wait = new WebDriverWait(driver, 10); //timeout after 10 seconds 
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.ByCssSelector("CSS_POP_UP_SELECTOR")));

Or, you can try to use the following script to make element visible:

JavascriptExecutor executor = (JavascriptExecutor)driver; executor.executeScript("document.getElementById('BUTTON_ELEMENT_ID').style.display='block';");

Or, to try and hide the message:

JavascriptExecutor executor = (JavascriptExecutor)driver; executor.executeScript("document.getElementById('BUTTON_ELEMENT_ID').style.display='none';");

If you want your elements to keep their size when the not visible/visible, instead of 'display' change the 'visibility':

document.getElementById('BUTTON_ELEMENT_ID').style.visibility = 'hidden'; 
document.getElementById('BUTTON_ELEMENT_ID').style.visibility = 'visible';

Thanks, but I need to have tests running as fast as possible! — Anders Lindén, Nov 13 '14 at 07:29
Ok, i edited the answer with fuller explanation how to make element s disappear/appear. — Johnny, Nov 13 '14 at 09:06

Element is not clickable when another element covers it

2 Answers2