追踪查看器
简介
Playwright 追踪查看器是一个 GUI 工具，可帮助您在脚本运行后探索记录的 Playwright 追踪。当您的测试在 CI 上失败时，追踪是调试测试的好方法。您可以本地或在浏览器中打开追踪 trace.playwright.dev。
追踪查看器功能
操作
在“操作”选项卡中，您可以查看每个操作使用了什么定位器以及每个操作运行了多长时间。将鼠标悬停在测试的每个操作上，并直观地查看 DOM 快照的变化。及时往返并单击操作以检查和调试。使用“之前”和“之后”选项卡直观地查看操作之前和之后发生了什么。
选择每个操作将显示
- 操作快照
- 操作日志
- 源代码位置
屏幕截图
当使用打开的屏幕截图选项（默认）进行追踪时，每个追踪都会记录一个屏幕录像并将其渲染为胶片条。您可以将鼠标悬停在胶片条上以查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
双击操作以查看该操作的时间范围。您可以使用时间轴中的滑块来增加所选操作的数量，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志都将被过滤，以仅显示所选操作的日志。
快照
当使用打开的快照选项（默认）进行追踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获
| 类型 | 描述 |
|---|---|
| 之前 | 调用操作时的快照。 |
| 操作 | 执行输入时的快照。此类型的快照在探索 Playwright 确切点击的位置时特别有用。 |
| 之后 | 操作后的快照。 |
以下是典型操作快照的外观
请注意，它如何突出显示 DOM 节点以及精确的点击位置。
源
当您单击侧边栏中的操作时，该操作的代码行将在源面板中突出显示。
调用
“调用”选项卡显示有关操作的信息，例如花费的时间、使用了什么定位器、是否处于严格模式以及使用了什么键。
日志
查看测试的完整日志，以更好地了解 Playwright 在幕后执行的操作，例如滚动到视图中、等待元素可见、启用和稳定以及执行点击、填充、按下等操作。
错误
如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间轴还将显示一条红色线条，突出显示错误发生的位置。您还可以单击“源”选项卡以查看错误在源代码的哪一行。
控制台
查看来自浏览器的控制台日志以及来自您的测试的控制台日志。将显示不同的图标以向您显示控制台日志是否来自浏览器或测试文件。
双击操作侧边栏中测试的操作。这将过滤控制台，仅显示在该操作期间生成的日志。单击“显示全部”按钮以再次查看所有控制台日志。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。控制台选项卡也将被过滤，以仅显示在所选操作期间生成的日志。
网络
“网络”选项卡显示在测试期间发出的所有网络请求。您可以按不同类型的请求、状态代码、方法、请求、内容类型、持续时间和大小进行排序。单击请求以查看有关它的更多信息，例如请求标头、响应标头、请求正文和响应正文。
双击操作侧边栏中测试的操作。这将过滤网络请求，仅显示在该操作期间发出的请求。单击“显示全部”按钮以再次查看所有网络请求。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。“网络”选项卡也将被过滤，以仅显示在所选操作期间发出的网络请求。
元数据
在“操作”选项卡旁边，您将找到“元数据”选项卡，该选项卡将显示有关您的测试的更多信息，例如浏览器、视口大小、测试持续时间等。
附件
“附件”选项卡允许您浏览附件。如果您正在执行视觉回归测试，您将能够通过检查图像差异、实际图像和预期图像来比较屏幕截图。当您单击预期图像时，您可以使用滑块将一个图像滑到另一个图像上，以便您可以轻松地查看屏幕截图中的差异。
本地录制追踪
要在开发模式期间录制追踪，请在运行测试时将--trace标志设置为on。您还可以使用UI 模式以获得更好的开发人员体验。
npx playwright test --trace on
然后，您可以打开 HTML 报告并单击追踪图标以打开追踪。
npx playwright show-report
在 CI 上录制追踪
追踪应在失败测试的第一次重试时在持续集成上运行，方法是在测试配置文件中设置trace: 'on-first-retry'选项。这将为每个重试的测试生成一个trace.zip文件。
- 测试
- 库
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。
打开追踪
您可以使用 Playwright CLI 或在浏览器中打开 trace.playwright.dev 打开保存的追踪。确保添加 trace.zip 文件所在的完整路径。
npx playwright show-trace path/to/trace.zip
使用trace.playwright.dev
trace.playwright.dev 是追踪查看器的静态托管变体。您可以使用拖放上传追踪文件。
查看远程追踪
您可以使用其 URL 打开远程追踪。它们可以在 CI 运行时生成，这使得无需手动下载文件即可轻松查看远程追踪。
npx playwright show-trace https://example.com/trace.zip
您还可以将上传跟踪的 URL（例如，在您的 CI 中）作为参数从某些可访问的存储中传递。可能需要应用 CORS（跨源资源共享）规则。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip