如何使用Watir实现文件上传 无报错但图片上传失败问题解决

问题根因初步判断 #

你当前写的@browser.file_field.set代码默认匹配页面可见的<input type="file">元素，而你提供的HTML是Dropzone类的异步上传组件，这类组件会把原生的文件输入框设为隐藏状态，你直接调用file_field没有匹配到正确的上传元素，所以无报错也无上传效果。另外你写的文件路径C:banana.jpg格式错误，Windows系统下路径缺少分隔符。

排查步骤 #

• 第一步：定位真实的上传输入框
  打开目标页面的开发者工具（F12），在元素搜索框输入input[type="file"]，找到Dropzone组件自动生成的隐藏文件输入框，确认该元素的父节点、属性等定位条件。
• 第二步：修正本地文件路径
  Windows系统下的文件路径需要补全分隔符，正确格式为C:\\banana.jpg（双反斜杠转义）或C:/banana.jpg（正斜杠无需转义）。
• 第三步：校验元素可交互性
  Watir原生支持操作隐藏的file输入框，不需要额外修改元素的display属性，只要定位到正确的元素即可直接赋值。

修复后的代码示例 #

# 示例：定位id为dropzoneAdd节点下的隐藏文件输入框，可根据你实际查到的元素属性调整定位规则
upload_file = @browser.file_field(css: "#dropzoneAdd input[type='file']")
# 传入正确的文件绝对路径
upload_file.set "C:/banana.jpg"
# 可选：增加等待逻辑验证上传是否触发成功，等待预览区生成内容
@browser.div(id: "dropzonePreview").wait_until(&:present?)

特殊情况处理 #

如果直接操作file输入框仍无法触发上传，可以模拟拖拽事件完成上传：将本地文件拖拽到dropzone区域触发上传逻辑，该方案兼容性更高。

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