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

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，当您设置缩放属性时，它会与 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 点击按钮时，它起作用了。