Playwright视频录制配置问题：出现Must start traces before stopping报错

核心问题分析 #

你的代码存在几个关键错误，直接引发了Must start traces before stopping错误，同时破坏了Playwright的内置视频录制逻辑：

• 重复管理浏览器上下文：Playwright测试框架会自动为每个测试用例提供page对象（对应框架管理的上下文），但你在beforeEach里手动启动浏览器和创建上下文，还直接关闭了浏览器，导致框架后续操作的上下文已失效，触发trace相关错误。
• 配置冲突：你在playwright.config.ts中已经配置了内置自动视频录制，却又在测试代码里手动设置recordVideo，两种方式混用引发资源冲突。
• 变量作用域错误：全局声明的browser变量被beforeEach里的const browser覆盖，导致afterAll中的关闭操作无效。

修复步骤 #

1. 简化测试代码，移除手动浏览器/上下文操作 #

删掉beforeEach里手动创建和关闭浏览器的逻辑，直接使用框架提供的page对象：

let browser: { close: () => Promise<void> };

test.beforeEach(async({ page }) => {
    // 在这里编写你的前置操作，比如导航、登录等
});

test.afterAll(async () => {
    await browser?.close();
});

test.describe('General description of the tests', () => {
    test('First test description', async ({ page }) => {
        // 你的测试操作代码
    });
});

2. 统一视频录制配置 #

保留playwright.config.ts中的视频配置即可，无需手动设置recordVideo：

use: {
    baseURL: 'myurl',
    trace: 'on',
    video: {
      mode: 'retain-on-failure',
      size: {width:640, height:480} 
    },
    screenshot: 'only-on-failure'
},

如需调整视频尺寸，直接修改config里的size参数即可。

3. 解决trace错误 #

移除手动管理浏览器的代码后，框架会自动处理trace的启动与停止，Must start traces before stopping错误会自行消失。

额外说明 #

之前出现的end of central directory record signature not found错误，根源是手动管理上下文导致视频文件未正确生成。修复后框架会自动处理视频资源的保存，该问题不会再出现。

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