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

Question

在线帮助使用带有水豚的select2（参见下面的链接），但就我所看到的select2下拉字段而言，没有任何帮助。我尝试了各种各样的事情，包括在以下情况下尝试填写该字段：js =＆gt; 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下拉（但不是在水豚）：

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?（注意：我成功地使用了这里的答案来选择非下拉选择2字段）

- 使用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)

使用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，它为水豚提供了priceObject.print(); 的帮助者。它适用于select2版本3。它还支持版本4（以防万一，如果您升级）

select2

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

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

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