剧作家在非输入元素上上传文件

Question

因此，我目前正在尝试使用 Playwright 在 Electron 应用程序上自动上传个人资料照片，但遇到了“文件选择器”事件的问题。

 await windowA.click('data-testid');

  const [fileChooser] = await Promise.all([
    windowA.waitForEvent('filechooser'),
    // windowA.locator('text=Edit').click(),
    windowA.waitForTimeout(3000),

    windowA.locator(selector).click(),
  ]);

用于上传照片的元素不是输入类型，所以我正在使用

   await fileChooser.setFiles(
    [filepath],
    { timeout: 1000 }
   );

问题是试图让剧作家从弹出的输入对话框中选择图像，但它不会选择任何文件。我也一直在尝试让剧作家在我的装置文件夹中选择一个图像，该文件夹位于测试的相对路径中，但在这两种情况下都没有成功。

Playwright 显示的错误是

page.waitForEvent: Timeout while waiting for event "filechooser"

waiting for event "filechooser"

有人知道问题是什么吗？

Answer 1

如果您使用

window.showOpenFilePicker()

从用户处获取文件，则根本不会收到

filechooser

事件。这是因为在内部，

showOpenFilePicker

没有触发事件，因为它仍然是 WIP。

更多信息可以在playwright问题#8850中找到，但我认为目前没有解决方法。 （Pupetter 实际上也有同样的问题）

一个修复方法是根本不使用

showOpenFilePicker()

，而是依靠

<input>

元素来收集文件。这对于开发人员来说有点麻烦，但得到了更多支持，并且应该会触发

filechooser

事件。

另一个修复可能是添加一个在测试模式下运行时可以覆盖的函数，甚至不需要打开文件选择器，例如：

const getFileFromPicker = () => { 
  if(!isRunningInTest) { 
    // do the showOpenFilePicker logic as usual in the app
    // and the user will need to choose a file from it
  } else {
    // provide synchronously a buffer to use as file content,
    // and so do not even show the picker to the testing user.
  }
}