UnknownServerException: Element is not clickable at point (X, Y)

Question

I'm write acceptance tests for the application created by using Yii Framework 2.0. I'm using Codeception and Selenium software.

The problem is as follows.

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

That's part of the html code:

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

Here is div which I'm trying to click:

  <div class="np np3" id="np4" title="Profile"><span class="glyphicon glyphicon-user"></span></div>

In the test I can see that div:

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

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

[37;41m
[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
[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

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

$I->executeJS('$(".glyphicon-user").remove();');

But it didn't help.

How can I emulate click on the div by using Codeсeption?

Answer 1

That's what helped me.

I deleted tag span as shown below and added delay:

$I->executeJS('$(".glyphicon-user").remove();');
$I->wait(10);

$I->click('div.np.np3#np4[title=\'Profile\']');
$I->wait(5);

Now everything is OK.

---

Also you may need to invoke ng-click action. For example, for button such as:

<button 
 type="button" 
 ng-click="addNewBlock(model.Languages)" 
 ng-hide="model.Languages.elem.length == model.Languages.max"   
 class="">Add</button>

This button dynamically adds blocks to the page. To invoke ng-click you can write:

$I->executeJS('$(\'button[ng-click="addNewBlock(model.Languages)"]\').click();');

If the button located at the bottom of the screen, you might want to perform scrolling there:

$I->executeJS('window.scrollTo(0, document.body.scrollHeight);');

Checkboxes that scattered across the big page can create such a problem. To solve it, need to scroll the current element into the visible area of the browser window:

$I->executeJS('document.getElementById("some-id").scrollIntoView();'); 
$I->click('//*[@id="some-id"]');