overflow - 使用 Watir 检测元素被溢出隐藏

Question

我想使用 Watir 来判断元素是否使用 overflow: hidden css 属性隐藏。我认为这样做的唯一方法是找出包含 div 的位置，并查看包含的元素是否在其中。像可见的方法？和礼物？即使包含的元素完全隐藏，也返回 true。

有没有更好的办法？

谢谢！

Answer 1

一种选择可能是使用document.elementFromPoint(x,y). 这应该告诉您顶部元素在特定坐标处的位置。如果您的元素由于溢出而被隐藏，它将返回一个不同的元素。

以下似乎适用于 w3schools.com 上的示例：

require 'rubygems'
require 'watir-webdriver'
b = Watir::Browser.new :firefox

class Watir::Element
    def hidden_by_overflow?()
        assert_exists
        assert_enabled

        # Add one to the coordinates because, otherwise, if there is no border       
        # between this element and another element, we might get the element right   
        # above or to the left of this one                                           
        top_left_x = @element.location.x + 1
        top_left_y = @element.location.y + 1
        top_test = browser.execute_script("return document.elementFromPoint(#{top_left_x}, #{top_left_y})")

        return top_test != self
    end
end

begin
    b.goto('http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=hidden')
    b.div(:id, 'demoDIV').ps.each{ |x| puts x.hidden_by_overflow? }
    #=> The first 9 paragraphs of the 16 paragraphs return true.
ensure
    b.close
end

笔记：

• 我在 Firefox 中对此进行了测试。不确定它是否与浏览器兼容。
• 该检查仅检查元素的左上角是否未隐藏。部分位于包含 div 之外的元素仍将返回 true。我尝试使用@element.size.height 检查底角，但 webdriver 开始滚动包含 div 中的结果。