Webdriverio V9 无头模式下文件上传失败求助

问题现象 #

WebdriverIO从v8升级至v9后，文件上传功能在非无头模式下正常运行，但无头模式执行时失败，报错信息：

The uploadFile command is not available in chrome-headless-shell

用户提供的相关信息 #

配置文件片段 #

capabilities: [
    {
        maxInstances: 1,
        browserName: 'chrome',
        acceptInsecureCerts: true,
        'goog:chromeOptions': {
            args: [
                'headless', 'disable-gpu',
                '--window-size=1920,1080'
            ],
        },
    },
]

文件上传代码片段 #

async uploadFile(file) {
    const filePath = path.join(process.cwd(), DEFAULT_FILEPATH, file);
    console.debug("File path: ", filePath);
    const remoteFilePath = await browser.uploadFile(filePath);
    await fileuploadPage.inputFileUpload.setValue(remoteFilePath);
    await fileuploadPage.submitButton.click();
}

报错日志片段 #

[0-0] RUNNING in chrome - file:///src/test/specs/sanitySuite/test.dscreation.sanity.js
[0-0] File path:  /home/mahadev/Desktop/WDIO_V9_upgrade/ui_automation/src/utilities/files/Reorder.csv
[0-0] Error in "Mammoth Data Source Creation Sanity Tests.File upload @sanity"
Error: The uploadFile command is not available in chrome-headless-shell
    at async Utils.uploadFile (file:///home/mahadev/Desktop/WDIO_V9_upgrade/ui_automation/src/utilities/utils.js:63:32)
    at async Context.<anonymous> (file:///home/mahadev/Desktop/WDIO_V9_upgrade/ui_automation/src/test/specs/sanitySuite/test.dscreation.sanity.js:98:9)
[0-0] FAILED in chrome - file:///src/test/specs/sanitySuite/test.dscreation.sanity.js

解决方案 #

方案1：切换至新版无头模式参数 #

旧版headless参数会启动简化版的chrome-headless-shell，缺失部分功能。改用Chrome官方推荐的新版无头参数，启用完整功能的无头浏览器：
修改配置中的goog:chromeOptions.args：

'goog:chromeOptions': {
    args: [
        'headless=new', // 替换原有的'headless'参数
        '--window-size=1920,1080'
        // 移除'disable-gpu'，新版无头模式无需该参数
    ],
},

方案2：绕过uploadFile直接设置本地路径 #

对于本地运行的测试，无需调用browser.uploadFile，直接给文件输入框设置本地文件路径即可：
修改上传代码：

async uploadFile(file) {
    const filePath = path.join(process.cwd(), DEFAULT_FILEPATH, file);
    console.debug("File path: ", filePath);
    // 直接传入本地文件路径，无需上传到远程
    await fileuploadPage.inputFileUpload.setValue(filePath);
    await fileuploadPage.submitButton.click();
}

方案3：确保使用DevTools服务 #

WebdriverIO v9推荐使用devtools服务替代传统的chromedriver服务，以更好支持Chrome新特性：
在wdio配置文件中修改服务项：

services: ['devtools'],

问题原因 #

WebdriverIO v9对Chrome无头模式的适配逻辑发生变化：旧的headless参数启动的chrome-headless-shell是轻量版浏览器，不支持uploadFile这类依赖完整浏览器环境的命令；而headless=new参数启动的是功能完整的无头Chrome，与非无头模式行为一致。

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