按数据属性查找元素

Question

我正在使用 RSpec 和 capybara-webkit 改进我的测试，试图删除所有 css 和 xpath 选择器，例如

find('#edit_user > div:nth-child(7) > div > div > button').click

我正在寻找替换它们的最佳选择。

我打算使用元素的 css class 但一些 "pro" 水豚测试员说这不是最好的选择。

所以我的问题是：我可以在我的测试中使用 data 属性吗？
如果我有一个元素

<button name="button" type="submit" class="button last" data-test="edit.update">Update/button>

我能做到吗

find('edit.update').click

?

你认为这是个好主意吗？如果您对这个话题有更多的ideas/infos，欢迎随时发表评论！

Answer 1

要通过 data-* 属性定位元素，您需要使用 CSS-选择器或 XPath。

对于 CSS-选择器：

find('button[data-test="edit.update"]').click

对于 XPath：

find('//button[@data-test="edit.update"]').click

这是否是一个好主意真的取决于应用程序。您想要选择唯一标识元素的内容。如果 "edit.update" 不是唯一的，那么使用它就不是一个好的选择。如果按钮具有唯一的 class，class 属性就可以了，而 "button" 和 "last" 不太可能。

最好的方法确实是使用静态 id 属性，因为它们在页面中应该是唯一的并且不太可能更改。 find 方法还支持通过 id 定位元素，这意味着您不必编写 CSS-选择器或 XPath。

Answer 2

Justin Ko 给出的答案是正确的，我只是想添加一些更高级的东西，在某些情况下可以帮助提高测试的可读性。你可以添加你自己的 "selectors" 到 Capybara，所以如果你真的想通过数据测试属性 select 东西（这不是一个好主意，因为你真的不想仅仅为了测试而添加属性) 你可以做很多事情

Capybara.add_selector(:dt) do
  css { |v| "*[data-test=#{v}]" }
end

这将允许

find(:dt, 'edit.update')

这可以使测试易于理解，同时也将复杂的 css 或路径查询限制在测试代码中的单个位置。然后你可以定义一个方法，比如

def find_by_dt(value)
 find(:dt, value)
end

如果你更喜欢 find_by_dt...) 的外观而不是 find(:dt, ...)

您还可以向自己的 selections 添加过滤器和描述以获得更大的灵活性、更好的错误描述等 - 请参阅 https://github.com/jnicklas/capybara/blob/master/lib/capybara/selector.rb 以了解由水豚

按数据属性查找元素

Find elements by data attributes

testing

rspec

ruby-on-rails

capybara

capybara-webkit