javascript - 如何检测视口(viewport)中是否存在元素？ ( capybara ， ruby )

Question

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

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

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

我希望只有当元素在视口(viewport)内时才通过检查。如果没有 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.