追踪查看器

介绍

Playwright 追踪查看器是一个图形界面工具，帮助您在脚本运行后查看记录的 Playwright 追踪。追踪是调试失败的测试的绝佳方式，特别是在 CI 环境中。您可以在本地或通过浏览器访问 trace.playwright.dev 打开追踪。

追踪查看器功能

操作

在 “操作” 标签页中，您可以看到每个操作使用了什么定位器，以及每个操作的执行时间。将鼠标悬停在测试中的每个操作上，您可以直观地看到 DOM 快照中的变化。您可以在时间线上前后移动，点击一个操作来检查和调试。使用 “前” 与 “后” 标签来直观地查看操作前后的变化。

选择每个操作时，显示以下内容：

操作快照
操作日志
源代码位置

截图

当启用截图选项（默认开启）进行追踪时，每个追踪都会记录一段屏幕录制，并将其呈现为一条电影胶片条。您可以将鼠标悬停在胶片条上，查看每个操作的放大图像，这有助于您轻松找到要检查的操作。

双击操作以查看该操作的时间范围。您可以使用时间轴上的滑块来选择多个操作，这些操作会显示在 “操作” 标签页中，并且所有的控制台日志和网络日志会被过滤，只显示这些操作的日志。

快照

启用快照选项（默认开启）进行追踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作类型，它会捕获以下快照：

类型	描述
Before	操作被调用时的快照。
Action	这是在执行输入操作时的快照。当探索 Playwright 点击的位置时，这种类型的快照特别有用。
After	操作后的快照

类型

描述

Before

操作被调用时的快照。

Action

这是在执行输入操作时的快照。当探索 Playwright 点击的位置时，这种类型的快照特别有用。

After

操作后的快照

下面是典型的 Action 快照：

注意它是如何高亮显示 DOM 节点以及精确的点击位置的。

源代码

点击侧边栏中的操作时，源代码面板中该操作的代码行会被高亮显示。

调用

调用标签展示有关操作的信息，比如执行时间、使用的定位器、是否处于严格模式以及使用了哪些按键。

日志

查看完整的测试日志，了解 Playwright 在后台执行的操作，如滚动至视图、等待元素可见、启用、稳定并执行点击、填写、按键等操作。

错误

如果测试失败，您将在 “错误” 标签中看到每个测试的错误信息。时间轴也会显示一条红线，标明错误发生的地方。您还可以点击源代码标签，查看错误发生在哪一行代码。

控制台

查看来自浏览器和测试的控制台日志。不同的图标显示控制台日志来源，帮助您区分是来自浏览器还是测试文件。

双击测试中的操作，控制台将仅显示在该操作期间记录的日志。点击 “显示所有” 按钮，可以重新查看所有控制台日志。

使用时间轴筛选操作，通过点击起点并拖动至终点。控制台标签也会过滤，只显示所选操作期间的日志。

网络

“网络” 标签展示了测试期间所有的网络请求。您可以按请求类型、状态码、方法、请求、内容类型、时长和大小排序。点击请求查看详细信息，如请求头、响应头、请求体和响应体。

双击测试中的操作，网络请求将仅显示该操作期间的请求。点击 “显示所有” 按钮，可以重新查看所有网络请求。

使用时间轴筛选操作，通过点击起点并拖动至终点。网络标签也会过滤，只显示所选操作期间的网络请求。

元数据

“元数据” 标签会显示有关测试的更多信息，例如浏览器、视口大小、测试时长等。

附件

“附件” 标签允许您查看附件。如果您进行的是视觉回归测试，您可以通过检查图像差异来比较截图，查看实际图像和期望图像。当您点击期望图像时，您可以使用滑块将两张图像重叠，轻松查看截图之间的差异。

在本地录制追踪

要在开发模式下录制追踪，可以在运行测试时设置 --trace 标志为 on。您还可以使用 UI 模式获得更好的开发者体验。

npx playwright test --trace onbash

然后，您可以打开 HTML 报告，点击追踪图标打开追踪。

npx playwright show-reportbash

在 CI 上录制追踪

在 CI 上，应该在测试失败的第一次重试时录制追踪，方法是在测试配置文件中设置 trace: 'on-first-retry' 选项。这样每次重试的测试都会生成一个 trace.zip 文件。

Test
Library

playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});typescript

const browser = await chromium.launch();
const context = await browser.newContext();

// Start tracing before creating / navigating a page.
await context.tracing.start({ screenshots: true, snapshots: true });

const page = await context.newPage();
await page.goto('https://playwright.dev');

// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });javascript

可用的录制追踪选项：

'on-first-retry' - 仅在测试第一次重试时录制追踪。
'on-all-retries' - 为所有测试重试录制追踪。
'off' - 不录制追踪。
'on' - 为每个测试录制追踪（不推荐，因为它会影响性能）。
'retain-on-failure' - 为每个测试录制追踪，但仅保留失败的测试的追踪。

如果没有启用重试，但仍然希望记录失败测试的追踪，可以使用 trace: 'retain-on-failure'。

还有更精细的选项可用，请参见 testOptions.trace。

如果您没有使用 Playwright 作为测试运行器，请改用 browserContext.tracing API。

打开追踪

您可以通过 Playwright CLI 或在浏览器上通过 trace.playwright.dev 打开保存的追踪。确保提供追踪文件的完整路径。

npx playwright show-trace path/to/trace.zipbash

使用 trace.playwright.dev

trace.playwright.dev 是追踪查看器的静态托管版本，您可以通过拖放的方式上传追踪文件。

查看远程追踪

您可以使用其 URL 打开远程追踪。远程追踪可以通过 CI 生成，这使得您无需手动下载文件即可查看远程追踪。

npx playwright show-trace https://example.com/trace.zipbash

您还可以通过传递上传的追踪文件的 URL（例如在 CI 中）作为参数来访问。CORS（跨源资源共享）规则可能适用。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zipbash