rspec - 如何使用 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)

使用 execute_script和 trigger如果您正在测试 Web 应用程序，这是个坏主意，因为它绕过了对用户实际可以执行的操作的大部分检查，如果您只是自动化页面，它们就很好