Javascript RSpec和Capybara：如何获得元素的水平和垂直位置

我在我的网站上添加了可视隐藏的跳转链接，这些链接在它们聚焦时出现（类似于GitHub，只需在主页上按Tab键一次）

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

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

更新

我在这里找到了一些灵感：

但这似乎对我的配置不起作用：

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

link.native.location
NoMethodError:未定义的方法“位置”#

使用capybara的page.evaluate\u脚本将允许您执行一些JavaScript并根据返回值创建断言：

expect(page.evaluate_script("document.querySelectorAll('a#jump-to-content')[0].style.top;")).to eq('-8000px')

---

根据努里的回答，最好的方法是直接询问浏览器（无头浏览器不读取css文件，阿飞）

但是，与其询问元素的样式，不如使用

offsetTop

直接检查其位置。大概是

expect(page.evaluate_script("document.querySelector('a#jump-to-content').offsetTop;")).to eq('-8000px')

如果您需要更多的控制，还可以在javascript中运行：

expect(page.evaluate_script("document.querySelector('a#jump-to-content').offsetTop < document.querySelector('body').offsetTop;").to be_true

expect（page.evaluate_脚本（“document.querySelector（'a#jump to content'））.offsetTop

您是对的，Capybara不提供获取元素在页面中位置的本机方法，但如果您有权访问jQuery，则可以使用

页面。评估\u script

方法以轻松确定元素的位置。它看起来像这样：

page.evaluate_脚本（“$（”.menu>div:nth child（1）”.offset（）.top”）

该方法允许我们检索元素相对于文档的当前位置

请注意

虽然可以使用“可见性：隐藏集”获取元素的坐标，但“显示：无”将从渲染树中排除，因此其位置未定义

根据，使用JavaScript查找元素位置的最佳方法是使用

getBoundingClientRect（）；

，因为它返回与视口相关的值

用Capybara而不是JavaScript查找元素，然后找到它的位置，对我来说更具可读性。我正在使用Selenium和Chrome

link=find（“a”，文本：“content”）
link.evaluate_脚本（“this.getBoundingClientRect（）.left；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.right；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.top；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.bottom；”）

某些浏览器（如Chrome）还具有：

link.evaluate_脚本（“this.getBoundingClientRect（）.x；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.y；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.height；”）
link.evaluate_脚本（“this.getBoundingClientRect（）.width；”）

你也可以

link.rect.y
link.rect.height
link.rect.x
link.rect.width

这听起来很有希望，但在我的规范中似乎不可用：

Capybara:：Poltergeist:：JavascriptError:页面上的Javascript代码中出现了一个或多个错误…

和

TypeError:null不是对象（评估“document.querySelector”（“#跳转到#导航”）.offsetTop”）

。当仅执行

页面时。评估脚本（“document.querySelector”（“#jump_to_navigation”）

我得到

nil

。在浏览器（外部测试）中，它返回想要的项。初始页面加载（ajax）中是否存在该元素？如果没有，您可能希望等待它出现。为了确保，您是否尝试中断测试的执行，并直接在浏览器和控制台中运行该js？PS：我使用binding.pry来中断我使用binding.pry来完成此操作。无头phantomjs浏览器似乎不支持此操作？