首页 / Playwright 入门教程 / 报告 Reporters

Playwright 入门教程

报告 Reporters

本教程共 59 篇 · 第 45 篇 · 更新于 2026-08-04 · 约 8 分钟阅读

PlaywrightReporters测试报告HTML报告JUnitCI集成自定义Reporter

本节目标:学完你能给测试挑一个合适的「报告员」,本地看得爽、CI 跑得稳,还能自己写一个。

测试跑完,结果不能只躺在终端里。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' }]],
Tip

打开最近一次报告的命令是 npx playwright show-report。它也接受一个 .zip 压缩包(包内顶层要有 index.html),适合直接看从 CI 下载下来的产物。

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

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

junit:输出 JUnit 风格的 XML,老牌 CI 工具(如 Jenkins)就吃这个格式。

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

还有 blob reporter,专门用来合并分片(Sharding)测试的报告,第 44 章已经用过;以及 github reporter,在 GitHub Actions 里自动给失败行加注释。

一次用多个 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',
});
Tip

懒得自己造轮子,可以先看社区现成的:Allure Reporter、Monocart、ReportPortal 等,搜一下就有。

什么时候该用哪种

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

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

小结

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