使用grouped_select时遭遇Capybara::ElementNotFound错误求助

我用grouped_select组件实现了嵌套关联的分组展示，但运行测试时Capybara找不到该输入组件里的指定选项，报错信息如下：

Capybara::ElementNotFound: Unable to find option "Ryan, Reynolds and Effertz" within #<Capybara::Node::Element tag="select"

以下是我的FactoryBot工厂定义及测试代码：

FactoryBot 工厂代码 #

project_type 工厂 #

FactoryBot.define do
  factory :project_type do
    organization

    name { FFaker::Company.unique.name }
  end
end

project_stage 工厂 #

FactoryBot.define do
  factory :project_stage do
    project_type

    name { FFaker::Company.unique.name }
  end
end

project 工厂 #

FactoryBot.define do
  factory :project do
    user
    stage factory: :project_stage

    name { FFaker::Company.unique.name }
    note { FFaker::Lorem.phrase }
    start_date { Date.new(2022, 01, 01) }
    end_date { Date.new(2022, 12, 19) }
    budget { 10000 }
  end
end

测试代码 #

test "should create project" do
  login_as @user
  visit projects_url
  find(:css, ".project-application .new-item").click

  fill_in "project_name", with: @project.name
  fill_in "project_budget", with: @project.budget
  fill_in "project_start_date", with: @project.start_date
  fill_in "project_end_date", with: @project.end_date
  fill_in "project_note", with: @project.note
  select(@project.stage.name, from: "Stade ")
  # fill_in "project_project_stage_id", with: @project.project_stage_id
  find(:css, ".hubflo-modal .save-item").click

  assert_text(:all, "Projet créé")
  find(:css, ".project-application .back-to-index").click
end

（原提问附带表单截图及元素检查截图）

解决方案 #

1. 核对选项文本的精确匹配 #

Capybara的select方法对文本匹配要求严格，要注意是否存在空格、大小写或特殊字符的差异。可以在测试中临时加入以下代码，打印出select组件下所有选项的实际文本，确认目标文本是否一致：

find('select[name="project[project_stage_id]"]').all('option').each { |opt| puts opt.text }

2. 通过value属性选择选项 #

如果文本匹配容易出问题，直接用选项的value属性选择更可靠——因为value是后台生成的唯一标识，不会受文本格式影响：

select(@project.stage.id.to_s, from: "Stade ", value: true)
# 或者直接定位select元素后执行选择操作
find('select[name="project[project_stage_id]"]').select(@project.stage.name)

3. 确认select元素的定位符准确 #

检查from: "Stade "是否精准匹配了select组件的label文本或name属性。从元素截图来看，select的name属性应为project[project_stage_id]，可以直接用这个name来定位：

select(@project.stage.name, from: "project[project_stage_id]")

4. 等待动态加载的选项完成 #

如果grouped_select是通过AJAX动态渲染的，需要确保选项完全加载后再执行选择操作：

# 等待目标选项出现后再选择
wait_until { find('select[name="project[project_stage_id]"]').has_content?(@project.stage.name) }
select(@project.stage.name, from: "Stade ")

内容的提问来源于stack exchange，提问作者Guillaume