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.

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.

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>

Answer 1

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);