Rails中Capybara测试dropzone.js图片上传失败问题求助

我参考相关方案测试Dropzone文件上传，无基础代码错误，但测试始终失败。测试截图显示书籍封面未被附加，JPG文件的实际上传操作未执行，不知如何推进。

测试代码 #

# frozen_string_literal: true

require 'rails_helper'

RSpec.describe 'creating a book', type: :system do
  scenario 'displays a cover image if there is one', js: true do
    visit new_book_path
    fill_in 'Book Title', with: 'Catcher in the Rye'
    el = find('#book_cover', visible: false)
    el.attach_file('db/sample/images/cover-1.jpg')
    click_on 'Create Book'
    expect(page).to have_css('div.cover-large img')
  end
end

开发环境预期HTML结构 #

<div class="cover-large">
  <img src="...">
</div>

无真实图片时，img标签会被替换为渲染占位图的svg标签

表单相关HTML源码 #

<div
  class="form-col col-wide dropzone dropzone-default dz-clickable"
  data-controller="coverdrop"
  data-coverdrop-max-file-size="3"
  data-coverdrop-max-files="1"
>
  <input data-coverdrop-target="input" data-direct-upload-url="http://127.0.0.1:3000/rails/active_storage/direct_uploads" type="file" name="book[cover]" id="book_cover" />
  <div class="dropzone-msg dz-message">
    <h3 class="dropzone-msg-title heading4 color-primary-dark">Drag cover image here or click to browse</h3>
    <span class="dropzone-msg-desc small color-primary-dark">3 MB file size maximum. Allowed are only image file types.</span>
  </div>
</div>

对应的CSS设置type=file的input元素display=none

解决建议 #

• 确认文件路径有效性：避免使用相对路径，改用Rails.root.join('db/sample/images/cover-1.jpg')生成可靠的绝对路径，确保测试能找到目标文件。
• 触发Dropzone的事件感知：原生input被隐藏后，仅调用attach_file可能无法触发Dropzone的JS逻辑，需手动触发change事件：

  el = find('#book_cover', visible: false)
  el.attach_file(Rails.root.join('db/sample/images/cover-1.jpg'))
  el.trigger('change')
  

• 等待异步上传完成：Active Storage直接上传是异步操作，提交表单前需等待上传完成。可以等待预览区域出现：

  el.attach_file(Rails.root.join('db/sample/images/cover-1.jpg'))
  el.trigger('change')
  expect(page).to have_css('.dz-preview', wait: 10) # 等待预览加载完成
  click_on 'Create Book'
  

• 验证测试环境JS加载：确认测试驱动（如Selenium、Cuprite）正确加载了Dropzone脚本，可通过page.execute_script('return typeof Dropzone')检查是否初始化成功。
• 检查文件合规性：确认测试图片大小不超过3MB、格式为图片类型，避免因Dropzone的验证规则被拦截。

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