使用RSpec与Capybara测试动态DOM时无法识别新增文本如何解决

• 第一步：确认测试开启了JS支持
  默认的Capybara驱动RackTest不支持执行JavaScript，需要给对应测试用例添加js: true标记，启用支持JS的驱动（如Selenium、Cuprite）：

# 示例测试用例结构
RSpec.describe 'Label creation', type: :feature do
  # 必须加js: true才能执行页面JS逻辑
  it 'creates label successfully', js: true do
    fill_in 'message_setting_message_settings_labels_text', with: 'test label'
    find('span', text: 'Add').click
    expect(page).to have_content('test label')
  end
end

• 第二步：优化元素匹配和等待逻辑
  如果已经开启JS支持仍失败，可做以下调整：
  • 点击按钮时使用更精确的匹配规则，避免匹配到隐藏/重复元素：find('span', text: 'Add', exact_text: true, match: :first).click
  • 若JS插入逻辑有延迟（比如包含接口请求、setTimeout逻辑），可以给断言延长等待时间：expect(page).to have_content('test label', wait: 5)，单位为秒，覆盖JS执行的耗时
• 第三步：排查前端逻辑问题
  如果上面的配置都正确仍失败，可通过Capybara的save_and_open_screenshot、save_and_open_page方法查看点击后的页面实际状态，排查以下问题：
  • 点击Add按钮后JS是否报错，导致DOM未插入
  • Add按钮是否绑定了正确的点击事件，有没有阻止表单默认提交行为（如果按钮在form标签内未阻止默认提交，会触发页面刷新，动态插入的内容会丢失）
  • 插入的test label元素是否被设置了display: none、opacity: 0等隐藏样式，Capybara的have_content默认只会匹配可见内容，若确认是不可见元素需要匹配，可添加visible: false参数：expect(page).to have_content('test label', visible: false)

内容的提问来源于stack exchange，提问作者Bình Trương