Selenium处理type为text的input元素实现文件上传的问题咨询

核心原因说明 #

你遇到的是基于ng-file-upload（AngularJS上传组件）的自定义上传逻辑：id为filepath的文本框仅做文件名展示用，实际上传的文件流绑定在隐藏的type="file"元素的ng-model上，仅修改文本框内容无法触发上传逻辑。

操作步骤 #

1. 定位正确的上传控件
   页面共存在3个隐藏的type="file"元素，不要全局查找，要限定在当前打开的上传模态框DOM范围内查找，避免选中其他页面残留的无效控件。

2. 修改上传控件可见性
   Selenium对完全隐藏的元素操作可能无法触发Angular的绑定事件，先通过JS修改元素样式：

# 替换为你定位到的正确file元素
file_input = driver.find_element_by_css_selector('input[type="file"][ng-model="model"]')
driver.execute_script("""
arguments[0].style.visibility = 'visible';
arguments[0].style.width = '1px';
arguments[0].style.height = '1px';
arguments[0].style.position = 'relative';
arguments[0].removeAttribute('ng-show');
""", file_input)

3. 传入文件绝对路径
   必须传入系统可访问的绝对路径，确保文件权限正常：

import os
# 替换为实际文件路径
file_absolute_path = "/home/yourname/test/upload_file.pdf"
file_input.send_keys(file_absolute_path)

4. 同步文件名到展示文本框，触发Angular校验
   手动选择文件时组件会自动同步文件名到filepath文本框，这里需要手动触发事件让Angular识别到数据变更：

filepath_input = driver.find_element_by_id("filepath")
file_name = os.path.basename(file_absolute_path)
driver.execute_script("""
arguments[0].value = arguments[1];
// 触发输入变更事件
arguments[0].dispatchEvent(new Event('input'));
arguments[0].dispatchEvent(new Event('change'));
// 同步Angular作用域数据
angular.element(arguments[0]).scope().$apply();
""", filepath_input, file_name)

5. 点击上传按钮提交
   完成上述操作后直接点击页面的上传按钮即可完成提交。

常见问题排查 #

• 确认ChromeDriver版本和Chrome 91.0.4472.114完全匹配，版本差超过1个小版本可能出现操作无响应的问题
• 不要移除filepath文本框的readonly属性修改值，组件本身有校验逻辑，非法修改会导致提交失败
• 如果提交失败可以在触发上传前等待500ms，留足Angular数据同步的时间

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