Skip to main content

跟踪查看器

介绍​

¥Introduction

Playwright 跟踪查看器是一款 GUI 工具，可让你浏览 Playwright 测试记录的跟踪信息，这意味着你可以前后浏览测试的每个操作，并直观地查看每个操作期间发生的情况。

¥Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests, meaning you can go back and forward through each action of your test and visually see what was happening during each action.

你将学习

¥You will learn

记录轨迹​

¥Recording a Trace

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

¥By default the playwright.config file contains the configuration needed to create a trace.zip file for each test. Traces are setup to run on-first-retry, meaning they run on the first retry of a failed test. Also retries are set to 2 when running on CI and 0 locally. This means the traces are recorded on the first retry of a failed test but not on the first run and not on the second retry.

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // set to 2 when running on CI
  // ...
  use: {
    trace: 'on-first-retry', // record traces on first retry of each test
  },
});

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

¥To learn more about available options to record a trace check out our detailed guide on Trace Viewer.

跟踪通常在持续集成 (CI) 环境中运行，因为你可以在本地使用 用户界面模式 开发和调试测试。但是，如果你想在本地运行跟踪而不使用 用户界面模式，则可以强制使用 --trace on 启用跟踪。

¥Traces are normally run in a Continuous Integration (CI) environment, because locally you can use UI Mode for developing and debugging tests. However, if you want to run traces locally without using UI Mode, you can force tracing to be on with --trace on.

npx playwright test --trace on

打开 HTML 报告​

¥Opening the HTML report

HTML 报告向你显示了已运行的所有测试的报告以及在哪些浏览器上运行以及它们花费了多长时间。测试可以通过已通过、失败、不稳定或跳过的测试进行筛选。你还可以搜索特定测试。点击测试会打开详细视图，你可以在其中查看有关测试的更多信息，例如错误、测试步骤和跟踪。

¥The HTML report shows you a report of all your tests that have been run and on which browsers as well as how long they took. Tests can be filtered by passed tests, failed, flaky, or skipped tests. You can also search for a particular test. Clicking on a test opens the detailed view where you can see more information on your tests such as the errors, the test steps, and the trace.

npx playwright show-report

打开跟踪​

¥Opening the trace

在 HTML 报告中，点击测试文件名旁边的跟踪图标，即可直接打开所需测试的跟踪信息。

¥In the HTML report, click on the trace icon next to the test file name to directly open the trace for the required test.

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

¥You can also click to open the detailed view of the test and scroll down to the 'Traces' tab and open the trace by clicking on the trace screenshot.

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

¥To learn more about reporters, check out our detailed guide on reporters including the HTML Reporter.

查看踪迹​

¥Viewing the trace

通过单击每个操作或使用时间线悬停来查看测试的跟踪，并查看操作之前和之后的页面状态。在测试的每个步骤中，检查日志、源代码和网络、错误以及控制台。跟踪查看器会创建 DOM 快照，以便你可以与其完全交互并打开浏览器 DevTools 来检查 HTML、CSS 等。

¥View traces of your test by clicking through each action or hovering using the timeline and see the state of the page before and after the action. Inspect the log, source and network, errors, and console during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it and open the browser DevTools to inspect the HTML, CSS, etc.

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

¥To learn more about traces, check out our detailed guide on Trace Viewer.

下一步是什么​

¥What's next