如何检查元素在屏幕上是否完全可见? [英] How can I check if an element is completely visible on the screen?

问题描述

我将Selenium WebDriver与OS X上的Chrome驱动程序配合使用，并以Python实现.

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

我正在尝试编写一个测试，以验证屏幕上各种HTML元素是否完全 (例如，我有标签云，并且由于实施不佳，有时有些的单词从浏览器窗口的边缘滑落，因此它们是半可见的.

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()，这是我在其他地方可以找到的唯一解决方案，似乎没有用；即使元素是部分可见的，它也会返回True.

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?

我正在用Python实现，因此Python风格的答案将是最有用的.

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

推荐答案

您可以获取元素的位置和大小以及窗口当前的X/Y偏移量(位置)和大小，以确定元素是否完全位于视图.

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:

• 窗口的左边界必须小于或等于元素的左边界
• 窗口的右边界必须大于或等于元素的右边界
• 窗口的上限必须小于或等于元素的上限.
• 窗口的下界必须大于或等于元素的下界.

首先，获取元素的位置和大小. location属性将为您提供画布中元素的左上角的坐标. size属性将为您提供元素的宽度和高度.

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

您可以通过获取X/Y偏移量(位置)和窗口大小来确定当前窗口视图是否满足此条件.

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

您可以通过执行一些javascript获取偏移量.以下内容适用于所有兼容的浏览器.我亲自在Chrome，Firefox和Safari中进行了测试.我知道IE可能需要一点按摩.

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

这还将在元素上包括填充和边框，但不包括边距.如果您希望考虑边距，则需要获取相关CSS属性的值.

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.

此外，您可能还需要检查其他内容，例如不透明度，是否显示，z-index等.

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

这篇关于如何检查元素在屏幕上是否完全可见?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！