“Element is not clickable at point” has the wrong co-ordinates

问题

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>

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!

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?

回答1:

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.

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

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

x: 633.9236450195312
y: 467.98614501953125

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.

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.

回答2:

Try to click on the button by using java script. It will work. I was also getting the same problem earlier that button was not clickable when we changed the Zoom level of chrome browser. But when we tried to click on the button by using javascript it worked.

来源：https://stackoverflow.com/questions/57693523/element-is-not-clickable-at-point-has-the-wrong-co-ordinates