报告器

介绍

¥Introduction

Playwright Test 附带了一些内置报告器，可满足不同的需求并能够提供自定义报告器。尝试内置报告器的最简单方法是传递 --reporter 命令行选项。

¥Playwright Test comes with a few built-in reporters for different needs and ability to provide custom reporters. The easiest way to try out built-in reporters is to pass --reporter command line option.

npx playwright test --reporter=line

为了获得更多控制，你可以在配置文件.conf 文件中以编程方式指定报告器。

¥For more control, you can specify reporters programmatically in the configuration file.

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

多名报告器

¥Multiple reporters

你可以同时使用多个报告器。例如，你可以使用 'list' 获得良好的终端输出，使用 'json' 获取包含测试结果的综合 json 文件。

¥You can use multiple reporters at the same time. For example you can use 'list' for nice terminal output and 'json' to get a comprehensive json file with the test results.

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

CI 报告器

¥Reporters on CI

你可以在本地和 CI 上使用不同的报告器。例如，使用简洁的 'dot' 报告器可以避免过多的输出。这是 CI 上的默认设置。

¥You can use different reporters locally and on CI. For example, using concise 'dot' reporter avoids too much output. This is the default on CI.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // Concise 'dot' for CI, default 'list' when running locally
  reporter: process.env.CI ? 'dot' : 'list',
});

内置报告器

¥Built-in reporters

所有内置报告器都会显示有关失败的详细信息，并且成功运行的详细信息大多有所不同。

¥All built-in reporters show detailed information about failures, and mostly differ in verbosity for successful runs.

名单报告器

¥List reporter

列表报告器是默认值（CI 上除外，其中 dot 报告器是默认值）。它为每个正在运行的测试打印一行。

¥List reporter is default (except on CI where the dot reporter is default). It prints a line for each test being run.

npx playwright test --reporter=list

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

以下是测试运行过程中的输出示例。失败的情况将列在最后。

¥Here is an example output in the middle of a test run. Failures will be listed at the end.

npx playwright test --reporter=list
Running 124 tests using 6 workers

✓ should access error in env (438ms)
✓ handle long test names (515ms)
x 1) render expected (691ms)
✓ should timeout (932ms)
  should repeat each:
✓ should respect enclosing .gitignore (569ms)
  should teardown env after timeout:
  should respect excluded tests:
✓ should handle env beforeEach error (638ms)
  should respect enclosing .gitignore:

你可以通过传递以下配置选项来选择进入步骤渲染：

¥You can opt into the step rendering via passing the following config option:

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['list', { printSteps: true }]],
});

专线报告器

¥Line reporter

线路报告器比名单报告器更简洁。它使用一行来报告最后完成的测试，并在发生故障时打印故障。行报告器对于大型测试套件非常有用，它显示进度，但不会通过列出所有测试来垃圾邮件输出。

¥Line reporter is more concise than the list reporter. It uses a single line to report last finished test, and prints failures when they occur. Line reporter is useful for large test suites where it shows the progress but does not spam the output by listing all the tests.

npx playwright test --reporter=line

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

以下是测试运行过程中的输出示例。内联报告故障。

¥Here is an example output in the middle of a test run. Failures are reported inline.

npx playwright test --reporter=line
Running 124 tests using 6 workers
  1) dot-reporter.spec.ts:20:1 › render expected ===================================================

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

[23/124] gitignore.spec.ts - should respect nested .gitignore

点报告器

¥Dot reporter

点报告器非常简洁 - 每次成功的测试运行只会产生一个字符。这是 CI 上的默认设置，在你不需要大量输出的情况下很有用。

¥Dot reporter is very concise - it only produces a single character per successful test run. It is the default on CI and useful where you don't want a lot of output.

npx playwright test --reporter=dot

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

以下是测试运行过程中的输出示例。失败的情况将列在最后。

¥Here is an example output in the middle of a test run. Failures will be listed at the end.

npx playwright test --reporter=dot
Running 124 tests using 6 workers
······F·············································

HTML 报告器

¥HTML reporter

HTML 报告器生成一个独立的文件夹，其中包含可用作网页的测试运行报告。

¥HTML reporter produces a self-contained folder that contains report for the test run that can be served as a web page.

npx playwright test --reporter=html

默认情况下，如果某些测试失败，将自动打开 HTML 报告。你可以通过 Playwright 配置中的 open 属性或 PW_TEST_HTML_REPORT_OPEN 环境变量来控制此行为。该属性的可能值为 always、never 和 on-failure（默认值）。

¥By default, HTML report is opened automatically if some of the tests failed. You can control this behavior via the open property in the Playwright config or the PW_TEST_HTML_REPORT_OPEN environmental variable. The possible values for that property are always, never and on-failure (default).

你还可以配置用于提供 HTML 报告的 host 和 port。

¥You can also configure host and port that are used to serve the HTML report.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { open: 'never' }]],
});

默认情况下，报告写入当前工作目录的 playwright-report 文件夹中。可以使用 PLAYWRIGHT_HTML_REPORT 环境变量或报告器配置覆盖该位置。

¥By default, report is written into the playwright-report folder in the current working directory. One can override that location using the PLAYWRIGHT_HTML_REPORT environment variable or a reporter configuration.

在配置文件中，直接传递选项：

¥In configuration file, pass options directly:

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { outputFolder: 'my-report' }]],
});

如果你要将附件从数据文件夹上传到其他位置，你可以使用 attachmentsBaseURL 选项让 html 报告在哪里查找它们。

¥If you are uploading attachments from data folder to other location, you can use attachmentsBaseURL option to let html report where to look for them.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['html', { attachmentsBaseURL: 'https://external-storage.com/' }]],
});

打开上次测试运行报告的快速方法是：

¥A quick way of opening the last test run report is:

npx playwright show-report

或者如果有自定义文件夹名称：

¥Or if there is a custom folder name:

npx playwright show-report my-report

Blob 报告器

¥Blob reporter

Blob 报告包含有关测试运行的所有详细信息，稍后可用于生成任何其他报告。它们的主要功能是促进分片测试报告的合并。

¥Blob reports contain all the details about the test run and can be used later to produce any other report. Their primary function is to facilitate the merging of reports from sharded tests.

npx playwright test --reporter=blob

默认情况下，报告写入 package.json 目录或当前工作目录中的 blob-report 目录（如果未找到 package.json）。使用 sharding 时，报告文件名为 report.zip 或 report-<shard_number>.zip。输出目录和报告文件名都可以在配置文件中覆盖：

¥By default, the report is written into the blob-report directory in the package.json directory or current working directory (if no package.json is found). The report file name is report.zip or report-<shard_number>.zip when sharding is used. Both output directory and report file name can be overridden in the configuration file:

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['blob', { outputDir: 'my-report', fileName: `report-${os.platform()}.zip` }]],
});

JSON 报告器

¥JSON reporter

JSON 报告器生成一个包含有关测试运行的所有信息的对象。

¥JSON reporter produces an object with all information about the test run.

你很可能希望将 JSON 写入文件。当使用 --reporter=json 运行时，使用 PLAYWRIGHT_JSON_OUTPUT_NAME 环境变量：

¥Most likely you want to write the JSON to a file. When running with --reporter=json, use PLAYWRIGHT_JSON_OUTPUT_NAME environment variable:

Bash
PowerShell
Batch

PLAYWRIGHT_JSON_OUTPUT_NAME=results.json npx playwright test --reporter=json

$env:PLAYWRIGHT_JSON_OUTPUT_NAME="results.json"
npx playwright test --reporter=json

set PLAYWRIGHT_JSON_OUTPUT_NAME=results.json
npx playwright test --reporter=json

在配置文件中，直接传递选项：

¥In configuration file, pass options directly:

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

JUnit 报告器

¥JUnit reporter

JUnit 报告器生成 JUnit 样式的 xml 报告。

¥JUnit reporter produces a JUnit-style xml report.

你很可能希望将报告写入 xml 文件。当使用 --reporter=junit 运行时，使用 PLAYWRIGHT_JUNIT_OUTPUT_NAME 环境变量：

¥Most likely you want to write the report to an xml file. When running with --reporter=junit, use PLAYWRIGHT_JUNIT_OUTPUT_NAME environment variable:

Bash
PowerShell
Batch

PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml npx playwright test --reporter=junit

$env:PLAYWRIGHT_JUNIT_OUTPUT_NAME="results.xml"
npx playwright test --reporter=junit

set PLAYWRIGHT_JUNIT_OUTPUT_NAME=results.xml
npx playwright test --reporter=junit

在配置文件中，直接传递选项：

¥In configuration file, pass options directly:

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['junit', { outputFile: 'results.xml' }]],
});

GitHub Actions 注释

¥GitHub Actions annotations

在 GitHub actions 中运行时，你可以使用内置的 github 报告器获取自动失败注释。

¥You can use the built in github reporter to get automatic failure annotations when running in GitHub actions.

请注意，所有其他报告者也在 GitHub Actions 上工作，但不提供注释。此外，如果使用矩阵策略运行测试，则不建议使用此注释类型，因为堆栈跟踪失败会成倍增加并模糊 GitHub 文件视图。

¥Note that all other reporters work on GitHub Actions as well, but do not provide annotations. Also, it is not recommended to use this annotation type if running your tests with a matrix strategy as the stack trace failures will multiply and obscure the GitHub file view.

playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
  // default 'list' when running locally
  reporter: process.env.CI ? 'github' : 'list',
});

定制报告器

¥Custom reporters

你可以通过使用某些报告器方法实现类来创建自定义报告器。了解有关 Reporter API 的更多信息。

¥You can create a custom reporter by implementing a class with some of the reporter methods. Learn more about the Reporter API.

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(`Starting the run with ${suite.allTests().length} tests`);
  }

  onTestBegin(test: TestCase, result: TestResult) {
    console.log(`Starting test ${test.title}`);
  }

  onTestEnd(test: TestCase, result: TestResult) {
    console.log(`Finished test ${test.title}: ${result.status}`);
  }

  onEnd(result: FullResult) {
    console.log(`Finished the run: ${result.status}`);
  }
}

export default MyReporter;

现在将此报告器与 testConfig.reporter 一起使用。

¥Now use this reporter with testConfig.reporter.

playwright.config.ts
import { defineConfig } from '@playwright/test';

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

或者只是将报告器文件路径作为 --reporter 命令行选项传递：

¥Or just pass the reporter file path as --reporter command line option:

npx playwright test --reporter="./myreporter/my-awesome-reporter.ts"

第三方报告器展示

¥Third party reporter showcase

Allure
Argos 视觉测试

¥Argos Visual Testing
Currents
GitHub Actions 报告器

¥GitHub Actions Reporter
单车

¥Monocart
ReportPortal
Serenity/JS
Testmo
Testomat.io
结果

¥Tesults

介绍​

多名报告器​

CI 报告器​

内置报告器​

名单报告器​

专线报告器​

点报告器​

HTML 报告器​

Blob 报告器​

JSON 报告器​

JUnit 报告器​

GitHub Actions 注释​

定制报告器​

第三方报告器展示​

介绍

多名报告器

CI 报告器

内置报告器

名单报告器

专线报告器

点报告器

HTML 报告器

Blob 报告器

JSON 报告器

JUnit 报告器

GitHub Actions 注释

定制报告器

第三方报告器展示