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

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

我试图编写一个测试来验证各种HTML元素是否完全在屏幕上(例如,我有一个标签云,并且由于我的实现不佳,有时候某些单词从浏览器的边缘滑落窗口,所以它们是半透明的)。

driver.find_element_by_css_selector("div.someclass").is_displayed() ,这是我可以在其他地方找到的唯一解决方案,似乎并不奏效; 即使元素部分可见,也会返回True。

有没有一种方法可以检查整个元素(包括填充等)在标准浏览器视口中是否可见?

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


您可以获取元素的位置和大小以及窗口当前的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等。

    链接地址: http://www.djcxy.com/p/14633.html

    上一篇: How can I check if an element is completely visible on the screen?

    下一篇: How to change nav link color depending on page position