WebdriverIO文件上传后无法触发modal弹窗的问题咨询

问题根因 #

常规文件上传实现逻辑，是直接向<input type="file">元素赋值文件路径，本质绕过了操作系统原生的文件选择弹窗流程。目标网站的后续Modal弹出逻辑，绑定在「原生文件选择弹窗点击确认」的回调事件上，直接赋值路径不会触发这个事件，自然会导致流程中断。
另外要明确：系统原生文件选择弹窗不属于浏览器Web上下文，WebdriverIO本身没有直接操作这类原生控件的能力，不要尝试通过窗口句柄切换的方式操作弹窗，这类方法只对浏览器内的Web弹窗生效。

方案1：模拟事件触发（推荐，跨环境兼容） #

完全绕开原生文件选择弹窗，在给file input赋值后，手动触发页面对应的监听事件，完全模拟用户选完文件点确认的交互行为，本地、Selenium Grid、云测平台环境都能稳定运行。
示例代码：

// 1. 不要点击会唤起原生弹窗的外层上传按钮，直接定位type=file的输入元素
// 注意：多数站点的file input会被设置为隐藏（opacity:0/position:absolute移出可视区），不影响赋值操作
const fileInput = await $('input[type="file"]')

// 2. 传入待上传文件的绝对路径，多文件上传传入路径数组即可
await fileInput.setValue('/your/local/absolute/path/to/test-file.png')

// 3. 手动触发元素绑定的change、input事件，冒泡到文档层匹配页面的监听逻辑
await browser.execute((el) => {
  const changeEvent = new Event('change', { bubbles: true })
  const inputEvent = new Event('input', { bubbles: true })
  el.dispatchEvent(inputEvent)
  el.dispatchEvent(changeEvent)
}, fileInput)

// 4. 等待后续上传Modal弹出即可
await $('.upload-confirm-modal').waitForDisplayed({ timeout: 5000 })

适配注意点：

• 如果站点是拖拽上传逻辑，把触发事件替换为drop事件即可，同时给事件对象补上dataTransfer的文件数据
• 如果页面给上传按钮加了选中态校验，可以在赋值前先给外层按钮加个对应的选中类名，或者触发对应按钮的点击状态标记，绕过前置校验
• 远程Selenium环境运行时，先用await browser.uploadFile(localPath)把本地文件上传到Selenium节点，拿返回的节点路径再传给setValue，避免找不到文件。

方案2：系统级模拟点击（仅本地运行兜底用） #

如果站点逻辑强绑定原生弹窗唤起流程，没法通过模拟事件绕过，本地调试时可以配合系统自动化工具模拟点击弹窗的确认按钮。
跨平台可以用robotjs，macOS可以直接调用原生AppleScript，Windows可以用AutoIt编译脚本调用，以macOS+Chrome为例：

const { execSync } = require('child_process')

// 1. 点击上传按钮唤起原生文件选择弹窗
await $('#upload-trigger-button').click()
// 等待弹窗渲染完成
await browser.pause(1200)

// 2. 调用系统脚本点击弹窗的「打开/确认」按钮，注意匹配系统语言的按钮文案
execSync(`osascript -e 'tell application "System Events" to tell process "Google Chrome" to click button "打开" of sheet 1 of front window'`)

// 3. 等待Modal弹出
await $('.upload-confirm-modal').waitForDisplayed({ timeout: 5000 })

该方案缺陷：

• 兼容性差，不同系统、系统语言、浏览器版本的弹窗结构、按钮文案都不一样，适配成本高
• 运行过程中不能移动鼠标、切换窗口焦点，否则会点击失效
• Selenium Grid、云测平台等远程运行场景无法使用。

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