Trace Viewer
Playwright Trace Viewer 是一个 GUI 工具，可帮助您在脚本运行后探索记录的 Playwright trace。您可以在本地或在浏览器中的 trace.playwright.dev 上打开 trace。
查看 Trace
您可以使用 Playwright CLI 或在浏览器中的 trace.playwright.dev 上打开保存的 trace。
npx playwright show-trace trace.zip
操作
打开 trace 后，您将在左侧看到 Playwright 执行的操作列表：
选择每个操作会显示：
- 操作快照，
- 操作日志，
- 源代码位置，
- 此操作的网络日志
在属性窗格中，您还将看到与每个操作关联的渲染 DOM 快照。
元数据
查看元数据，例如执行操作的时间、使用的浏览器引擎、视口是什么以及是否是移动设备，以及记录了多少页面、操作和事件。
截图
当使用 screenshots 选项打开跟踪时，每个 trace 都会记录屏幕录像并将其渲染为胶片条：
您可以将鼠标悬停在胶片条上以查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
快照
当使用 snapshots 选项打开跟踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获：
| 类型 | 描述 |
|---|---|
| Before | 调用操作时的快照。 |
| Action | 执行输入时的快照。这种类型的快照在探索 Playwright 确切点击位置时特别有用。 |
| After | 操作后的快照。 |
典型的 Action 快照如下所示：
请注意它如何同时突出显示 DOM 节点和确切的点击位置。
Call
查看调用了什么操作、时间和持续时间以及参数、返回值和日志。
Console
查看操作的控制台输出，您可以在其中看到控制台日志或错误。
Network
查看操作期间发出的任何网络请求。
Source
查看整个测试的源代码。
在本地记录 Trace
要在开发模式下记录 trace，请在运行测试时将 --trace 标志设置为 on。
npx playwright test --trace on
然后您可以打开 HTML 报告并点击 trace 图标以打开 trace。
npx playwright show-report
在 CI 上记录 Trace
通过在测试配置文件中设置 trace: 'on-first-retry' 选项，应在持续集成上对失败测试的第一次重试运行 trace。这将为每个重试的测试生成一个 trace.zip 文件。
- TypeScript
- JavaScript
- Library
import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
retries: 1,
use: {
trace: 'on-first-retry',
},
};
export default config;
// @ts-check
/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
retries: 1,
use: {
trace: 'on-first-retry',
},
};
module.exports = config;
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' });
记录 trace 的可用选项：
'on-first-retry'- 仅在第一次重试测试时记录 trace。'off'- 不记录 trace。'on'- 为每个测试记录 trace。（不推荐，因为性能开销大）'retain-on-failure'- 为每个测试记录 trace，但从成功的测试运行中删除它。
如果您不启用重试但仍希望为失败的测试记录 trace，也可以使用 trace: 'retain-on-failure'。
如果您不使用 Playwright 作为测试运行器，请改用 browserContext.tracing API。
查看 Trace
您可以使用 Playwright CLI 或在浏览器中的 trace.playwright.dev 上打开保存的 trace。
npx playwright show-trace trace.zip
使用 trace.playwright.dev
trace.playwright.dev 是 Trace Viewer 的静态托管变体。您可以使用拖放上传 trace 文件。
查看远程 Trace
您可以使用其 URL 打开远程 trace。它们可以在 CI 运行中生成，这使得无需手动下载文件即可轻松查看远程 trace。
npx playwright show-trace https://example.com/trace.zip
您还可以从某些可访问的存储中传递上传的 trace 的 URL（例如在您的 CI 中）作为参数。可能适用 CORS（跨源资源共享）规则。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip