ChromeDriver -- The dreaded "Element is not clickable at point (x, y). Other element would receive the click

Question

I have a web app that I'm trying to write selenium tests for, and I have run into a problem with the Chrome driver. There is a wizard-type interface that users can employ to fill out a form. There is a button to add a row with a couple of settings. I have outlined this in black. The blue rectangle shows you the clickable area for the button. The middle of this rectangle is not overlapping anything else.

enter image description here

The problem is that there is a giant div that contains the whole screen and Chrome says that this div will get the click. So, how do I get around this? It doesn't seem like correct behavior that I can't click this button because there is a surrounding div tag. Almost nothing would be clickable if this were were proper behavior.

enter image description here

The button I want to click is this:

 <button id="add-thisSetting" class="btn">Add This Setting</button>

The surrounding div is:

 <div class="application-tour-overlay"></div>

Here is an abbreviated html source:

<div id="editBase">
  <div class="edit-buttons application_edit_controls">
    <div id="thingamajigSettings" class="application_thingamajig_settings">
      <div id="thisSetting" class="application_thissetting application-tour-spotlit">
        <div class="control-title">This Setting
        </div>
        <div class="thisSetting-block">
          <div>
            <div class="scrolling-table" style="overflow-y: auto; overflow-x: hidden;">
              <div class="add-thisSetting-bar">
                <div class="btn-group pull-right">
                  <button id="add-thisSetting" class="btn">Add This Setting</button>
                  <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <ul class="dropdown-menu">
                </div>
              </div>
            </div>
          </div>
          <div id="rulescontainer" class="application_rule_view">
            <div id="settings">
              <div class="edit-buttons application_edit_controls">
              </div>
            </div>
          </div>
          <div id="app_notify_manager" class="application_notify_manager">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="identityOfMe-widget-ft"></div>
<div id="jstree-marker" style="display: none;"></div>
<div class="application_tour">
  <div class="application-tour-overlay"></div>

What does the HTML of that surrounding `div` look like? What's the reason for it to be there in the first place? Sounds like you are fighting bad development practices. — Arran, Jun 18 '13 at 15:06
As a workaround, you can pass the style="display:none" attribute to this div. Here's the way to do this http://stackoverflow.com/a/8476765/1343698 — Furious Duck, Jun 18 '13 at 17:24
It's too long. I've edited the question and added the html source. — Selena, Jun 20 '13 at 18:42
Just wondering if you ever solved this issue? I'm running into the same issue — StormeHawke, Mar 20 '14 at 18:56

score 1 · Answer 1 · answered Nov 14 '14 at 03:34

Sometimes developer uses a full screen "div" to track actions, but Chrome webdriver cannot click anything when the "div" is shown and on the top. So you can use "z-index" attribute to hide it.

There is a example in C#: ((IJavaScriptExecutor)this.Driver).ExecuteScript("arguments[0].setAttribute('style', 'z-index: -1')", popup);

score 0 · Answer 2 · edited Jun 25 '13 at 13:24

0

try to use fire_event("click") instead of click ... it helped me.

edited Jun 25 '13 at 13:24

Smern

18,746
21
72
90

answered Jun 25 '13 at 12:57

Annet

673
1
7
17

score 0 · Answer 3 · edited May 23 '17 at 12:16

There is a similar question [here] (Debugging "Element is not clickable at point" error) with a lot of information. I have had a similar problem where I was unable to click a button on modal that was already in the DOM, but hidden. Try this calling this function several times to see if the location of your button is changing from the JS.

public void PrintLocation()
{
Point point = driver.findElement(By.id("add-thisSetting")).getLocation();
System.out.println("X="+point.x+"Y="+point.y");
}

If this is the case, then you can fix it by sleeping until the button has stopped moving.

Thread.sleep(500);

score 0 · Answer 4 · edited May 23 '17 at 11:45

One of my last resorts in cases like these (bad website design) is to resort to javascript modification of the DOM:

driver.execute_script(<<-javascript)
  var overlay = document.getElementById("modal_overlay");
  overlay.parentNode.removeChild(overlay);
javascript

For more thorough troubleshooting, you can take a look at my answer to a similar problem before for the general case: https://stackoverflow.com/a/23705280/234593

ChromeDriver -- The dreaded "Element is not clickable at point (x, y). Other element would receive the click

4 Answers4