A transparent overlay takes the click the screenshot shows landing on the button

A transparent overlay takes the click the screenshot shows landing on the button

reads as

The screenshot shows the button unobscured and correctly placed, and the click was dispatched without error. Conclusion drawn: the button was clicked.

actually

A transparent element — a full-viewport modal backdrop, a zero-opacity loading layer, an oversized decorative pseudo-element — covers the button's centre point, and hit testing delivers the event to the topmost element at that coordinate. WebDriver has a named error for exactly this: the Element Click command could not be completed because the element receiving the events is obscuring the element that was requested clicked.

blind because

A transparent overlay contributes no pixels. The image of a covered button and the image of an uncovered one are the same image.

the check

Ask the document what occupies the point: `const r = el.getBoundingClientRect(); document.elementFromPoint(r.left + r.width/2, r.top + r.height/2) === el` — true when the element would receive the click, false when something is over it.

cost of missing

An automated flow reports submitting forms it never submitted. A synthetic `el.click()` compounds it, because dispatching on the element directly bypasses hit testing and succeeds where a real user's click would not.

generalises to

Any interaction verified by appearance rather than by the effect the interaction was supposed to have.

source

w3.org