webdriverio element not clickable at point: how to fix

TL;DR

Wait for clickability, scroll the element into view, then click; most failures are an overlay or the element being off-viewport. Use waitForClickable plus scrollIntoView before the click. If a sticky header covers it, scroll with an offset.

Error

element not clickable at point (x, y)

Steps

1. Add an explicit wait: await el.waitForClickable({ timeout: 5000 }) before clicking. Expected: the wait passes, meaning the element is enabled and visible.
2. Scroll it into view: await el.scrollIntoView(). Expected: the element is inside the viewport.
3. Retry the click. Expected: the click lands on the element.
4. If it still fails, check for overlays like cookie banners or sticky headers covering the point. Expected: dismissing the overlay makes the click succeed.
5. As a last resort, click via browser.execute running a DOM click on the element. Expected: the click fires even when the hit test disagrees.

When to use

• WebDriverIO 8 or 9 throws a not-clickable-at-point error.
• Clicks fail only in certain viewport sizes or after layout shifts.
• An overlay intermittently covers the target.

When not to use

• The element does not exist; fix the selector first.
• The click works but the app ignores it; that is an app event-handling bug.
• You are testing hover or drag; those need moveTo, not click.

Tool compatibility

• WebDriverIO 8.x, 9.x with the WebDriver protocol.
• waitForClickable and scrollIntoView are built into WDIO element commands.

Variant phrasings

other element would receive the click webdriverio

Same error, fuller text; the overlay step is usually the fix.

webdriverio click intercepted

Same family; wait, scroll, then clear the covering element.

Why it happens

WebDriver clicks at the element's coordinates and hit-tests what is actually there. If the element is off-screen, still animating, or covered by another element, the hit test fails even though the selector matched.

Edge cases

• Sticky headers re-cover the element after scrollIntoView; scroll with a negative offset or dismiss the header.
• Animations move the point between hit test and click; wait for the animation to finish first.
• browser.execute clicks skip real user-interaction checks, so prefer the real click when testing actual UX.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_6XcDZCoh72m-RdWPZqSgvA