检查WebElement(由于CSS而覆盖)是否对用户可见

在下面的代码中，我有两个显示不同颜色列的<div>标签，一个红色，一个绿色：

<html>
    <body>
        <style>
        html, body {
            height: 100%;
        }
        #red {
            width:50%;
            background: #f00;
            height: 100%;
        }
        #green {
            width: 250px;
            background: #0f0;
            height: 100%;
        }
        </style>
        <div id="red">
        </div>
        <div id="green">
        </div>
    </body>
</html>

显示时，红色div 标签

完全覆盖绿色div 标签，因为红色区域的百分比宽度大于绿色的像素宽度。（你可以在JFiddle上看到这个）

我遇到的问题是，在 Selenium 中，我找不到以编程方式验证绿色div 是否对用户可见的方法。尝试greenDivWebElement.isDisplayed()返回带有上述代码的true，尽管用户看不到它。

我确实发现执行greenDivWebElement.click()确实显示绿色div不可见，因为会引发以下错误：

org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (133, 361). Other element would receive the click: <div id="red">...</div>

但是，此解决方案在现实世界中对我不起作用，因为我想检查其可见性的那种东西在单击时会做一些事情，虽然我想确保它们对用户可见，但我不希望它们被单击。

那么，如果WebElement被CSS覆盖，我该如何检查它是否对用户可见呢？

我最近遇到了类似的要求。我还没有实施完整的解决方案，但在高层次上，这些是我正在采取的步骤。验证元素A是否与任何其他元素重叠

获取有问题的元素，将元素的 click（）事件绑定到一个不执行任何操作的函数。
;底部：左、中、右。默认情况下，Selenium单击中心点的元素。其他点可以通过元素的 DOM 定位然后移动到相应的点来计算。
将步骤 2 中的调用块包装在 try/catch 中以检查Element not clickable...异常。
如果引发异常，则元素在其中一个单击点与另一个元素重叠。

这里的挑战肯定是点击事件的绑定/取消绑定。对于我的特定情况，使用 JQuery 实现绑定是直接的。

我最初想到处理点击问题的另一种方法是在运行测试之前在驱动程序中禁用 Javascript。但是，当然，这种方法只有在渲染页面元素时不涉及JS技巧时才有效。

挑战的第二部分是点击点的粒度。沿边缘的 8 个点通常有效，但如果点击点之外有重叠，则必须增加点击点的数量。

相关内容

最新更新

热门标签：