Trace Viewer

介绍

Playwright Trace Viewer 是一个图形界面工具，可让你探索测试中记录下来的 Playwright 跟踪。这意味着你可以在测试的每个操作之间前后查看，并以可视化方式了解每个操作发生时页面上的情况。

你将学习：

• 如何记录跟踪
• 如何打开 HTML 报告
• 如何打开并查看跟踪

记录跟踪

默认情况下，playwright.config 文件中已经包含了为每个测试创建 trace.zip 文件所需的配置。跟踪默认设置为在 on-first-retry 时运行，这意味着它会在失败测试的第一次重试时记录。与此同时，在 CI 上 retries 设置为 2，在本地则设置为 0。这表示：跟踪会在失败测试的第一次重试时被记录，但不会在首次运行时记录，也不会在第二次重试时记录。

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

export default defineConfig({
  retries: process.env.CI ? 2 : 0, // 在 CI 上设置为 2
  // ...
  use: {
    trace: 'on-first-retry', // 在每个测试的第一次重试时记录跟踪
  },
});

要了解更多用于记录跟踪的可选项，请查看我们关于 Trace Viewer 的详细指南。

跟踪通常在持续集成（CI）环境中运行，因为在本地开发和调试测试时，你可以使用 UI Mode。不过，如果你希望在本地不使用 UI Mode 的情况下运行跟踪，可以使用 --trace on 强制启用跟踪。

npx playwright test --trace on

打开 HTML 报告

HTML 报告会展示你运行过的所有测试，以及这些测试在哪些浏览器上运行、耗时多久。你可以按通过、失败、不稳定或跳过的测试进行筛选，也可以搜索某个特定测试。点击某个测试后，会打开详细视图，你可以查看更多信息，例如错误、测试步骤以及跟踪。

npx playwright show-report

打开跟踪

在 HTML 报告中，点击测试文件名旁边的跟踪图标，即可直接打开该测试对应的跟踪。

(图略)

你也可以点击打开测试的详细视图，然后向下滚动到 'Traces' 选项卡，并通过点击跟踪截图来打开跟踪。

(图略)

要了解更多关于报告器的信息，请查看我们关于报告器的详细指南，其中包括 HTML Reporter。

查看跟踪

你可以通过点击每一步操作，或在时间轴上悬停，来查看测试跟踪，并观察某个操作前后页面的状态。你还可以在测试的每一步中检查日志、源码、网络、错误以及控制台信息。Trace Viewer 会创建一个 DOM 快照，因此你可以与其完整交互，并打开浏览器 DevTools 来检查 HTML、CSS 等内容。

(图略)

要了解更多关于跟踪的信息，请查看我们关于 Trace Viewer 的详细指南。

接下来做什么

• 在 GitHub Actions 上通过 CI 运行测试
• 进一步了解 Trace Viewer