在 Playwright 测试中使用 page.setInputFiles() 时遇到的 Firefox 特定问题

Question

尝试在 Playwright 测试中通过 GitHub Actions 在 Firefox 浏览器上使用 page.setInputFiles() 方法时会出现问题。在本地主机上进行的测试有 0 个问题。虽然代码在 Chrome 和 Safari 上运行顺利，但在 Firefox 上与文件输入元素交互时遇到错误或意外行为。

这是我的代码：

import { test } from '@playwright/test'

test('Upload', async ({ page }) => {
  await page.goto(`TestURL/login`)
  await page.getByRole('button', { name: 'Ok, accept all' }).click()
  await page.getByLabel('Email address').fill(`userEmail`)
  await page.getByLabel('Password').fill(`${user Pass}`)
  await page.getByRole('button', { name: 'Log In', exact: true }).click()
  await page.getByRole('link', { name: 'Create' }).click()
  await page.getByText('Upload new music').click()

  const metaData = {
    title: 'Mocked Song Title',
    artist: 'Mocked Song Artist',
    album: 'Mocked Song Album',
    picture: {
      mimeType: 'image/jpeg',
      buffer: Buffer.from(
        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
        'base64'
      ),
    },
  }
  const buffer = Buffer.alloc(1024 * 1024, 'a')
  const fileContent = Buffer.concat([
    Buffer.from('ID3'),
    Buffer.from([4, 0, 0, 0]),
    Buffer.from(JSON.stringify(metaData)),
    buffer,
  ])
  const mockedFilePath = './mockedFile.mp3'
  require('fs').writeFileSync(mockedFilePath, fileContent)

  await page
    .locator('div')
    .filter({ hasText: 'Click to upload music or drag and dropMP3' })
    .nth(1)
    .click()
  await page.setInputFiles('input[type="file"]', mockedFilePath)
  await page.locator('textarea').click()
  await page.locator('textarea').fill('Test upload')
  await page.locator('div').filter({ hasText: 'Change image' }).nth(1).click()
  await page.setInputFiles('input[type="file"]', {
    mimeType: 'image/jpeg',
    name: 'mockedImage.jpg',
    buffer: Buffer.from(
      'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==',
      'base64'
    ),
  })
  await page.getByLabel('Title', { exact: true }).click()
  await page.getByLabel('Title', { exact: true }).fill('mocked song')
  await page.getByRole('button', { name: 'Upload music' }).click()
  await page.getByText('Song uploaded successfully').click()
})

当尝试在 Firefox 上的 Playwright 测试中使用 page.setInputFiles() 方法时，我希望文件能够成功上传到页面上的文件输入元素。我在 Chrome 和 Safari 上测试了代码，它运行没有任何问题。但是，在 Firefox 上运行测试时，出现错误或意外行为。

我尝试将 Playwright 库和 Firefox 更新到最新版本，以确保两者之间的兼容性。我还验证了文件输入选择器 (input[type="file"]) 是否准确地定位了页面上的正确元素。此外，我还使用不同的文件输入进行了测试，以排除特定于所使用的文件的任何问题。

尽管做出了这些努力，问题仍然存在。特别是在 Firefox 上执行 page.setInputFiles() 方法时出现错误或意外行为，导致文件无法成功上传并导致测试失败

这是剧作家测试报告：

 1) [firefox] › upload.spec.ts:3:5 › Upload ───────────────────────────────────────────────────────

frame.setInputFiles: Target closed
=========================== logs ===========================
waiting for locator('input[type="file"]')
============================================================

  37 |     .nth(1)
  38 |     .click()
> 39 |   await page.setInputFiles('input[type="file"]', mockedFilePath)
     |   ^
  40 |   await page.locator('textarea').click()
  41 |   await page.locator('textarea').fill('Test upload')
  42 |   await page.locator('div').filter({ hasText: 'Change image' }).nth(1).click()


Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

frame.setInputFiles: Target page, context or browser has been closed

  37 |     .nth(1)
  38 |     .click()
> 39 |   await page.setInputFiles('input[type="file"]', mockedFilePath)
     |   ^
  40 |   await page.locator('textarea').click()
  41 |   await page.locator('textarea').fill('Test upload')
  42 |   await page.locator('div').filter({ hasText: 'Change image' }).nth(1).click()



Retry #2 ───────────────────────────────────────────────────────────────────────────────────────

frame.setInputFiles: Target closed
=========================== logs ===========================
waiting for locator('input[type="file"]')
============================================================

  37 |     .nth(1)
  38 |     .click()
> 39 |   await page.setInputFiles('input[type="file"]', mockedFilePath)
     |   ^
  40 |   await page.locator('textarea').click()
  41 |   await page.locator('textarea').fill('Test upload')
  42 |   await page.locator('div').filter({ hasText: 'Change image' }).nth(1).click()

Answer 1

我认为在 Firefox 中运行剧作家测试时，这种情况也发生在我身上。

阅读剧作家文档后我重构了

await page.setInputFiles('input[type="file"]','name.png');

到

const fileChooserPromise = page.waitForEvent('filechooser');
await page.getByRole('button', { name: button name }).click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles(path.join(__dirname, filePath));

它似乎开始工作了。