UnknownServerException：元素在点 (X, Y) 处不可点击答案

【问题标题】：UnknownServerException: Element is not clickable at point (X, Y)UnknownServerException：元素在点 (X, Y) 处不可点击
【发布时间】：2016-10-02 06:58:53
【问题描述】：

我正在为使用Yii Framework 2.0 创建的应用程序编写验收测试。我正在使用Codeception 和Selenium software。

问题如下。

在页面上有一个div，如果点击它 - 一个菜单会出现在侧面。在那个菜单中有一个我需要的链接。

这是html代码的一部分：

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

这是div，我正在尝试点击：

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

在测试中我可以看到div:

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

但是当我尝试模拟点击它时 - 测试失败并出现错误：

[37;41m
[39;49m [37;41m [UnknownServerException] 未知错误：元素是在点 (21, 729) 不可点击。其他元素将收到点击：（会话信息： chrome=50.0.2661.102）（驱动程序信息：chromedriver=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4)，平台=Windows NT 10.0 x86_64) （警告：服务器未提供任何堆栈跟踪信息）命令持续时间或超时：27毫秒构建信息：版本：'2.53.0'，修订：'35ae25b'，时间：'2016-03-15 17:00:58' 系统信息：主机：'DESKTOP-Q4B9M7G'，ip：'.....'，os.name：'Windows 8.1', os.arch: 'amd64', os.version: '6.3', java.version: '1.7.0_79' 会话 ID: ... 驱动信息: org.openqa.selenium.chrome.ChromeDriver 能力 [{platform=WIN8_1, acceptSslCerts=true, javascriptEnabled=true, browserName=chrome, 铬={userDataDir=C:...\scoped_dir11496_1013, chromedriverVersion=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4)}，可旋转=假， locationContextEnabled=true，mobileEmulationEnabled=false，版本=50.0.2661.102，需要HeapSnapshot=true， cssSelectorsEnabled=true，databaseEnabled=false，handlesAlerts=true， browserConnectionEnabled=false，webStorageEnabled=true， nativeEvents=true, hasTouchScreen=false, applicationCacheEnabled=false，takeScreenshot=true}] [39;49m [37;41m
[39;49m [33m 场景步骤：[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

我建议可能图像glyphicon-user 与div 元素重叠，并试图在测试中将其删除：

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

但这并没有帮助。

如何使用 Codeсeption 模拟点击div？

【问题讨论】：

你遇到了什么错误？
我认为问题出在您的元素定位器中...在这种情况下，如果您提供元素 html 部分会很好
将其用作 cssSelector div.np.np3#np4[title='Profile']

标签： selenium-webdriver codeception acceptance-testing

【解决方案1】：

这对我有帮助。

我删除标签span如下图并添加延迟：

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

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

现在一切正常。

您可能还需要调用ng-click 操作。例如，对于像这样的按钮：

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

此按钮会动态地将块添加到页面。要调用ng-click，您可以编写：

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

如果按钮位于屏幕底部，您可能希望在那里进行滚动：

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

散布在大页面上的复选框可能会产生这样的问题。要解决它，需要将当前元素滚动到浏览器窗口的可见区域：

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

【讨论】：