跳转到主要内容

Trace 查看器

简介

Playwright 追踪查看器是一个 GUI 工具,可以帮助您在脚本运行后探索记录的 Playwright 追踪。当您的测试在 CI 上失败时,追踪是调试测试的好方法。您可以在本地或在浏览器中通过 trace.playwright.dev 打开追踪。

打开追踪查看器

您可以使用 Playwright CLI 或在浏览器中通过 trace.playwright.dev 打开已保存的追踪。请确保添加 trace.zip 文件所在的完整路径。

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

使用 trace.playwright.dev

trace.playwright.dev 是追踪查看器的一个静态托管版本。您可以使用拖放或通过 选择文件 按钮上传追踪文件。

追踪查看器完全在您的浏览器中加载追踪,不会向外部传输任何数据。

Drop Playwright Trace to load

查看远程追踪

您可以直接使用其 URL 打开远程追踪。这使得查看远程追踪变得容易,例如,无需手动从 CI 运行中下载文件。

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

使用 trace.playwright.dev 时,您还可以将上传的追踪文件(例如在 CI 中)的 URL 作为查询参数传递。CORS(跨域资源共享)规则可能适用。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/fa874b0d59cdedec675521c21124e93161d66533.zip

记录追踪

本地追踪

要在开发模式下记录追踪,请在运行测试时将 --trace 标志设置为 on。您也可以使用UI 模式以获得更好的开发体验,因为它会自动追踪每个测试。

npx playwright test --trace on

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

npx playwright show-report

在 CI 上追踪

应在测试配置文件中设置 trace: 'on-first-retry' 选项,以便在持续集成中对失败测试的首次重试进行追踪。这将为每个重试的测试生成一个 trace.zip 文件。

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

可用的记录追踪选项

  • 'on-first-retry' - 仅在首次重试测试时记录追踪。
  • 'on-all-retries' - 记录所有测试重试的追踪。
  • 'off' - 不记录追踪。
  • 'on' - 为每个测试记录追踪。(不推荐,因为它会消耗大量性能)
  • 'retain-on-failure' - 为每个测试记录追踪,但从成功的测试运行中删除它。

如果您未启用重试但仍希望为失败的测试提供追踪,也可以使用 trace: 'retain-on-failure'

有更细粒度的选项可用,请参阅 testOptions.trace

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

追踪查看器功能

操作

在“操作”选项卡中,您可以看到每个操作使用了哪个定位器以及每个操作的运行时间。将鼠标悬停在测试的每个操作上,并直观地查看 DOM 快照中的变化。在时间轴中前后移动,点击一个操作以检查和调试。使用“之前”和“之后”选项卡可以直观地查看操作发生前后。

actions tab in trace viewer

选择每个操作将显示

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

截图

当启用 screenshots 选项(默认)进行追踪时,每个追踪都会记录一个屏幕录像并将其呈现为影片带。您可以将鼠标悬停在影片带上,查看每个操作和状态的放大图像,这有助于您轻松找到要检查的操作。

双击一个动作以查看该动作的时间范围。您可以使用时间线中的滑块增加选定的动作,这些动作将显示在“动作”选项卡中,并且所有控制台日志和网络日志都将过滤,仅显示选定动作的日志。

timeline view in trace viewer

快照

当启用 snapshots 选项(默认)进行追踪时,Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型,它将捕获

类型描述
之前在调用操作时的快照。
操作执行输入时的快照。这种类型的快照在探究 Playwright 究竟点击了哪里时特别有用。
之后操作后的快照。

这是典型的动作快照:

action tab in trace viewer

请注意,它同时突出显示了 DOM 节点和精确的点击位置。

源代码

当您点击侧边栏中的一个操作时,该操作的代码行会在源面板中高亮显示。

showing source code tab in trace viewer

调用

“调用”选项卡显示有关操作的信息,例如它花费的时间、使用的定位符、是否处于严格模式以及使用的键。

showing call tab in trace viewer

日志

查看测试的完整日志,以更好地了解 Playwright 在幕后正在做什么,例如滚动到视图中、等待元素可见、启用和稳定,以及执行点击、填充、按下等操作。

showing log of tests in trace viewer

错误

如果您的测试失败,您将在“错误”选项卡中看到每个测试的错误消息。时间线还将显示一条红线,突出显示错误发生的位置。您还可以单击“源”选项卡以查看错误在源代码的哪一行。

showing errors in trace viewer

控制台

查看来自浏览器以及测试的控制台日志。显示不同的图标以显示控制台日志是来自浏览器还是来自测试文件。

showing log of tests in trace viewer

双击操作侧边栏中测试中的一个操作。这将过滤控制台,仅显示在该操作期间生成的日志。单击显示全部按钮可再次查看所有控制台日志。

使用时间轴通过点击起点并拖动到终点来过滤操作。控制台选项卡也将被过滤,仅显示在选定操作期间生成的日志。

网络

“网络”选项卡显示您在测试期间发出的所有网络请求。您可以按不同类型的请求、状态码、方法、请求、内容类型、持续时间和大小进行排序。单击请求可查看有关它的更多信息,例如请求头、响应头、请求体和响应体。

network requests tab in trace viewer

双击操作侧边栏中测试中的一个操作。这将过滤网络请求,仅显示在该操作期间发出的请求。单击显示全部按钮可再次查看所有网络请求。

使用时间轴通过点击起点并拖动到终点来过滤操作。网络选项卡也将被过滤,仅显示在选定操作期间发出的网络请求。

元数据

在“操作”选项卡旁边,您会找到“元数据”选项卡,其中会显示有关测试的更多信息,例如浏览器、视口大小、测试持续时间等。

meta data in trace viewer

附件

“附件”选项卡允许您浏览附件。如果您正在进行视觉回归测试,您可以通过检查图像差异、实际图像和预期图像来比较截图。当您单击预期图像时,您可以使用滑块将一张图像滑到另一张图像上,这样您就可以轻松地看到截图中的差异。

attachments tab in trace viewer