45. 报告 Reporters

测试跑完，结果不能只躺在终端里。Playwright 用 Reporter（报告器）把每一步、每个成功和失败，整理成你能看懂的样子。它就像赛后解说员：你说要哪种风格，它就怎么播报。

Reporter 是什么

Reporter 是测试运行器（Playwright Test）里负责「汇报战况」的模块。你不配置它也行，因为它有默认值。但不同场景想要的报告长得不一样：本地调试想看细节，CI 流水线想看一眼通过没通过就行。

最快的两种用法

命令行临时指定最省事：

npx playwright test --reporter=line

想要更长期生效，就写进配置文件。在 playwright.config.ts 里加一行：

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

export default defineConfig({
  reporter: 'line',
});

内置的几种 Reporter

list：本地默认用这个。每个测试一行，失败最后汇总。看着最清楚。

reporter: 'list',

line：比 list 更省字。只打印刚结束的那个测试，失败时立即显示。测试多的时候不刷屏。

reporter: 'line',

dot：极简，一个测试一个字符。CI 上默认就是它。字符含义：

字符	含义
·	通过
F	失败
×	失败或超时，接下来会重试
±	重试后通过（不稳定，flaky）
T	超时
°	跳过

reporter: 'dot',

html：生成一个能打开网页看报告的文件夹。失败时自动弹浏览器，平时也能手动打开。

reporter: [['html', { open: 'never' }]],

json：输出一份完整的 JSON，方便别的程序二次处理。

reporter: [['json', { outputFile: 'results.json' }]],

junit：输出 JUnit 风格的 XML，老牌 CI 工具（如 Jenkins）就吃这个格式。

reporter: [['junit', { outputFile: 'results.xml' }]],

一次用多个 Reporter

想本地看细节、又想给 CI 留机器可读的结果？可以叠加：

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

export default defineConfig({
  reporter: [
    ['list'],
    ['json', { outputFile: 'test-results.json' }],
  ],
});

本地和 CI 分开选

CI 上别用太啰嗦的。下面是常用写法：本地用 list，CI 用 dot。

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

export default defineConfig({
  // 有 CI 环境变量就用 dot，否则用 list
  reporter: process.env.CI ? 'dot' : 'list',
});

自己写一个 Reporter

内置的不够用，就自己实现一个 Reporter 接口。最简单的版本只监听三件事：整轮开始、单个测试结束、整轮结束。

// my-awesome-reporter.ts
import type {
  FullConfig, FullResult, Reporter, Suite, TestCase, TestResult
} from '@playwright/test/reporter';

class MyReporter implements Reporter {
  onBegin(config: FullConfig, suite: Suite) {
    console.log(`一共要跑 ${suite.allTests().length} 个测试`);
  }

  onTestEnd(test: TestCase, result: TestResult) {
    console.log(`跑完 ${test.title}：状态是 ${result.status}`);
  }

  onEnd(result: FullResult) {
    console.log(`整轮结束：结果是 ${result.status}`);
  }
}

export default MyReporter;

在配置里指过去就能用：

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

export default defineConfig({
  reporter: './my-awesome-reporter.ts',
});

什么时候该用哪种

• 本地调试：list 或 line，信息足。
• CI 流水线：dot 或 github，安静又出注释。
• 要存档给团队看：html 或 junit。
• 要接自己的平台：json 或自定义 reporter。

选错了最大的代价只是「看不清」，不会让测试变错。先从 list 用起，等跑不顺眼了再换。

小结

报告这块没多复杂，就是选个合适的输出格式。本地用 list 看得清，CI 用 dot 或 github 安静，要存档给团队看就 html 或 junit。真要自己写 reporter 也不难，监听三个事件就行。选错了不会让测试变错，先跑起来再换。