如何使用 Capybara 在下拉菜单中选择选项

Posted 2023-02-23

【中文标题】如何使用 Capybara 在下拉菜单中选择选项

【英文标题】：How to select option in drop down using Capybara

【发布时间】：2013-12-06 16:44:01

【问题描述】：

我正在尝试使用 Capybara (2.1.0) 从下拉菜单中选择一个项目。

我想按数字选择（意思是选择第二个、第三个等选项）。

我在谷歌上疯狂地尝试了各种各样的东西，但没有运气。

我可以通过使用值来选择它：

 find("option[value='4c430d62-f1ba-474f-8e8a-4452c55ea0a8']").click

但我不想使用那种方法 b/c 值会发生变化，这会使我的测试变得脆弱。

下拉列表的 html 是：

<td class="value">
    <select name="organizationSelect" id="organizationSelect" class="required">
     <option value="NULL">Choose...</option>
     <option value="4c430d62-f1ba-474f-8e8a-4452c55ea0a8">&nbsp;Institution1</option>
     <option value="e1a4efa7-352d-410a-957e-35c8a3b92944">&nbsp;Institution / test</option>
    </select>
</td>

我也试过这个：

  option = find(:xpath, "//*[@id='organizationSelect']/option[2]").text  
  select(option, :from => organizationSelect)

但是会导致这个错误：

Ambiguous match, found 2 elements matching option "Institution" (Capybara::Ambiguous)

那么如何从下拉列表中选择第一、第二、第三等选项（使用 Capybara）？

【参考方案1】：

由于某种原因，它对我不起作用。所以我不得不使用别的东西。

select "option_name_here", :from => "organizationSelect"

为我工作。

【讨论】：

奇怪，这对我不起作用，因为该方法似乎至少需要 3 个选项。虽然您建议的代码与水豚指南中的示例代码相匹配。

不是form，是from。这是documentation on select

也许值得注意的 from 值是名称、id 或标签文本。即“#organizationSelect”不正确，但“organizationSelect”应该可以工作。

这对我不起作用，但 carols10cents 的解决方案可以。这不是对您的回答的批评。我只是觉得很奇怪，即使在最新版本的 capybara 上，有些调用可以工作，有些调用却不能，即使直觉会让你相信多种解决方案看起来是有效的。它快把我逼疯了。这与 firefox（或水豚最终使用的任何浏览器）有关吗？

我认为这只有在选项名称和选项值相同时才有效。

【参考方案2】：

如果你看一下the source of the select method，你会发现当你传递一个from 键时它的作用本质上是：

find(:select, from, options).find(:option, value, options).select_option

换句话说，它会找到您感兴趣的<select>，然后在其中找到<option>，然后在<option> 节点上调用select_option。

您已经完成了前两件事，我只是重新排列它们。然后你可以在末尾添加select_option 方法：

find('#organizationSelect').find(:xpath, 'option[2]').select_option

【讨论】：

希望为将来研究此问题的人添加此参考：gist.github.com/zhengjia/428105

很好的答案！我想在 Rails 5 中补充一点，您也可以通过以下方式进行操作：select('option_name', from: 'select_box')。其中值可以是：id、name、相关标签元素。您可以阅读有关 Capybara 和 DSL 选项的更多信息here。

【参考方案3】：

另一种选择是添加这样的方法

  def select_option(css_selector, value)
    find(:css, css_selector).find(:option, value).select_option
  end

【讨论】：

有用的选项find("select[name='organization_search[role]']").find(:option, text: :Staff).select_option

find(:css, "#search_field").find(:option, "Opp Last Name").select_option，这是显示的选项文本，对我有用，而选项的值没有。

【参考方案4】：

要添加另一个答案（因为显然有很多方法取决于您的设置） - 我通过选择文字 option 元素并单击它来做到这一点

find(".some-selector-for-dropdown option[value='1234']").select_option

它不是很漂亮，但它可以工作：/

【参考方案5】：

不幸的是，最受欢迎的答案并不完全适合我。我必须在语句末尾添加.select_option

select("option_name_here", from: "organizationSelect").select_option

没有select_option，不会执行任何选择

【讨论】：

你怎么能调用.select_option，因为select方法返回一个布尔值？

【参考方案6】：

在 2017 年的 capybara 2.7 中，没有一个答案对我有用。 我得到“ArgumentError：参数数量错误（给定 2，预期为 0）”

但是这样做了：

find('#organizationSelect').all(:css, 'option').find  |o| o.value == 'option_name_here' .select_option

【参考方案7】：

这是我发现的最简洁的方法（使用 capybara 3.3.0 和 chromium 驱动程序）：

all('#id-of-select option')[1].select_option

将选择第二个选项。根据需要增加索引。

【参考方案8】：

在 Capybara 中，您只能将 find 与 xpath

一起使用

find(:xpath, "//*[@id='organizationSelect']/option[2]").click

和方法点击

【参考方案9】：

这不是一个直接的答案，但您可以（如果您的服务器允许）：

1) 为您的组织创建模型； extra: 填充 HTML 会更容易。

2) 为您的模型创建工厂 (FactoryGirl)；

3）用工厂创建一个列表（create_list）；

4) 从列表中“挑选”（样本）一个组织：

# Random select
option = Organization.all.sample 

# Select the FIRST(0) by id
option = Organization.all[0] 

# Select the SECOND(1) after some restriction
option = Organization.where(some_attr: some_value)[2]
option = Organization.where("some_attr OP some_value")[2] #OP is "=", "<", ">", so on... 

【讨论】：

如果我必须创建一个模型，使用水豚没有意义

这根本不是答案。这是关于水豚的问题。