如何检查元素是否在屏幕上完全可见？

Question

我在 OS X 上使用 Selenium WebDriver 和 Chrome 驱动程序，在 Python 中实现。

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

driver.find_element_by_css_selector("div.someclass").is_displayed()，这是我可以在其他地方找到的唯一解决方案，似乎不起作用；即使元素部分可见，它也会返回 True 。

有没有办法可以检查整个元素（包括填充等）在标准浏览器视口中是否可见？

我正在用 Python 实现，所以 Python 风格的答案将是最有用的。

Answer 1

您可以获取元素的位置和大小以及窗口的当前 X/Y 偏移（位置）和大小，以确定元素是否完全在视图中。

有了这些信息，您可以得出结论，为了使元素完全位于窗口内，必须满足以下条件：

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

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

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 偏移（位置）和窗口大小来确定当前窗口视图是否满足此条件。

您可以通过执行一些 javascript 来获取偏移量。以下应该适用于所有兼容的浏览器。我个人在 Chrome、Firefox 和 Safari 中进行了测试。我知道 IE 可能需要一点点按摩。

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

通过以上，我们已经确定了元素的大小和位置以及查看窗口的大小和位置。根据这些数据，我们现在可以做一些计算来判断元素是否在视图中。

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 属性的值。

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