如何在视口中检测元素？ （水豚，红宝石）

Question

我有一个检查页脚可见性的步骤

And (/^the footer appears$/) do
   within("div.footer") do
      assert_selector "a", :text=> "About"
      ...
   end
end

基本上我加载页面并滚动到底部然后执行此检查，但我也注意到这个步骤无需我滚动到底部。我做了一些测试，发现这一步只检查整个页面的可见性。它不会检查视口中的可见性。

我希望检查仅在元素位于视口内时才会通过。这可能没有Rspec而只有capybara / ruby​​ / js吗？

Answer 1

您可以使用#evaluate_javascript进行检查。

的内容

in_view = evaluate_script("(function(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 && rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
})(arguments[0]);", find('div.footer'))
# assert that in_view is true, or whatever you want.