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

Question

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

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

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

如何使用 Watir 声明页面上元素的可见性？

Answer 1

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

进行近似

完全在视口中

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

可以使用 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)

部分在视口中

您还可以检查元素是否部分位于视口中 - 例如大型 table 的一部分。以下脚本修改自的另一个脚本，检查元素的任何角是否在视口中：

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。

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

How do I assert the visibility of an element in a web page?

selenium

watir

cucumber

geckodriver