Question

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

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

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

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

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

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

1 个答案: