Skip to main content

跟踪查看器

介绍​

¥Introduction

Playwright Trace Viewer 是一个 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 will contain the configuration needed to create a trace.zip file for each test. Traces are setup to run on-first-retry meaning they will be 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 will be 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 ran and on which browsers as well as how long they took. Tests can be filtered by passed tests, failed, flakey or skipped tests. You can also search for a particular test. Clicking on a test will open 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 name file name to directly open the trace for the required test.

playwright html report

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

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

playwright html report detailed view

要了解有关报告器的更多信息，请查看我们有关报告器的详细指南，包括 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.

playwright trace viewer

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

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

下一步是什么​

¥What's next