如何检查元素是不是在屏幕上完全可见?
Posted
技术标签:
【中文标题】如何检查元素是不是在屏幕上完全可见?【英文标题】:How can I check if an element is completely visible on the screen?如何检查元素是否在屏幕上完全可见? 【发布时间】:2016-04-18 16:29:47 【问题描述】:我在 OS X 上使用 Selenium WebDriver 和 Chrome 驱动程序,在 Python 中实现。
我正在尝试编写一个测试来验证各种 html 元素是否在屏幕上完全(例如,我有一个标签云,并且由于我的实施不佳,有时有些的单词从浏览器窗口的边缘滑落,因此它们是半可见的)。
driver.find_element_by_css_selector("div.someclass").is_displayed()
,这是我可以在其他地方找到的唯一解决方案,但似乎不起作用;即使元素部分可见,它也会返回 True。
有没有一种方法可以检查整个元素(包括填充等)在标准浏览器视口中是否可见?
我在 Python 中实现,所以 Python 风格的答案将是最有用的。
【问题讨论】:
也许this 能帮上忙? @guy 感谢您的链接。这可能会有所帮助。这些答案都假设您正在检查页面上 javascript 中的可见性,但我不是,但也许我可以这样拼凑一些东西。谢谢你的想法。 This 看起来也很有用。 我不得不做类似的事情。我找到的唯一可行的解决方案是:***.com/a/7557433/3124333 【参考方案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 等。
【讨论】:
不幸的是,没有任何可靠的 selenium webdriver 实例的内置方法可以让您提取相同的信息。您可能还会发现 this 对于使用 JavaScript 提取有关窗口/文档的信息很有用。该解决方案似乎也适用于许多浏览器。以上是关于如何检查元素是不是在屏幕上完全可见?的主要内容,如果未能解决你的问题,请参考以下文章