Playwright page.setInputFiles()在GitHub Actions Firefox环境上传失败问题

问题概述 #

在GitHub Actions环境运行Playwright测试时，Firefox浏览器使用page.setInputFiles()方法上传文件会触发异常，本地测试无此问题，且Chrome、Safari浏览器下代码运行正常。预期文件可成功上传至页面的文件输入元素，但Firefox执行该方法时报错，导致测试失败。

已尝试的排查操作 #

• 更新Playwright与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()
})

报错信息 #

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()

内容的提问来源于stack exchange，提问作者KScislo