html - How does Selenium click on elements that are 50% on screen and 50% not on screen?

Question

There is a div-Element. 50% of its size are on the screen. The other 50% go over the screen height and are not visible. There is no scrolling possible.

I tried to automate a test with Selenium and click on that div-element, but sometimes it works and sometimes it does not.

Why does Selenium not just click on the "on-screen-area" of that div?

And how is this functionality implemented? When I tell Selenium to click on a huge div-element, does it click on a random position on that div?

Answer 1

element’s in-view center point

As per the WebDriver W3C Specification an element’s in-view center point is the origin position of the rectangle that is the intersection between the element’s first DOM client rectangle and the initial viewport.

Given an element that is known to be in view, it can be calculated this way:

1. Let rectangle be the first element of the DOMRect sequence returned by calling getClientRects on element.
2. Let left be max(0, min(x coordinate, x coordinate + width dimension)).
3. Let right be min(innerWidth, max(x coordinate, x coordinate + width dimension)).
4. Let top be max(0, min(y coordinate, y coordinate + height dimension)).
5. Let bottom be min(innerHeight, max(y coordinate, y coordinate + height dimension)).
6. Let x be floor((left + right) ÷ 2.0).
7. Let y be floor((top + bottom) ÷ 2.0).
8. Return the pair of (x, y).

An element is in view if it is a member of its own pointer-interactable paint tree, given the pretense that its pointer events are not disabled.

---

Element Click

As per the documentation the Element Click command scrolls into view the element if it is not already pointer-interactable, and clicks its in-view center point.

Note: If the element’s center point is obscured by another element, an element click intercepted error is returned. If the element is outside the viewport, an element not interactable error is returned.

---

Solution

In such cases there are two possible solutionas follows:

1. You can induce WebDriverWait setting the expected_conditions as element_to_be_clickable(). So effectively your line of code will be:

   WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, ".reply-button"))).click()
   

2. You can use move_to_element(to_element) and click(on_element=None) method respectively. So effectively your line of code will be:

   ActionChains(driver).move_to_element(element).click(element).perform()
   

---

Reference

You can find a relevant discussion in selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable with Selenium and Python