自定义Playwright Context时视频未生成且无法嵌入HTML报告求解决方案

问题描述 #

配置文件playwright.config.ts中已设置video: "on"，但手动创建Browser Context后，视频未生成；使用recordVideo选项录制的视频仅存于独立文件夹，无法嵌入Playwright的HTML测试报告中。

原因分析 #

Playwright Test的内置视频录制功能（即配置文件中的video选项）仅对框架自动创建的Browser和Context实例生效。手动调用chromium.launch()、browser.newContext()创建的实例，不会被Playwright Test框架跟踪，因此无法触发配置中的视频录制规则，也无法将视频关联到HTML报告。

解决方案 #

方案1：使用Playwright Test内置的Context（推荐） #

直接使用Playwright Test提供的fixture（如page、browser、context），框架会自动应用配置中的视频设置，视频将自动生成并嵌入HTML报告。

修改后的测试代码：

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

test('test', async ({ page }) => {
    await page.goto('https://www.google.com');
    // 无需手动关闭context或browser，框架会自动处理资源释放
});

如果需要自定义Context配置，可基于框架的browser fixture创建，并继承全局配置：

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

test('test with custom context', async ({ browser }) => {
    // 继承全局配置的video设置，同时可添加自定义配置项
    const context = await browser.newContext(test.use());
    const page = await context.newPage();
    await page.goto('https://www.google.com');
    await context.close();
});

方案2：手动关联视频到测试报告（不推荐） #

若必须手动创建Context，需手动处理视频录制并将其关联到测试报告的附件中：

import { chromium } from 'playwright';
import { test } from '@playwright/test';

test('test with manual context', async () => {
    const browser = await chromium.launch();
    // 指定视频存储目录，可按需设置视频尺寸
    const context = await browser.newContext({
        recordVideo: { dir: 'videos/' }
    });
    const page = await context.newPage();
    await page.goto('https://www.google.com');
    
    // 获取生成的视频文件路径
    const videoPath = await page.video()?.path();
    if (videoPath) {
        // 将视频添加为测试报告附件，实现嵌入效果
        test.info().attachments.push({
            name: 'test-video',
            path: videoPath,
            contentType: 'video/webm'
        });
    }

    await context.close();
    await browser.close();
});

注意：此方案需手动管理视频文件的生命周期，且无法享受框架自动清理冗余视频、失败时自动保留视频等特性，仅在特殊场景下使用。

总结 #

优先选择方案1，利用Playwright Test的fixture机制让框架自动管理浏览器和Context，既能保证配置中的视频规则生效，又能让视频自动嵌入HTML报告，实现高效的测试流程。

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