检查元素是不是对用户真正可见

Posted 2023-02-21

【中文标题】检查元素是不是对用户真正可见

【英文标题】：Checking if an element is really visible to the user检查元素是否对用户真正可见

【发布时间】：2012-11-24 10:53:57

【问题描述】：

我想检查用户是否可以在当前网络浏览器视图中看到一个元素而无需滚动。

我发现的可以检查该元素是否在页面的某个地方。

另一个提示建议检查元素位置，但我需要获取浏览器可见窗口的尺寸加上它的 x/y 偏移量到 0/0.

如果有人能指出不需要 javascript 代码的解决方案，我将不胜感激。

【问题讨论】：

不幸的是，没有 JavaScript 是不行的。无论如何，你为什么不想要那个？ here 有什么帮助吗？

@Slanec 例如，我有一个错误，由于一些糟糕的 CSS，需要单击的按钮被定位，例如在 110% 的视口宽度处，并且溢出设置为隐藏。所以按钮永远不会被点击，而不是滚动或调整大小或任何东西。顺便说一句，这只发生在 IE11 中。所以现在我想要一个测试用例来验证按钮是否可见以添加到产品的回归中。不幸的是，isDisplayed() 对于元素是正确的。

我正在使用 Css、Z-index 检查元素的可见性。我是否可以在另一个元素的背面检查元素的可见性。

【参考方案1】：

您如何定义“对用户可见”？你建议如何检查？ 如果有高度？如果它没有被CSS隐藏？如果它的父元素被 CSS 隐藏了怎么办？

最可靠的方法是使用 Selenium 内置的 .Displayed 属性（如果您使用 C#，Java 也有类似的东西），并将其与 jQuery 的“可见”选择器结合使用：http://api.jquery.com/visible-selector/。下面是 C# 中的示例。

var element = Driver.FindElement(By.Id("test"));
bool isVisible = element.Displayed;
var javascriptCapableDriver = (IJavascriptExecutor)Driver;
bool jQueryBelivesElementIsVisible = javascriptCapableDriver.ExecuteScript("return $('#myElement').is(:visible);");
bool elementIsVisible = isVisible && jQueryBelievesElementIsVisible;

这将得到大多数情况。

没有客户端代码是不可能的，或者在准备其他人找到一种可以用服务器端语言完成的方法时，我非常怀疑它是否漂亮、可读或可靠。

jQuery 有offset() 方法：

http://api.jquery.com/offset/

但是，如果考虑到边框、边距等因素，这将不起作用。

【讨论】：

我将 visible 定义为元素在视口中，并且不会被它前面的其他元素隐藏。

@Cani 这真的应该是可行的，click() 方法在这些情况下会引发异常（消息“元素 在点 (546, 18) 处不可点击。其他元素将收到点击："）。如果它是可见的，我只是无法弄清楚如何在没有实际触发点击的情况下做到这一点......