如何使用 capybara 选择一个 select2 下拉字段

Question

有在线帮助将 select2 与 capybara 结合使用（请参阅下面的链接），但据我所见，对于 select2 下拉字段没有帮助。我尝试了各种各样的事情，包括尝试在 :js => false 时填写该字段（使用类似于 find(:xpath, "//input[@id='product_manufacturer_id']").set "Test product manufacturer" 的内容）或对其他 select2 字段有效的解决方案的变体（请参阅下面给出的链接）。到目前为止，没有什么对我有用。

关于我的配置的注意事项：

• 使用 select2 版本 3
• 使用 capybara WebKit
• 这个特定的字段也使用简单的形式，并且是一个关联（f.association...也是如此）。特别是，ProductManufacturer 实例与产品之间存在has_many 关系。
• select2 下拉字段应该由匹配查询文本（即您在搜索字段中键入的文本）的ProductManufacturer 实例动态填充。

如果了解我如何实现工厂会有所帮助：

这是我的工厂文件：

factory :product do
  name "Test product"
  url { Faker::Name.name.parameterize }
  access_level 1
  product_manufacturer
end

factory :product_manufacturer do
  name "Test product manufacturer"

  factory :product_manufacturer_with_product do
    transient do
      products_count 1
    end

    after(:create) do |product, evaluator|
      create_list(:product,
                   evaluator.products_count,
                   product: product)
    end
  end
end

然后，在测试开始之前，我运行：

@product_manufacturer = create(:product_manufacturer)

我最近的尝试： 我的辅助方法（适用于我的其他 select2 字段）：

def select2_choose(id, options)
  page.execute_script  "$('#{id}').trigger('keydown').val('{options[:query]}').trigger('keyup');"
  find(".select2-result-label", :text => options[:choose]).click
end

然后我是如何实现的：

select2_choose( "#s2id_autogen7", 
  :query => @product_manufacturer.name[0...-2], 
  :choose => @product_manufacturer.name)

输出如下错误信息：

Failure/Error: create_product
Capybara::ElementNotFound:
   Unable to find css ".select2-result-label" with text "Test product manufacturer"

（基本意思是找到并点击了下拉框，并且输入了查询文本“测试产品制造”。但是select2没有从数据库中找到选项来找到它。）

注意我已经成功使用factory_girl生成了我的ProductManufacturer实例对象@product_manufacturer，调用puts @product_manufacturer等东西成功，返回实例对象：ProductManufacturer:0x007f0145f9cb38>。

这是测试失败前的屏幕截图：

其他相关但未完全解决此问题的问题：

- 选择 select2 下拉菜单（但不是在 capybara 中）：

How to select option in drop down using Capybara

Unable to select item in Select2 drop down

- 在 capybara 中选择 select2 选项（但不使用下拉菜单）：

How to test a Select2 element with capybara DSL?（注意：我已成功使用此处的答案来选择非下拉 select2 字段）

- 使用 selenium 选择 select2 下拉菜单

Selenium Select2 command for drop-down box

Answer 1

Capybara 的字段操作（fill_in、set 等）仅适用于基本的 html 表单字段，不适用于 JS 驱动的小部件，因为它们通常隐藏基本字段。在 Capybara 中使用任何 JS 驱动的小部件的关键是执行用户必须执行的操作，在这种情况下是单击可见元素以触发下拉菜单，然后单击要选择的元素。

例如，要从示例页面http://select2.github.io/examples.html 上的第一个 select2 下拉列表中选择“加利福尼亚”，可以这样做

first('.select2-container', minimum: 1).click
find('li.select2-results__option[role="treeitem"]', text: 'California').click

如果你想通过输入搜索词而不是点击结果来做到这一点，它会是这样的

first('.select2-container', minimum: 1).click
find('.select2-dropdown input.select2-search__field').send_keys("California", :enter)

如果您正在测试 Web 应用程序，则使用 execute_script 和 trigger 是个坏主意，因为它绕过了对用户实际可以做什么的大多数检查，如果您只是自动化页面，它们很好

Answer 2

事实证明，我的问题只是我需要在加载带有表单的页面之前运行工厂，以便可以通过 select2 选择它们。

换句话说，我试图这样做：

click_link "New Product"
create(:product_manufacturer)

什么时候我应该这样做：

create(:product_manufacturer)
click_link "New Product"

Answer 3

您还可以查看 capybara-select-2 gem，它为 Capybara 提供了 select2 助手。它适用于 select2 版本 3。它还支持版本 4（以防万一你升级）

select2 'Test product manufacturer', from: 'Product manufacturer'

如果您需要搜索选项（或进行 Ajax 调用），您可以执行以下操作：

select2 'Test product manufacturer', from: 'Product manufacturer', search: true

Answer 4

点击下拉箭头打开选择选项

find('span.select2-selection__arrow').click

点击选项将其选中

find('li.select2-results__option', text: 'Exactly content/text of your search').click

More info on here