如何断言网页中某个元素的可见性？

布鲁斯·贝克尔

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

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

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

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

贾斯汀·柯（Justin Ko）

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

全视口

在另一个问题中，可以从Florent B.中获取检查可见性的简单示例。请注意，此功能无法解释的一些注意事项。该脚本还将“在视口中”定义为完全在视口中。

可以使用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.的另一个答案中修改而来的，用于检查元素的任何角是否在视口中：

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中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。