'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?

javacssseleniumviewport


Solution 1:[1]

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)

Solution 2:[2]

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

Solution 3:[3]

You could always check element's yth position

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 NewTom
Solution 3 Umair Ayub

Related Questions