使用WDIO自动化时，如何通过execute方法修改元素display属性实现文件上传？

问题分析 #

你遇到的错误大概率是因为向execute方法传递元素对象时出现了序列化问题，WDIO在跨上下文传递DOM元素时容易出现异常。直接在execute的脚本内部通过选择器获取元素会更可靠。

正确实现代码 #

const inputFilePath = "#kyc-image-file-input";
// 直接在execute脚本内获取元素并修改display属性
await this.driver.execute((selector) => {
    const elem = document.querySelector(selector);
    if (elem) {
        elem.style.display = 'block';
        // 可选：同时处理其他可能隐藏元素的属性
        elem.style.visibility = 'visible';
        elem.removeAttribute('hidden');
    }
}, inputFilePath);

// 用waitUntil替代固定pause，等待元素可见
await this.driver.waitUntil(async () => {
    const elem = await this.driver.$(inputFilePath);
    return await elem.isDisplayed();
}, { timeout: 5000, timeoutMsg: '文件上传元素未正常显示' });

// 执行文件上传操作
const uploadElem = await this.digioPage.getPanAndAadhaarUploadFileInputEle();
await uploadElem.setValue(remoteFilePath);

补充说明 #

• 不要用硬编码的pause，改用waitUntil等待元素可见，这种方式更稳定，能适配不同环境的加载速度。
• 如果修改display后元素仍不可见，检查是否存在visibility: hidden或hidden属性，一并处理即可。
• 文件上传的input元素，只要修改后处于可见状态，setValue就能正常完成文件上传，这是WDIO处理文件上传的标准逻辑。

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