如何使用红宝石硒/水豚测试制表符顺序

Question

我需要编写一系列测试来验证Web应用程序中不同页面上的Tab键顺序。 我面临的问题是，据我所知，水豚的send_keys方法要求您位于特定元素上。 让我用一个非常简单的例子来说明。

<div class="group">
  <input type="text" id="first">
  <input type="text" id="second">
  <input type="text" id="third">
</div>

在我的页面上（称为www.mypage.com/home），我有三个输入字段，如上所示。 我想做的是转到该页面并验证当我浏览该页面时，它从第一到第二再到第三...因此，我实质上想做的是：

visit 'www.mypage.com/home'
send_keys(:tab)
expect(find('#first')).to have_focus
send_keys(:tab)
expect(find('#second')).to have_focus
send_keys(:tab)
expect(find('#third')).to have_focus

正如我上面提到的，问题是水豚要求我加入特定元素。 因此，尽管我可以使用下面的代码测试它从第一到第二，从第二到第三，但是我不知道如何验证制表符中的第一件事是first 。 另外，下面的代码还有很多额外的查找。

page.find('#first').send_keys(:tab)
expect(find('#second')).to have_focus
page.find('#second').send_keys(:tab)
expect(find('#third')).to have_focus

Answer 1

最初的Tab键按下必须发送到某个地方，因此请选择诸如body元素之类的东西，然后将其发送到该地方。 从那里开始，您将知道具有焦点的元素以及要将密钥发送到的位置，因此只需查找一次并使用它们即可（而不是重复查找）

visit 'www.mypage.com/home'
first, second, third = find('#first'), find('#second'), find('#third')
find('body').send_keys(:tab) # or find('*:focus'), etc.
expect(first).to have_focus
first.send_keys(:tab)
expect(second).to have_focus
second.send_keys(:tab)
expect(third).to have_focus