如何断言网页中元素的可见性？答案

【问题标题】：How do I assert the visibility of an element in a web page?如何断言网页中元素的可见性？
【发布时间】：2019-03-16 08:05:52
【问题描述】：

我正在使用 Watir 为 Web 服务进行功能描述。我需要验证服务在不同浏览器条件下的行为 - 具体来说，我想在某些浏览器条件下断言元素（简单链接）的可见性：

@orcid_link = @browser.link(class: 'orcid', text: /orcid/i)
   assert @orcid_link.visible?

这似乎不起作用 - 我调整了窗口大小，而 Watir 认为该元素是可见的（实际上它是 present）

如何使用 Watir 断言页面上元素的可见性？

【问题讨论】：

在这种情况下如何定义“可见性”？在 Watir 中，#present? 和 #visible? 是相同的，除非元素不存在。
另外请记住，可见性不考虑滚动。因此，调整窗口大小以使元素不再位于视口中并不意味着该元素将评估为不可见。
感谢这些 cmets。因此，似乎没有办法断言一个项目的真正“可见性”。 IE，它现在在视口中吗，人类可以在浏览器窗口中看到它吗？

标签： selenium cucumber watir geckodriver

【解决方案1】：

没有用于检查元素当前是否在视口中的内置方法。但是，您可以通过运行 JavaScript 进行近似计算。

完全在视口中

可以从Florent B. in another question 中获取一个检查可见性的简单示例。请注意，对于此功能未考虑的内容，有一些注意事项。该脚本还将“在视口中”定义为完全在视口中。

这个脚本可以使用 Watir 来执行：

script = %q{
  var rect = arguments[0].getBoundingClientRect(); 
  return (
    rect.top >= 0 && 
    rect.left >= 0 && 
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) );  
}
browser.execute_script(script, @orcid_link)

部分在视口中

您还可以检查元素是否部分位于视口中 - 例如大表格的一部分。以下脚本是从另一个 Florent B.'s answers 修改而来的，它检查元素的任何角落是否在视口中：

script = %q{
  var elem = arguments[0]
  var box = elem.getBoundingClientRect();
  corners = [
    document.elementFromPoint(box.left, box.top),
    document.elementFromPoint(box.right - 1, box.top),
    document.elementFromPoint(box.left, box.bottom - 1),
    document.elementFromPoint(box.right - 1, box.bottom - 1)
  ];
  results = corners.map( function(c) {
    for (; c; c = c.parentElement) { if (c === elem) return true; }
    return false;
  })
  return results.includes(true);
}
browser.execute_script(script, @orcid_link)

如果这解决了您的问题，我们或许可以将其添加到 Watir。

【讨论】：