如何在 rspec 中使用 capybara 点击下拉选项

Posted 2023-02-25

【中文标题】如何在 rspec 中使用 capybara 点击下拉选项

【英文标题】：How to use capybara in rspec to click on a dropdown option

【发布时间】：2012-07-01 10:53:20

【问题描述】：

我正在使用 ruby​​ on rails 3.2.3 和 capybara 来帮助创建请求规范。我的目标是创建一个测试注销的规范请求。网页：

<li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown">
    Welcome <%= current_user.first_name + " "+ current_user.last_name%>
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <a href="#">
      <%= link_to "Sign out", destroy_user_session_path, :method => :delete%>
    </a>
  </ul>
</li>

为了测试，我有

describe "sign out" do
  it "should let user to sign out" do
    login_as user, :scope => :user
    # click_on "Welcome #user.first_name #user.last_name"
    # Now click on Sign out
  end
end

我不知道如何单击“使用水豚退出”，因为它位于下拉菜单中，因此在页面上不可见。有人知道吗 ？

还有其他方法可以点击下拉菜单中的元素吗？

【问题讨论】：

我已经通过选择特定链接标签解决了同样的问题（在 Twitter Bootstrap 按钮下拉菜单上）：find('a', :text => option_title).click

【参考方案1】：

你好，我终于明白了。我不得不使用xpath 来查找链接。基于上面的html，这是我所做的：

在 rspec 中，我写道：

page.find(:xpath, "//a[@href='/users/sign_out']").click

我之所以使用“//a[@href='/users/sign_out']”是因为网页上的link_to "Sign out", destroy_user_session_path, :method => :delete被编译成<a href="/users/sign_out" ...。

它有效:-)

哦，顺便说一句，我找到了这个有用的链接：http://www.suffix.be/blog/click_image_in_link_capybara

【讨论】：

我已经能够测试一个非常相似的下拉菜单，只需点击两次，一次打开下拉菜单，一次点击链接。

我也是这么想的。你可以发布一些代码吗？如果可以将其应用于上面的html，那就太好了。谢谢。

我相信这里缺少的部分是为请求规范启用 javascript；通常是 capybara-webkit (github.com/thoughtbot/capybara-webkit)。启用此功能后，点击将在您的浏览器中正常工作。

你好，这样在不启用js的情况下它确实可以工作（测试可以点击）。

通过 xpath 查找比这些答案中引用的 click_link 方法提供了更多的控制权。这应该有更多的赞成票！

【参考方案2】：

我已经通过点击两个链接测试了一个下拉菜单

click_link "Welcome #current_user.first_name #current_user.last_name"
click_link 'sub link'

【讨论】：

如何点击_link“下拉链接”。

您当然可能必须将变量 current_user 替换为为您的测试创建的用户对象

尝试使用 JavaScript 驱动程序运行它，这样您就可以看到发生了什么。我直接从我自己的项目中复制了它。

我不明白。如何“使用 javascript 驱动程序运行”。对不起，如果我的问题不好。谢谢

将it "my example" do更改为it "my example", js: true do默认情况下，这将启动Firefox并使用selenium运行示例，因此您可以看到它运行。您可以在结尾添加一个睡眠，以便您有时间了解正在发生的事情

【参考方案3】：

一个更简单的解决方案就是这样：

select("要从菜单中选择的选项", :from => "标签名称")

注意：“标签名称”是<label> 的实际文本。但是，您也可以在这里使用<select> 的“id”或“name”属性，我认为这更好，因为您可以在某些时候更改标签文本，如果您这样做，您的测试仍然会通过。

【讨论】：

"select" 不适用于非 html 选择框元素。问题是关于“按钮下拉菜单”（如 twitter bootsrap 之一），它不是 html 选择框。

这个答案实际上解决了问题的标题。我想这就是它获得最多票数的原因。

该代码不是一个选择，它是引导程序的注销代码。所以选择不起作用

【参考方案4】：

我的例子

find("ol.nya-bs-select.btn-default.form-control[ng-model='scope.values.countries']")
    .find_button("Nothing selected").click

【参考方案5】：

我遇到了类似的问题，但我的下拉菜单没有任何文字，只有图标：

%li#user-menu.dropdown
  %a.dropdown-toggle href: "#", data:  toggle: "dropdown" , role: "button", aria:  haspopup: "true", expanded: "false"  
    %i.fa.fa-user
    %span.caret
  %ul.dropdown-menu
    %li.logout-text= link_to "Log Out", destroy_user_session_path, :method => :delete

在我使用的规范中：

def when_I_sign_out
  find('#user-menu').click
  click_on 'Log Out'
end