Puppeteer多文件上传时page.waitForFileChooser()后续调用超时问题

问题场景 #

用Puppeteer开发时，遇到需要给不同输入框上传多张图片的需求。给每个输入框调用page.waitForFileChooser()方法，第一个输入框能正常完成上传，但后面的调用全都超时，报错：

TimeoutError: Waiting for FileChooser failed: 30000ms exceeded

初始代码 #

// 第一张图片上传
const [fileChooser] = await Promise.all([
    page.waitForFileChooser(),
    page.click('#inputOne'),
]);

await fileChooser.accept(['imageOne.jpg']);


// 第二张图片上传
const [fileChooserTwo] = await Promise.all([
    page.waitForFileChooser(),
    page.click('#inputTwo'),
]);

await fileChooserTwo.accept(['imageTwo.jpg']);

问题原因 #

推测是竞态条件导致：第一次上传完成后，页面DOM状态或事件队列还未稳定，此时立刻触发第二次文件选择器监听和点击操作，导致waitForFileChooser无法正确捕获到文件选择弹窗的触发事件。

修复后的代码 #

通过在触发点击前添加1秒等待，让页面状态稳定后再操作，解决了超时问题：

// 第一张图片上传
const [fileChooser] = await Promise.all([
    page.waitForFileChooser(),
    page.waitForTimeout(1000),
    page.click('#inputOne'),
]);

await fileChooser.accept(['imageOne.jpg']);


// 第二张图片上传
const [fileChooserTwo] = await Promise.all([
    page.waitForFileChooser(),
    page.waitForTimeout(1000),
    page.click('#inputTwo'),
]);

await fileChooserTwo.accept(['imageTwo.jpg']);

小提示：修复代码里Promise.all内部不需要给page.waitForTimeout和page.click加await，Promise.all会自动处理异步操作的并行等待，原代码里的await属于冗余写法，去掉后不影响效果且更规范。

内容的提问来源于stack exchange，提问作者A.Fonseca