跳至主要内容

Trace viewer

简介​

Playwright Trace Viewer 是一个图形界面工具，它允许您浏览已记录的测试Playwright跟踪记录，这意味着您可以前后查看测试中的每个操作，并直观地了解每个操作期间发生的情况。

你将学习

录制跟踪记录​

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

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
  },
});

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

追踪功能通常在持续集成(CI)环境中运行，因为在本地开发调试测试时可以使用UI模式。不过如果希望在本地运行追踪而不使用UI模式，可以通过--trace on参数强制开启追踪。

npx playwright test --trace on

Opening the HTML report​

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 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

打开跟踪记录​

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'选项卡，然后通过点击跟踪截图来打开跟踪记录。

playwright html report detailed view

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

查看追踪记录​

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

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

下一步​