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

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等。