playwright 实现自动上传，多元素操作

1. 文件上传

在Playwright中，使用locator.setInputFiles()完成文件上传操作。

单个文件

await page.getByLabel('Upload file')
  .setInputFiles(path.join(__dirname, 'myfile.pdf'));

多个文件

await page.getByLabel('Upload files')
  .setInputFiles([
    path.join(__dirname, 'file1.txt'),
    path.join(__dirname, 'file2.txt'),
]);

清除文件

传入空数组即可

await page.getByLabel('Upload file')
  .setInputFiles([]);

内存缓存

// Upload buffer from memory
await page.getByLabel('Upload file').setInputFiles({
  name: 'file.txt',
  mimeType: 'text/plain',
  buffer: Buffer.from('this is test')
});

2. 事件监听page.on('filechooser')

文件上传通常实现类似于

<input type="file">..

如果不是类似上面的动态创建方式的话，就需要监听对应event：

// Start waiting for file chooser before clicking. Note no await.
const fileChooserPromise = page.waitForEvent('filechooser');
await page.getByLabel('Upload file').click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(__dirname, 'myfile.pdf'));

3. 完整示例

3.1 Playwright项目配置

以NodeJS为例，配置如下 确保你的项目已经配置好Playwright。如果还没有，可以使用以下命令安装Playwright：

npm install