Playwright配置video:on后录制视频无法附加到Allure报告

问题根因 #

你当前的基础录制配置本身可以正常生成视频文件，无法自动附加到Allure报告的核心原因有三点：

• Playwright的视频文件仅在BrowserContext完全关闭后才会完成磁盘写入，生成可访问的有效路径
• 低版本allure-playwright内置的自动收集逻辑没有适配视频的写入时机，仅内置了trace、screenshot的自动捕获规则
• 部分配置下视频默认仅在测试失败时保留，或者测试进程未正常退出导致视频文件被提前清理，报告生成阶段无法读取到有效文件

方案一：升级依赖+配置适配（零代码自动附加） #

1. 先将相关依赖升级到兼容的稳定版本，执行命令：
   npm install -D @playwright/test@latest allure-playwright@latest
2. 修改playwright.config.ts配置，明确视频保留规则与Allure报告参数：

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
     use: {
       actionTimeout: 0,
       trace: 'on',
       screenshot: 'on',
       viewport: { width: 1920, height: 1080 },
       // 明确视频录制参数，和视口尺寸保持一致避免黑边
       video: {
         mode: 'on',
         size: { width: 1920, height: 1080 }
       },
     },
     // 指定固定的测试输出目录，避免临时文件被系统清理
     outputDir: 'test-results/',
     reporter: [
       ['line'],
       ['allure-playwright', {
         detail: true,
         // 开启新版本内置的视频自动附加开关
         attachments: {
           video: 'on'
         }
       }]
     ]
   })
   

3. 注意事项：必须等所有测试用例执行完成、浏览器进程完全退出后，再执行allure generate生成报告，中途中断测试会导致视频文件未写入完成，无法被捕获。

方案二：自定义Fixture手动附加（全版本兼容，稳定性最高） #

如果升级依赖后仍存在附加失败的问题，直接通过全局Fixture手动实现视频附加逻辑，不受版本适配影响：

1. 新建全局Fixture文件，例如fixtures/test-with-video.ts，写入以下逻辑：

   import { test as base } from '@playwright/test';
   import { attachment } from 'allure-js-commons';
   import { readFileSync, existsSync } from 'fs';
   
   export const test = base.extend({
     page: async ({ page }, use, testInfo) => {
       await use(page);
       // 主动关闭上下文，等待视频文件写入完成
       await page.context().close();
   
       // 筛选当前用例生成的视频文件
       const videoAttachments = testInfo.attachments.filter(item => item.name === 'video');
       for (const video of videoAttachments) {
         if (video.path && existsSync(video.path)) {
           // 读取视频流附加到Allure报告
           const videoContent = readFileSync(video.path);
           await attachment('测试过程录屏', videoContent, 'video/webm');
         }
       }
     }
   });
   
   export const expect = base.expect;
   

2. 所有测试用例替换原有@playwright/test的导入来源，改为从上述Fixture文件导入即可，原有测试逻辑不需要任何修改：

   // 替换前
   // import { test, expect } from '@playwright/test';
   // 替换后
   import { test, expect } from '../fixtures/test-with-video';
   
   test('业务流程测试', async ({ page }) => {
     await page.goto('/');
     // 正常编写测试步骤
   });
   

优化建议 #

• 如果不需要给所有用例附加视频，可以将video的mode改为retain-on-failure，同时在Fixture逻辑中增加判断if (testInfo.status !== testInfo.expectedStatus)，仅给失败用例附加录屏，大幅减小报告体积
• Playwright默认生成的视频格式为webm，Allure报告原生支持该格式的内嵌播放，不需要额外转码
• 不要在测试用例逻辑中手动提前调用context.close()，避免录屏中断、文件损坏
• 不要将outputDir设置为系统临时目录，部分操作系统会在进程退出后自动清理临时文件，导致报告生成阶段找不到视频资源

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