“元素不可点击”坐标错误

Question

我在尝试将browser.click()与webdriver.io一起使用时收到此错误：

Error: element click intercepted: Element <input type="text" class="form-control" 
id="nameInput" data-validate="true" data-required-error="Name is required." 
data-pattern-error="Invalid data entered for Name" pattern="^.*$" required="" 
maxlength="255" value="Some Other Name"> is not clickable at point (709, 483). 
Other element would receive the click: <div class="attribute-container col-sm-6">...</div>

这很奇怪，因为它抱怨的div低于我要点击的位置。我还进行了屏幕截图，并使用SnagIt测量了屏幕。 x，y值离应该在的地方太远了！

为什么Chrome缺少我的元素？我还有很多其他东西，webdriver.io可以正确单击。似乎无法单击此固定面板中的所有内容。为什么？

Answer 1

我知道了！这是因为我在该div上使用了zoom CSS属性。在bug in Chrome中，当您设置zoom属性时，它会与x，y偏移混淆，然后Chrome在错误的位置单击。

要测试这是否是您的问题，请在您的测试未能在正确的位置单击时（假设它试图单击#nameInput）在控制台中运行此命令（按F12进行操作）以找出问题所在Chrome的“想法”是您元素的坐标：

document.getElementById("nameInput").getBoundingClientRect();

注意x和y坐标。就我而言，坐标是（与我的错误匹配）：

x: 633.9236450195312
y: 467.98614501953125

接下来，我运行此脚本在屏幕上的该位置放置一个5px的红色块，以查看其单击的位置。我只是将其剪切并粘贴到控制台中：

myMarker = document.createElement("div");

myMarker.style.cssText = `
  height: 5px; 
  width: 5px; 
  background: #ff0000; 
  display: block;
  position: fixed;
  top: 483px;
  left: 709px;
  z-index: 10000;
  `;

myMarker.id = "myMarker";
document.body.appendChild(myMarker);

关闭！下图中的红色箭头显示了我要单击的元素，绿色箭头显示了我在要单击的坐标上添加的红点。

您可以如何解决？我能说的最好的就是不要使用zoom CSS属性（Firefox也显然不支持该属性）。或者您可以使用JavaScript单击该元素。

Answer 2

尝试使用Java脚本单击按钮。它会工作。更改chrome浏览器的缩放级别时，我也遇到了同样的问题，即按钮不可单击。但是，当我们尝试使用javascript单击按钮时，它就起作用了。