RSpec and Capybara: How to get the horizontal and vertical position of an element

Question

I have added visually hidden jump links to my website, that appear when they are focused (similar to e.g. GitHub, just press Tab once on the home page).

我想用 Capybara 测试这种行为。我无法检查例如“可见性：真/假”，因为链接并未真正隐藏（否则屏幕阅读器将看不到它们），而只能通过绝对定位从视口移出。当它们被聚焦时，它们被放置在视口中的原始位置。

所以我想我必须检查 X 和 Y 坐标，但 Capybara 似乎没有提供获取它们的本地方法？这是真的？如果是这样，我将如何为例如元素“#jump_to_content”获取它们？通过执行一些 JavaScript？

更新

我在这里找到了一些灵​​感：https : //content.pivotal.io/blog/testing-accessibility-with-rspec-and-capybara

但这似乎不适用于我的配置：

link.native.location
NoMethodError: undefined method `location' for #<Capybara::Poltergeist::Node tag="a">

Answer 1

你是对的，Capybara 没有提供获取元素在页面中位置的本机方法，但是如果你可以访问 jQuery，你可以使用Capybara 的 page.evaluate_script方法轻松确定元素的位置。它看起来像这样：

page.evaluate_script("$('.menu > div:nth-child(1)').offset().top")

.offset ()方法允许我们检索元素相对于文档的当前位置。将此与.position()进行对比，后者检索相对于偏移父级的当前位置

请注意

虽然可以获取设置了visibility:hidden的元素的坐标，但display:none被排除在渲染树之外，因此具有未定义的位置。