CODEWITHSUNDEEP
javacssseleniumviewport
Madhu Velpuri
Madhu Velpuri

Reputation: 145

Verification of Element in Viewport in Selenium

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?

Upvotes: 14

Views: 16261

Answers (4)

NewTom
NewTom

Reputation: 159

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

Upvotes: 4

Umair Ayub
Umair Ayub

Reputation: 21341

You could always check element's yth position

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

Upvotes: 0

Ben Moskovitch
Ben Moskovitch

Reputation: 316

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)

Upvotes: 9

Florent B.
Florent B.

Reputation: 42538

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

Upvotes: 27

Related Questions