如何自定义Playwright中HTML报告的文件名

数据老陈

2026-6-19

Playwright HTML报告文件名自定义问题解决方案

Playwright的HTML报告器不支持通过fileName或outputFile参数修改报告文件名，这是因为它和JSON/JUnit这类单文件报告器的实现逻辑不同：HTML报告是一个包含入口文件、CSS、JS等静态资源的完整文件夹，而非单一文件，因此官方未提供修改入口文件名的配置项。

可行解决办法

1. 脚本批量重命名

在项目的package.json中添加组合脚本，完成测试后自动重命名报告入口文件：

{
  "scripts": {
    "test": "playwright test",
    "posttest": "mv myFolder/index.html myFolder/test-results.html"
  }
}

执行npm run test后，posttest会自动触发，将myFolder下的默认index.html重命名为目标文件名。

2. 测试后置钩子处理

通过Playwright的test.afterAll钩子，在测试全部完成后自动重命名：

import { defineConfig, test } from '@playwright/test';
import fs from 'fs';
import path from 'path';

// 测试完成后重命名报告入口
test.afterAll(() => {
  const reportDir = 'myFolder';
  const originalPath = path.join(reportDir, 'index.html');
  const targetPath = path.join(reportDir, 'test-results.html');
  
  if (fs.existsSync(originalPath)) {
    fs.renameSync(originalPath, targetPath);
  }
});

export default defineConfig({
  reporter: [["html", { outputFolder: "myFolder" }]],
});