追踪查看器
简介
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 的静态托管版本。您可以通过拖放或点击 选择文件 按钮来上传追踪文件。
Trace Viewer 会将追踪记录完全加载到您的浏览器中，不会向外部传输任何数据。
查看远程追踪记录
您可以直接使用 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 文件。
- 测试
- 库
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();
// 在创建/导航页面之前开始追踪
await context.tracing.start({ screenshots: true, snapshots: true });
const page = await context.newPage();
await page.goto('https://playwright.dev');
// 停止追踪并导出为 zip 存档
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。
追踪查看器功能
操作记录
在"操作记录"选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作的执行时长。将鼠标悬停在测试的每个操作上，可以直观地看到DOM快照的变化。您可以前后浏览时间轴，点击某个操作进行检查和调试。使用"操作前"和"操作后"选项卡可以直观地查看操作前后的变化。
选择每个操作会显示：
- 操作快照
- 操作日志
- 源代码位置
屏幕截图
当启用screenshots选项进行跟踪时（默认启用），每次跟踪会记录屏幕录像并渲染成胶片条形式。您可以悬停在胶片条上查看每个操作和状态的放大图像，这有助于轻松找到需要检查的操作。
双击某个操作可以查看该操作的时间范围。您可以使用时间轴上的滑块扩大选择范围，这些操作会显示在"操作记录"选项卡中，所有控制台日志和网络日志都会被过滤，仅显示所选操作期间的日志。
快照
当启用 snapshots 选项（默认开启）进行追踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作类型的不同，它会捕获以下内容：
| 类型 | 描述 |
|---|---|
| 操作前 | 调用操作时的快照 |
| 操作中 | 执行输入时的快照。这类快照在探索 Playwright 具体点击位置时特别有用 |
| 操作后 | 操作完成后的快照 |
以下是典型的操作中快照示例：
注意它如何同时高亮显示 DOM 节点和精确的点击位置。
源代码
当你在侧边栏点击某个操作时，该操作对应的代码行会在源代码面板中高亮显示。
调用
调用标签页显示操作的相关信息，包括耗时、使用的定位器、是否处于严格模式以及使用的按键等。
日志
查看完整的测试日志，更好地理解 Playwright 在后台执行的操作，例如滚动到视图、等待元素可见/可用/稳定，以及执行点击、填充、按键等操作。
错误信息
如果测试失败，您可以在"错误"选项卡中查看每个测试的错误消息。时间轴还会显示一条红线，标记错误发生的位置。您也可以点击"源代码"选项卡，查看错误发生在源代码的哪一行。
控制台日志
查看来自浏览器和测试文件的控制台日志。不同的图标会显示日志是来自浏览器还是测试文件。
双击操作侧边栏中的某个测试操作。这将过滤控制台，仅显示该操作期间生成的日志。点击"显示全部"按钮可再次查看所有控制台日志。
使用时间轴通过点击起点并拖动到终点来过滤操作。控制台选项卡也将被过滤，仅显示所选操作期间生成的日志。
网络请求
"网络"标签页显示测试过程中发起的所有网络请求。您可以按请求类型、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击某个请求可查看详细信息，包括请求头、响应头、请求体和响应体。
在操作侧边栏中双击测试中的某个操作。这将过滤网络请求，仅显示该操作期间发起的请求。点击显示全部按钮可再次查看所有网络请求。
使用时间轴筛选操作，通过点击起点并拖动到终点来选择时间范围。网络标签页也会相应过滤，仅显示选定操作期间发生的网络请求。
元数据
在"操作"标签页旁边是"元数据"标签页，这里会显示测试的更多信息，如浏览器类型、视口大小、测试持续时间等。
附件
"附件"标签页允许您查看测试附件。如果您正在进行视觉回归测试，可以通过检查图像差异、实际图像和预期图像来比较截图。点击预期图像时，可以使用滑块将两张图像重叠滑动，方便查看截图中的差异。