Verification of Element in Viewport in Selenium

Question

How to verify whether an element is visible in viewport(visibility of browser) or not using Selenium?

I've tried with the below code, but Point object(Y value) returns huge value as page is scrollable. Here am getting element dimensions, location and Dimensions of Browser and comparing them.

Dimension weD = element.getSize(); //to get the element Dimensions
Point weP = element.getLocation(); // getting the location of the element in the page.

Dimension d = driver.manage().window().getSize(); // To get the browser dimensions
int x = d.getWidth(); //browser width
int y = d.getHeight(); //browser height
int x2 = weD.getWidth() + ewp.getX();
int y2 = weD.getHeight() + ewp.getY();
return x2 <= x && y2 <= y;

If anyone has worked on it, Could you please share the solution?

score 22 · Accepted Answer · answered Jul 21 '17 at 18:55

It's not possible directly via the API, so you'll have to use a script injection.

The best way to determine if an element is visible in the viewport is to get the element at the supposed location with document.elementFromPoint. It returns null if it's not within the viewport and your element or a descendant if it is.

public static Boolean isVisibleInViewport(WebElement element) {
  WebDriver driver = ((RemoteWebElement)element).getWrappedDriver();

  return (Boolean)((JavascriptExecutor)driver).executeScript(
      "var elem = arguments[0],                 " +
      "  box = elem.getBoundingClientRect(),    " +
      "  cx = box.left + box.width / 2,         " +
      "  cy = box.top + box.height / 2,         " +
      "  e = document.elementFromPoint(cx, cy); " +
      "for (; e; e = e.parentElement) {         " +
      "  if (e === elem)                        " +
      "    return true;                         " +
      "}                                        " +
      "return false;                            "
      , element);
}

Thanks Florent B. It helped me in verifying the element in viewport. — Madhu Velpuri, Jul 21 '17 at 19:18
It is not always accurate unfortunately since it focuses on the middle part of the element not the top. — dicle, Oct 12 '20 at 14:43
@dicle, an element is considered visible if the center is visible. If you want to make sure that the element is fully visible, the check the four corners. — Florent B., Oct 12 '20 at 18:44

Ben Moskovitch · Answer 2 · 2020-08-30T10:37:02.947

Thanks Florent B. Converted to python:

def is_element_visible_in_viewpoint(driver, element) -> bool:
    return driver.execute_script("var elem = arguments[0],                 " 
                                 "  box = elem.getBoundingClientRect(),    " 
                                 "  cx = box.left + box.width / 2,         " 
                                 "  cy = box.top + box.height / 2,         " 
                                 "  e = document.elementFromPoint(cx, cy); " 
                                 "for (; e; e = e.parentElement) {         " 
                                 "  if (e === elem)                        " 
                                 "    return true;                         " 
                                 "}                                        " 
                                 "return false;                            "
                                 , element)

score 2 · Answer 3 · answered Jan 31 '22 at 09:21

Thanks Florent B. and Ben Moskovitch . Converted to c# :

private bool IsVisibleInViewport(IWebElement element) => (bool)((IJavaScriptExecutor)_webDriver).ExecuteScript("var elem = arguments[0], box = elem.getBoundingClientRect(), cx = box.left + box.width / 2,  cy = box.top + box.height / 2,  e = document.elementFromPoint(cx, cy); for (; e; e = e.parentElement) { if (e === elem) return true;} return false;", element);

where _webDriver is your WebDriver in same class as this method

score 0 · Answer 4 · answered Jul 04 '21 at 12:25

0

You could always check element's yth position

yth = int(driver.execute_script("return document.querySelector('{el_selector}').getBoundingClientRect()".format(el_selector=el_selector)))

answered Jul 04 '21 at 12:25

Umair Ayub

19,358
14
72
146

Verification of Element in Viewport in Selenium

4 Answers4

Linked