Trace viewer
简介
Playwright Trace Viewer 是一个 GUI 工具，可帮助您在脚本运行后浏览记录的 Playwright 跟踪。跟踪是在 CI 上测试失败时调试测试的好方法。您可以在 本地 或在浏览器中 trace.playwright.dev 打开跟踪。
打开 Trace Viewer
您可以使用 Playwright CLI 或在浏览器中 trace.playwright.dev 打开保存的跟踪。请确保添加 trace.zip 文件所在位置的完整路径。
npx playwright show-trace path/to/trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是 Trace Viewer 的静态托管变体。您可以使用拖放或通过 Select file(s) 按钮上传跟踪文件。
Trace Viewer 完全在您的浏览器中加载跟踪，并且不会在外部传输任何数据。
查看远程跟踪
您可以直接使用其 URL 打开远程跟踪。这使得查看远程跟踪变得容易，而无需例如从 CI 运行手动下载文件。
npx playwright show-trace https://example.com/trace.zip
当使用 trace.playwright.dev 时，您还可以将您上传的跟踪的 URL 作为查询参数传递到一些可访问的存储位置（例如在您的 CI 中）。CORS（跨域资源共享）规则可能适用。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
记录跟踪
本地跟踪
要在开发模式下记录跟踪，请在运行测试时将 --trace 标志设置为 on。您还可以使用 UI 模式 以获得更好的开发者体验，因为它会自动跟踪每个测试。
npx playwright test --trace on
然后，您可以打开 HTML 报告并单击跟踪图标以打开跟踪。
npx playwright show-report
在 CI 上跟踪
应在持续集成的首次重试失败测试时运行跟踪，方法是在测试配置文件中设置 trace: 'on-first-retry' 选项。这将为每个重试的测试生成一个 trace.zip 文件。
- Test
- 库
import { defineConfig } from '@playwright/test';
export default defineConfig({
retries: 1,
use: {
trace: 'on-first-retry',
},
});
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.net.cn');
// Stop tracing and export it into a zip archive.
await context.tracing.stop({ path: 'trace.zip' });
记录跟踪的可用选项
'on-first-retry'- 仅在首次重试测试时记录跟踪。'on-all-retries'- 为所有测试重试记录跟踪。'off'- 不记录跟踪。'on'- 为每个测试记录跟踪。（不推荐，因为它对性能要求很高）'retain-on-failure'- 为每个测试记录跟踪，但从成功的测试运行中删除它。
如果您不启用重试但仍希望获得失败测试的跟踪，您也可以使用 trace: 'retain-on-failure'。
有更多细粒度的选项可用，请参阅 testOptions.trace。
如果您未使用 Playwright 作为测试运行器，请改用 browserContext.tracing API。
Trace Viewer 功能
操作
在“操作”选项卡中，您可以看到每个操作使用了哪个定位器以及每个操作运行所需的时间。将鼠标悬停在测试的每个操作上，并在视觉上查看 DOM 快照中的变化。在时间线中前进和后退，然后单击操作以检查和调试。使用“之前”和“之后”选项卡以可视方式查看操作之前和之后发生的情况。
选择每个操作会显示
- 操作快照
- 操作日志
- 源代码位置
截图
当使用 screenshots 选项开启跟踪（默认）时，每个跟踪都会记录一个屏幕录像，并将其呈现为胶片带。您可以将鼠标悬停在胶片带上，以查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
双击一个操作以查看该操作的时间范围。您可以使用时间轴中的滑块来增加所选操作，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志将被过滤为仅显示所选操作的日志。
快照
当使用 snapshots 选项开启跟踪（默认）时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获
| 类型 | 描述 |
|---|---|
| 之前 | 调用操作时的快照。 |
| 操作 | 执行输入时的快照。当探索 Playwright 确切点击位置时，这种类型的快照特别有用。 |
| 之后 | 操作后的快照。 |
以下是典型的操作快照的外观
请注意它是如何突出显示 DOM 节点和确切的点击位置。
来源
当您单击侧边栏中的操作时，该操作的代码行将在源代码面板中突出显示。
调用
“调用”选项卡显示有关操作的信息，例如所花费的时间、使用的定位器、是否处于严格模式以及使用的键。
日志
查看测试的完整日志，以更好地了解 Playwright 在幕后执行的操作，例如滚动到视图中、等待元素可见、启用和稳定，以及执行单击、填充、按下等操作。
错误
如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间轴还将显示一条红线，突出显示错误发生的位置。您还可以单击“源代码”选项卡以查看错误发生在哪一行源代码中。
控制台
查看来自浏览器以及测试的控制台日志。显示不同的图标以向您显示控制台日志是来自浏览器还是来自测试文件。
双击操作侧边栏中测试的操作。这将过滤控制台，使其仅显示在该操作期间生成的日志。单击显示全部按钮以再次查看所有控制台日志。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。“控制台”选项卡也将被过滤为仅显示在所选操作期间生成的日志。
网络
“网络”选项卡显示测试期间发出的所有网络请求。您可以按不同类型的请求、状态代码、方法、请求、内容类型、持续时间和大小进行排序。单击请求以查看有关它的更多信息，例如请求标头、响应标头、请求正文和响应正文。
双击操作侧边栏中测试的操作。这将过滤网络请求，使其仅显示在该操作期间发出的请求。单击显示全部按钮以再次查看所有网络请求。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。“网络”选项卡也将被过滤为仅显示在所选操作期间发出的网络请求。
元数据
在“操作”选项卡旁边，您将找到“元数据”选项卡，该选项卡将向您显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。
附件
“附件”选项卡允许您浏览附件。如果您正在进行 视觉回归测试，您将能够通过检查图像差异、实际图像和预期图像来比较屏幕截图。当您单击预期图像时，可以使用滑块在一个图像上滑动另一个图像，以便您可以轻松查看屏幕截图中的差异。