如何使用水豚 select 一个 select2 下拉字段

Question

有关于将 select2 与水豚一起使用的在线帮助（请参阅下面的链接），但就我所见的 select2 下拉字段而言，没有任何帮助。我已经尝试了各种各样的事情，包括尝试在 :js => false 时填写字段（使用 find(:xpath, "//input[@id='product_manufacturer_id']").set "Test product manufacturer" 的内容）或在其他 select2 字段上工作的解决方案的变体（见下面给出的链接）。到目前为止，我没有任何效果。

我的配置注意事项：

使用 select2 版本 3
使用水豚 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"

(这基本上意味着它已经找到并点击了下拉框，并且它已经输入了查询文本，"Test product manufacture"。但是 select2 没有从中找到选项数据库中找到它。）

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

这是测试失败前的截图：

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

- 选择 select2 个下拉列表（但不在水豚中）：

How to select option in drop down using Capybara

Unable to select item in Select2 drop down

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

How to test a Select2 element with capybara DSL?（注意：我成功地将此处的答案用于 select 非下拉 select2 个字段）

- selecting select2 下拉菜单使用 selenium

Selenium Select2 command for drop-down box

Answer 1

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

例如，从示例页面上的第一个 select2 下拉菜单 select "California" http://select2.github.io/examples.html 可以像

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)

如果您正在测试网络应用程序，则使用 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

单击下拉箭头打开select离子选择

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

点击select选项

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

More info on here

如何使用水豚 select 一个 select2 下拉字段

How to use capybara to select a select2 drop-down field

rspec

capybara

capybara-webkit

select2

factory-bot