使用Playwright时文件上传代码不生效是什么原因？

核心错误原因 #

你的代码存在多个直接导致上传失败的问题：

• 事件监听时序完全颠倒：先执行点击触发文件选择弹窗，之后才注册filechooser事件监听器。点击动作执行后文件选择器会立刻触发，此时监听器还未绑定，根本捕获不到事件，setFiles逻辑永远不会执行。
• 手动事件绑定缺少异步等待对齐：就算把监听移到点击前，不做Promise包装做流程等待的话，也容易出现执行流错位，拿不到fileChooser实例。
• 高频附带问题：文件路径传入相对路径导致运行时寻址失败、用on而非once绑定事件造成监听器内存泄漏。

你当前使用的1.19.2版本不存在相关API兼容问题，不需要升级依赖即可修复。

正确实现写法 #

Playwright官方推荐使用waitForEvent配合Promise.all处理文件上传场景，从API层面规避时序问题，写法稳定不易出错：

const [fileChooser] = await Promise.all([
  // 提前等待文件选择器事件触发
  page.waitForEvent('filechooser'),
  // 并行执行触发文件选择弹窗的点击操作
  mainPage.clickElement('locator for the element "Add logo"')
])
// 拿到文件选择器实例后传入文件，建议传绝对路径避免寻址错误
await fileChooser.setFiles('/your/local/absolute/path/to/logo.jpg')

如果你偏好手动绑定事件的写法，必须严格遵守「先注册监听、后触发点击」的顺序，同时用once绑定避免内存泄漏：

const path = require('path')
// 第一步：提前注册事件监听，包装为Promise
const fileChooserPromise = new Promise(resolve => {
  page.once('filechooser', resolve)
})
// 第二步：执行点击触发弹窗
await mainPage.clickElement('locator for the element "Add logo"')
// 第三步：等待弹窗实例返回，选择文件
const fileChooser = await fileChooserPromise
// 用path模块转绝对路径，避免相对路径寻址失败
const logoPath = path.resolve(__dirname, './assets/test-logo.jpg')
await fileChooser.setFiles(logoPath)

补充提示：如果上传按钮对应的DOM是<input type="file">元素，还可以直接定位到该input元素调用setInputFiles方法，不需要触发点击、等待文件选择器弹窗，写法更简洁。

内容的提问来源于stack exchange，提问作者Vlad Easy