Playwright中自定义浏览器上下文导致视频录制失效的解决方案

问题背景

在使用Playwright进行自动化测试时，开发者经常需要自定义浏览器上下文（Browser Context）的配置参数，例如设置不同的User-Agent来模拟不同设备或浏览器的访问。然而，当开发者尝试通过fixture方式自定义浏览器上下文时，可能会遇到视频录制功能失效的问题。

问题现象

在Playwright测试中，当开发者按照以下方式自定义浏览器上下文时：

context: async ({ browser }, use) => {
  const userAgents = [
    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
  ]
  const context = await browser.newContext({
    userAgent: getRandomValue(userAgents),
  })
  await use(context)
  await context.close()
}

尽管在playwright.config.ts中配置了video: "retain-on-failure"，测试失败时仍然无法获取视频记录，只有trace和截图会被保留。

原因分析

这种情况发生的原因是Playwright的视频录制功能依赖于浏览器上下文的生命周期管理。当开发者手动创建并关闭浏览器上下文时，会干扰Playwright内置的视频录制机制。具体来说：

1. Playwright的视频录制是在浏览器上下文创建时开始的
2. 视频文件只有在浏览器上下文正确关闭后才会被保存
3. 手动调用context.close()会提前终止录制过程
4. 内置的视频录制功能无法正确处理这种自定义上下文的场景

解决方案

Playwright官方推荐使用更安全的方式来修改User-Agent等浏览器上下文参数，而不需要完全自定义浏览器上下文的创建和销毁过程。以下是推荐的实现方式：

import { test as baseTest } from '@playwright/test';

const test = baseTest.extend({
  userAgent: async ({ }, use) => {
    const userAgents = [
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36",
    ]
    const userAgent = userAgents[Math.floor(Math.random() * userAgents.length)]
    await use(userAgent)
  }
})

test(`测试用例`, async ({ page }) => {
  console.log(await page.evaluate(() => navigator.userAgent))
});

这种方法的好处是：

1. 不干扰Playwright内置的浏览器上下文管理
2. 保持视频录制功能的正常工作
3. 仍然可以实现随机User-Agent的需求
4. 代码更加简洁和可维护

最佳实践

在使用Playwright时，对于浏览器上下文的定制，建议遵循以下原则：

1. 尽量使用Playwright提供的fixture扩展机制，而不是完全重写上下文管理
2. 对于简单的参数修改（如User-Agent），使用专门的fixture属性
3. 避免手动调用context.close()，除非有特殊需求
4. 如果必须自定义上下文创建，确保理解对视频录制、trace等功能的潜在影响

通过这种方式，开发者可以在满足测试需求的同时，保持Playwright所有内置功能的正常工作，包括视频录制、截图和trace记录等。