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

Question

所以我目前正在尝试使用 Playwright 在 Electron 应用程序上自动上传个人资料照片，我运行遇到了 'filechooser' 事件的问题。

 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 }
   );

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

Playwright 显示的错误是

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

waiting for event "filechooser"

有人知道问题出在哪里吗？

Answer 1

我的拖鞋告诉我，如果你使用 window.showOpenFilePicker() 从用户那里获取文件，你根本不会得到 filechooser 事件。这是因为在内部，showOpenFilePicker 没有触发事件，因为它仍然是一个 WIP。可以在那里找到更多信息，但我认为目前没有解决方法 https://githubmemory.com/repo/microsoft/playwright/issues/8850

Pupetter 实际上有同样的问题：https://github.com/puppeteer/puppeteer/issues/5210`

一个解决方法是根本不使用 showOpenFilePicker()，而是依靠 <input> 元素来收集文件。这对开发人员来说有点麻烦，但更受支持，应该会触发 'filechooser' 事件。

另一个修复可能是添加一个函数，您可以在运行测试移动时覆盖它，甚至不需要打开文件选择器。像

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.
    }

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

Playwright upload file on non-input element

input

file-upload

electron

playwright

playwright-test