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

Posted 2021-05-04

在线帮助使用带有capybara的select2（参见下面的链接），但就我在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下拉（但不是在水豚）：

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字段）

- 使用硒选择select2下拉菜单

Selenium Select2 command for drop-down box

答案

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

例如，要从示例页面http://select2.github.io/examples.html上的第一个select2下拉列表中选择“California”，它可以像

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是不好的想法，如果你正在测试一个网络应用程序，因为它绕过了大多数用户实际可以做的检查，如果你只是自动化一个页面，它们就没问题了

另一答案

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

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

click_link "New Product"
create(:product_manufacturer)

什么时候我应该这样做：

create(:product_manufacturer)
click_link "New Product"

另一答案

你也可以看看为水豚提供capybara-select-2 gem助手的select2。它适用于select2版本3.此外，它支持版本4（以防万一你升级）

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

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

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