Playwright で ファイル選択はできるが formData が送信できない時は buffer を指定する

問題

公式に以下のような使用例があるが、
ファイル選択はできるものの、その後の実際にアップロード送信がうまくいかない

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

https://playwright.dev/docs/api/class-filechooser

解決

• fileChooser.setFiles の引数としてファイル本体を渡したつもりでも、画面に表示される「ファイル名」の部分しかエミュレートできていなさそうに思えた

以下のように

• fs で ファイルから buffer を得るなどして、ファイル本体としての buffer を作っておく
• 引数として buffer にオブジェクトを渡す

ということで期待通り動いた

import fs from 'fs'

test('UPLOAD SAMPLE', async ({ page }) => {
  const fileBuffer = fs.readFileSync('/path/to/example.csv')
  await page.getByText('Upload file').click()

  const fileChooserPromise = page.waitForEvent('filechooser')
  const fileChooser = await fileChooserPromise

  await fileChooser.setFiles({
    name: 'filename',
    mimeType: 'xxx',
    buffer: fileBuffer,
  })

})

環境

• Nuxt3
• Playwright 1.4

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

プロフィール・経歴

https://github.com/YumaInaura/YumaInaura

公開日時

2024-02-22