UnknownServerException: Element is not clickable at point (X, Y)
<p>I'm write acceptance tests for the application created by using <a href="https://en.wikipedia.org/wiki/Yii" rel="nofollow noreferrer">Yii Framework 2.0</a>. I'm using <a href="http://codeception.com" rel="nofollow noreferrer">Codeception</a> and <a href="https://en.wikipedia.org/wiki/Selenium_(software)" rel="nofollow noreferrer">Selenium software</a>.</p>

<p>The problem is as follows.</p>

<p>On the page there is a <code>div</code> and if click on it - a menu will appear on the side. In that menu there is a link that I need.</p>

<p>That's part of the html code:</p>

<pre><code>&lt;div class="nav_panel"&gt;
    &lt;div class="menuButton" id="np1" title="Menu"&gt;&lt;b&gt;Main menu&lt;/b&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt;
            &lt;div class="np np5" id="np5" title="Tree" onclick="window.location.href = '/roles/controllermodule/tree'"&gt;
            &lt;span class="glyphicon glyphicon-tree-deciduous"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id="scrollUp" class="npt glyphicon glyphicon-circle-arrow-up" title="Up"&gt;&lt;/div&gt;
            &lt;div class="np np6" id="np6" title="TestIt" onclick="window.location.href = '/gtest/gtest/index'"&gt;
        &lt;span class="glyphicon glyphicon-wrench"&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div class="np np7" id="np7" title="Clear DB Cache" onclick="$.ajax({type: 'GET',url: '/roles/role/schemarefresh'});"&gt;
        &lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;div class="np np1" id="np2" title="Reports"&gt;&lt;span class="glyphicon glyphicon-file"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="np np2" id="np3" title="Documents"&gt;&lt;span class="glyphicon glyphicon-envelope"&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;div class="np np3" id="np4" title="Profile"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>Here is <code>di</code>v which I'm trying to click:</p>

<pre><code>  &lt;div class="np np3" id="np4" title="Profile"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>In the test I can see that <code>div</code>:</p>

<p><code>$I-&gt;seeElement(['xpath' =&gt; './/div[@id="np4"]']);</code></p>

<p>But when I try to emulate a click on it - the test is failing with the error:</p>

<blockquote>
  <p>[37;41m<br>
  [39;49m [37;41m  [UnknownServerException] unknown error: Element is
  not clickable at point (21, 729). Other element would receive the
  click:    (Session info:
  chrome=50.0.2661.102)   (Driver info: chromedriver=2.21.371459
  (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4),platform=Windows NT 10.0
  x86_64) (WARNING: The server did not provide any stacktrace
  information) Command duration or timeout: 27 milliseconds Build info:
  version: '2.53.0', revision: '35ae25b', time: '2016-03-15 17:00:58'
  System info: host: 'DESKTOP-Q4B9M7G', ip: '.....', os.name: 'Windows
  8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.7.0_79' Session ID: ... Driver info: org.openqa.selenium.chrome.ChromeDriver
  Capabilities [{platform=WIN8_1, acceptSslCerts=true,
  javascriptEnabled=true, browserName=chrome,
  chrome={userDataDir=C:...\scoped_dir11496_1013,
  chromedriverVersion=2.21.371459
  (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4)}, rotatable=false,
  locationContextEnabled=true, mobileEmulationEnabled=false,
  version=50.0.2661.102, takesHeapSnapshot=true,
  cssSelectorsEnabled=true, databaseEnabled=false, handlesAlerts=true,
  browserConnectionEnabled=false, webStorageEnabled=true,
  nativeEvents=true, hasTouchScreen=false,
  applicationCacheEnabled=false, takesScreenshot=true}]  [39;49m
  [37;41m<br>
  [39;49m [33m Scenario Steps: [39m [1m 36.
  $I->click(".//div[@id="np4"]")[22m at
  [32mcodeception\acceptance\LoginCept.php:51[39m
   35. $I->seeElement({"xpath":".//div[@id="np4"]"}) at [32mcodeception\acceptance\LoginCept.php:50[39m</p>
</blockquote>

<p>I suggested that perhaps the image <code>glyphicon-user</code> overlaps the <code>div</code> element and tried to remove it in the test:</p>

<p><code>$I-&gt;executeJS('$(".glyphicon-user").remove();');</code></p>

<p>But it didn't help.</p>

<p>How can I emulate click on the <code>div</code> by using Codeсeption?</p>