Rails 5.1.5中Materialize CSS下拉框值无法通过Capybara提交求助

嘿，我之前也踩过Materialize自定义下拉框的测试坑，这种组件不是原生的<select>标签，Capybara默认的select方法根本识别不了，咱们得模拟真实用户的操作流程来搞定它：

问题根源 #

Materialize会把原生的<select>隐藏，替换成自定义的div/ul/li结构来渲染下拉框。所以直接用select("选项文本", from: "select_id")这种原生方法完全没用，必须模拟点击触发下拉、选择选项的完整步骤。

修正后的测试代码示例 #

假设你的下拉框对应页面结构是Materialize标准的select-wrapper，可以这么修改测试：

require 'rails_helper'

feature 'organization management', js: true do
  let(:organization) { create :organization }

  scenario 'a user can view an organization they created' do
    set_session organization.user
    visit root_path

    # 1. 点击下拉框的触发区域（展开下拉列表）
    # 这里的选择器根据你页面实际结构调整，比如用select的id对应的wrapper，或者直接找.select-wrapper
    find("#your-select-id + .select-wrapper").click

    # 2. 等待下拉选项加载完成，再点击目标选项
    # 用文本匹配找到对应的li元素，确保等待元素可见
    target_option = find('.dropdown-content li', text: organization.name, visible: true)
    target_option.click

    # 可选：验证原生select的值是否被正确同步（确认选中生效）
    expect(find('#your-select-id', visible: false).value).to eq(organization.id.to_s)

    # 3. 提交表单
    click_button 'Submit' # 替换成你实际的提交按钮文本/选择器

    # 后续的断言逻辑...
  end
end

关键注意事项 #

• 精确选择器：尽量用更具体的选择器定位触发区域和选项，避免页面上多个下拉框冲突（比如结合原生select的id来找对应的wrapper）
• 等待元素可见：Materialize的下拉是动态渲染的，一定要确保选项元素可见后再点击，Capybara的find默认会等待，但如果遇到超时可以显式用expect(page).to have_selector来等待
• 验证选中状态：如果还是不确定是否选中，可以通过断言隐藏的原生<select>的value来确认，因为Materialize组件会自动同步这个值到原生元素

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