How can I check if an element is completely visible on the screen?

Question

I'm using Selenium WebDriver with the Chrome driver on OS X, implementing in Python.

I'm trying to write a test that verifies if a variety of HTML elements are completely on the screen (for example, I have a tag cloud, and because of my poor implementation, sometimes some of the words slip off the edges of the browser window, so they are half-visible).

driver.find_element_by_css_selector("div.someclass").is_displayed(), which is the only solution I can find documented elsewhere, doesn't seem to work; that returns True even if the element is partially visible.

Is there a way that I can check the entire element (including padding etc.) is visible within the standard browser viewport?

I'm implementing in Python, so Python-flavored answers would be most useful.

Maybe [this](http://stackoverflow.com/questions/8897289/how-to-check-if-an-element-is-off-screen) could help? — Guy, Jan 13 '16 at 16:34
@guy thanks for the link. That might help. Those answers all assume you are checking the visibility from within JavaScript on your page, which I'm not, but perhaps I could kludge something together that way. Thanks for the idea. — Andrew Ferrier, Jan 14 '16 at 06:37
[This](http://stackoverflow.com/a/14812375/27641) also looks potentially useful. — Andrew Ferrier, Jan 14 '16 at 06:39
I had to do something similar. The only workable solution I found is here: https://stackoverflow.com/a/7557433/3124333 — SiKing, Oct 18 '17 at 22:09

sytech · Answer 1 · 2017-10-18T17:53:10.180

You could acquire the element's position and size as well as the window's current X/Y offsets (position) and size to determine whether or not the element is completely in view.

With this information, you can conclude that, in order for the element to be completely within the window, the following must be true:

The window's left bound must be less than or equal to the element's left bound
The window's right bound must be greater than or equal to the element's right bound
The window's top bound must be less than or equal to the element's top bound.
The window's bottom bound must greater than or equal to the element's bottom bound.

First, get the element's location and size. The location property will give you the coordinates of the top-left corner of the element in the canvas. The size property will give you the width and height of the element.

elem = driver.find_element_by_id('square100x100')
elem_left_bound = elem.location.get('x')
elem_top_bound = elem.location.get('y')

elem_width = elem.size.get('width')
elem_height = elem.size.get('height')

You can determine if the current window view meets this criteria by getting the X/Y offsets (position) and the size of the window.

You can get the offsets by executing some javascript. The following should work for all compliant browsers. I personally tested in Chrome, Firefox, and Safari. I know IE will probably need a little massaging.

win_upper_bound = driver.execute_script('return window.pageYOffset')
win_left_bound = driver.execute_script('return window.pageXOffset')
win_width = driver.execute_script('return document.documentElement.clientWidth')
win_height = driver.execute_script('return document.documentElement.clientHeight')

With the above, we've determined the size and position of the element as well as the size and position of the viewing window. From this data, we can now do some calculations to tell if the element is in view.

def element_completely_viewable(driver, elem):
    elem_left_bound = elem.location.get('x')
    elem_top_bound = elem.location.get('y')
    elem_width = elem.size.get('width')
    elem_height = elem.size.get('height')
    elem_right_bound = elem_left_bound + elem_width
    elem_lower_bound = elem_top_bound + elem_height

    win_upper_bound = driver.execute_script('return window.pageYOffset')
    win_left_bound = driver.execute_script('return window.pageXOffset')
    win_width = driver.execute_script('return document.documentElement.clientWidth')
    win_height = driver.execute_script('return document.documentElement.clientHeight')
    win_right_bound = win_left_bound + win_width
    win_lower_bound = win_upper_bound + win_height

    return all((win_left_bound <= elem_left_bound,
                win_right_bound >= elem_right_bound,
                win_upper_bound <= elem_top_bound,
                win_lower_bound >= elem_lower_bound)
              )

This will also include padding and borders on an element, but not margins. If you want margins to be factored in, you'll want to get the value of the relevant CSS properties.

Additionally, you may want to check other things like opacity, whether it's displayed, z-index, etc.

Unfortunately, there's not any reliable builtin method to a selenium webdriver instance that would allow you pull the same information. You may also find [this](https://stackoverflow.com/a/11744120/5747944) useful for pulling info about the window/document with JavaScript. That solution also appears to be valid across many browsers. — sytech, Oct 18 '17 at 19:05

How can I check if an element is completely visible on the screen?

1 Answers1

Linked