Skip to main content

报告器

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

npx playwright test --reporter=line

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

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

const config: PlaywrightTestConfig = {
  reporter: 'line',
};
export default config;

多个报告器​

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

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

const config: PlaywrightTestConfig = {
  reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }]
  ],
};
export default config;

CI 上的报告器​

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

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

const config: PlaywrightTestConfig = {
  // CI 上使用简洁的 'dot'，本地运行时使用默认的 'list'
  reporter: process.env.CI ? 'dot' : 'list',
};
export default config;

内置报告器​

所有内置报告器都显示有关失败的详细信息，并且主要在成功运行的详细程度上有所不同。

List 报告器​

List 报告器是默认的（除了 CI 上默认使用 dot 报告器）。它为每个正在运行的测试打印一行。

npx playwright test --reporter=list
// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: 'list',
};
export default config;

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

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:

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

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

const config: PlaywrightTestConfig = {
  reporter: [['list', { printSteps: true }],
};
export default config;

Line 报告器​

Line 报告器比 list 报告器更简洁。它使用单行报告最后完成的测试，并在失败发生时打印失败。Line 报告器对于大型测试套件很有用，它显示进度但不会通过列出所有测试来发送垃圾邮件。

npx playwright test --reporter=line
// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: 'line',
};
export default config;

以下是测试运行中间的示例输出。失败会内联报告。

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 报告器​

Dot 报告器非常简洁 - 它只为每个成功的测试运行生成一个字符。它是 CI 上的默认设置，在您不想要大量输出的地方很有用。

npx playwright test --reporter=dot
// playwright.config.ts
import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: 'dot',
};
export default config;

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

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

HTML 报告器​

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

npx playwright test --reporter=html

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

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

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

const config: PlaywrightTestConfig = {
  reporter: [['html', { open: 'never' }]],
};
export default config;

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 type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  reporter: [['html', { outputFolder: 'my-report' }]],
};
export default config;

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

npx playwright show-report

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

npx playwright show-report my-report

html 报告器目前不支持将跨多个 --shards 生成的报告合并到单个报告中。有关可用的第三方解决方案，请参阅此问题。

JSON 报告器​

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

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

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

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

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

const config: PlaywrightTestConfig = {
  reporter: [['json', { outputFile: 'results.json' }]],
};
export default config;

JUnit 报告器​

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

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

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

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

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

const config: PlaywrightTestConfig = {
  reporter: [['junit', { outputFile: 'results.xml' }]],
};
export default config;

The JUnit reporter provides support for embedding additional information on the testcase elements using inner properties. This is based on an evolved JUnit XML format from Xray Test Management, but can also be used by other tools if they support this way of embedding additional information for test results; please check it first.

In configuration file, a set of options can be used to configure this behavior. A full example, in this case for Xray, follows ahead.

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

// Xray 的 JUnit 报告器配置
const xrayOptions = {
  // 是否添加包含所有注释的 <properties>；默认为 false
  embedAnnotationsAsProperties: true,

  // 默认情况下，注释报告为 <property name='' value=''>。
  // 这些注释报告为 <property name=''>value</property>。
  textContentAnnotations: ['test_description'],

  // 这将创建一个包含所有附件的 "testrun_evidence" 属性。每个附件都作为内部 <item> 元素添加。
  // 禁用 <system-out> 中的 [[ATTACHMENT|path]]。
  embedAttachmentsAsProperty: 'testrun_evidence',

  // 报告的输出位置。
  outputFile: './xray-report.xml'
};

const config: PlaywrightTestConfig = {
  reporter: [['junit', xrayOptions]]
};

export default config;

在前面的配置示例中，所有注释都将作为 <property> 元素添加到 JUnit XML 报告中。注释类型映射到 <property> 的 name 属性，注释描述将作为 value 属性添加。在这种情况下，例外是注释类型 testrun_evidence，其描述将作为相应 <property> 的内部内容添加。注释可用于例如将 Playwright 测试与 Xray 中的现有测试链接，或将测试与 Jira 中的现有故事/需求链接（即"覆盖"它）。

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

test('使用特定注释将测试元数据传递给 Xray', async ({}, testInfo) => {
  testInfo.annotations.push({ type: 'test_id', description: '1234' });
  testInfo.annotations.push({ type: 'test_key', description: 'CALC-2' });
  testInfo.annotations.push({ type: 'test_summary', description: 'sample summary' });
  testInfo.annotations.push({ type: 'requirements', description: 'CALC-5,CALC-6' });
  testInfo.annotations.push({ type: 'test_description', description: 'sample description' });
});

请注意，这些属性的语义将取决于处理此演进报告格式的工具；没有标准的属性名称/注释。

如果定义了配置选项 embedAttachmentsAsProperty，则会创建一个具有其名称的 property。附件（包括其内容）将嵌入到此 property 下的 <item> 元素内的 JUnit XML 报告中。附件从 TestInfo 对象获取，使用路径或正文，并作为 base64 编码内容添加。嵌入附件可用于附加截图或任何其他相关证据；但是，请明智地使用它，因为它会影响报告大小。

以下配置示例通过在 JUnit XML 报告上使用 testrun_evidence 元素来启用嵌入附件：

// playwright.config.js

import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  reporter: [['junit', { embedAttachmentsAsProperty: 'testrun_evidence', outputFile: 'results.xml' }]],
};

export default config;

以下测试添加附件：

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

test('在 JUnit 报告中嵌入附件（包括其内容）', async ({}, testInfo) => {
  const file = testInfo.outputPath('evidence1.txt');
  require('fs').writeFileSync(file, 'hello', 'utf8');
  await testInfo.attach('evidence1.txt', { path: file, contentType: 'text/plain' });
  await testInfo.attach('evidence2.txt', { body: Buffer.from('world'), contentType: 'text/plain' });
});

GitHub Actions 注释​

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

请注意，所有其他报告器也可以在 GitHub Actions 上工作，但不提供注释。

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

const config: PlaywrightTestConfig = {
  // GitHub Actions CI 使用 'github' 生成注释，加上简洁的 'dot'
  // 本地运行时使用默认的 'list'
  reporter: process.env.CI ? 'github' : 'list',
};
export default config;

自定义报告器​

您可以通过实现一个包含一些报告器方法的类来创建自定义报告器。了解有关 Reporter API 的更多信息。

// my-awesome-reporter.ts
import { Reporter } from '@playwright/test/reporter';

class MyReporter implements Reporter {
  onBegin(config, suite) {
    console.log(`开始运行 ${suite.allTests().length} 个测试`);
  }

  onTestBegin(test) {
    console.log(`开始测试 ${test.title}`);
  }

  onTestEnd(test, result) {
    console.log(`完成测试 ${test.title}: ${result.status}`);
  }

  onEnd(result) {
    console.log(`完成运行: ${result.status}`);
  }
}
export default MyReporter;

现在使用 testConfig.reporter 使用此报告器。

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

const config: PlaywrightTestConfig = {
  reporter: './my-awesome-reporter.ts',
};
export default config;

第三方报告器展示​