“元素不可点击".坐标错误 [英] "Element is not clickable at point" has the wrong co-ordinates

问题描述

我在尝试将browser.click()与 webdriver.io 一起使用时出现此错误:

I'm receiving this error while trying to use browser.click() with 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值离应该在的地方太远了！

This is super weird because the div that it's complaining about is below where I'm trying to click. I also took a screen capture and measured the screen with SnagIt. The x,y value is too far off where it should be!

为什么Chrome缺少我的元素?我还有很多其他东西，webdriver.io可以正确单击.似乎无法在该固定面板上单击任何东西.为什么?

Why is Chrome missing my element? I have lots of other things that webdriver.io clicks on correctly. It seems everything in this one fixed panel cannot be clicked on. Why?

推荐答案

我知道了！这是因为我在该div上使用了zoom CSS属性.有一个

I figured it out! It's because I used the zoom CSS attribute on that div. There's a bug in Chrome where when you set the zoom attribute, it messes with the x, y offset and then Chrome is clicking in the wrong place.

要测试这是否是您的问题，请在您的测试未能单击正确的位置(假设它试图单击#nameInput)时，在控制台中运行它(按F12键即可)以查明是什么Chrome 思考"是您元素的坐标:

To test if this is your issue, once your test fails to click in the right place, assuming it was trying to click on #nameInput run this in the console (press F12 to get to it) to figure out what Chrome "thinks" is the co-ordinates of your element:

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

注意x和y坐标.在我的情况下，坐标是(与我的错误匹配):

Note the x and y coordinates. In my case, the co-ordinates were (which match my error):

x: 633.9236450195312
y: 467.98614501953125

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

Next, I ran this script to place a 5px red block at that point in the screen to see where it was clicking. I just cut & pasted it into the console:

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

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

It's off! The red arrow in the picture below shows element I'm trying to click on, and the green arrow shows the red dot that I added at the co-ordinate that it's trying to click.

您可以如何解决?我能说的最好的是不要使用zoom CSS属性(Firefox也显然不支持该属性).或者，您可以使用JavaScript单击该元素.

What can you do to fix it? The best I can tell is to NOT use the zoom CSS property (which also apparently isn't supported in Firefox). Or you could possibly click on the element using JavaScript.

这篇关于“元素不可点击".坐标错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！