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.

你将学习

记录轨迹​

🌐 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）环境中运行，因为在本地你可以使用UI 模式来开发和调试测试。但是，如果你想在本地运行踪迹而不使用UI 模式，你可以通过 --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.

playwright html report

你也可以点击以打开测试的详细视图，然后向下滚动到 '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.

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 快照，让你可以完全互动，并打开浏览器开发者工具来检查 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