Skip to main content

Trace Viewer

Playwright Trace Viewer 是一个 GUI 工具，允许您探索记录的 Playwright 测试 trace，这意味着您可以前后浏览测试的每个操作，并直观地查看每个操作期间发生的情况。

你将学到

记录 Trace​

默认情况下，playwright.config 文件将包含为每个测试创建 trace.zip 文件所需的配置。Trace 设置为 on-first-retry 运行，这意味着它们将在失败测试的第一次重试时运行。此外，在 CI 上运行时 retries 设置为 2，在本地设置为 0。这意味着 trace 将在失败测试的第一次重试时记录，但不会在第一次运行和第二次重试时记录。

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  retries: process.env.CI ? 2 : 0, // 在 CI 上运行时设置为 2
  ...
  use: {
    trace: 'on-first-retry', // 在每个测试的第一次重试时记录 trace
  },
};
export default config;

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

Trace 通常在持续集成 (CI) 环境中运行，因为在本地您可以使用 调试 方法来调试测试。但是，如果您想在本地运行 trace，可以使用 --trace on 强制开启 trace。

npx playwright test --trace on
note

trace-on 标志是在 Playwright v1.25 中引入的。检查您的 package.json 以确保您安装了至少此版本的 Playwright。

打开 HTML 报告​

如果您有失败的测试，那么测试将总共运行 3 次。在第一次重试时，将记录 trace。在第二次重试后，测试将停止运行，并且可以查看 HTML 报告。

npx playwright show-report

在 HTML 报告中，点击 trace 图标直接打开 trace 文件。

Playwright HTML Report

您也可以点击测试文件并向下滚动到 'Traces' 选项卡，并通过点击 trace 截图打开 trace。

Playwright HTML Report

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

查看 Trace​

通过点击每个操作或使用时间轴悬停来查看测试的 trace，并查看操作前后页面的状态。在测试的每个步骤中检查日志、源代码和网络。Trace viewer 创建一个 DOM 快照，因此您可以与其完全交互，打开 devtools 等。

Playwright Trace Viewer

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