跟踪查看器
简介
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 是跟踪查看器的一个静态托管版本。您可以使用拖放或通过 选择文件 按钮上传跟踪文件。
跟踪查看器在您的浏览器中完全加载跟踪，并且不会向外部传输任何数据。
查看远程跟踪
您可以直接使用远程跟踪的 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();
// 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。
跟踪查看器功能
操作
在“操作”选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作的运行时间。将鼠标悬停在测试的每个操作上，并直观地查看 DOM 快照的变化。您可以回溯或快进时间，点击一个操作进行检查和调试。使用“之前”和“之后”选项卡直观地查看操作发生前后的情况。
选择每个操作会显示
- 操作快照
- 操作日志
- 源代码位置
截图
当启用截图选项（默认）进行跟踪时，每个跟踪都会记录屏幕录像并将其渲染为影片条。您可以将鼠标悬停在影片条上，查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
双击某个操作以查看该操作的时间范围。您可以使用时间线中的滑块增加选中的操作范围，这些操作将在“操作”选项卡中显示，并且所有控制台日志和网络日志也将被过滤，只显示选定操作的日志。
快照
当启用快照选项（默认）进行跟踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它会捕获：
| 类型 | 描述 |
|---|---|
| 之前 | 在操作被调用时捕获的快照。 |
| 操作 | 在执行输入时的快照。这种类型的快照在查看 Playwright 具体点击了哪里时特别有用。 |
| 之后 | 操作完成后的快照。 |
典型的操作快照如下所示：
请注意它如何同时高亮显示 DOM 节点和精确的点击位置。
源代码
当您点击侧边栏中的一个操作时，源代码面板会高亮显示该操作对应的代码行。
调用
“调用”选项卡显示有关操作的信息，例如所花费的时间、使用了哪个定位器、是否处于严格模式以及使用了哪个按键。
日志
查看测试的完整日志，以便更好地了解 Playwright 在幕后所做的事情，例如滚动到视图中、等待元素可见、启用和稳定，以及执行点击、填写、按下等操作。
错误
如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间线也会显示一条红线，高亮显示错误发生的位置。您也可以点击“源代码”选项卡，查看错误在哪一行源代码上。
控制台
查看来自浏览器和测试的控制台日志。会显示不同的图标，以区分控制台日志是来自浏览器还是来自测试文件。
双击操作侧边栏中测试的一个操作。这将过滤控制台，仅显示在该操作期间产生的日志。点击“显示全部”按钮，再次查看所有控制台日志。
使用时间线通过点击起始点并拖动到结束点来过滤操作。控制台选项卡也将被过滤，仅显示在选定操作期间产生的日志。
网络
“网络”选项卡显示测试期间发出的所有网络请求。您可以按不同类型的请求、状态码、方法、请求、内容类型、持续时间和大小进行排序。点击某个请求可以查看更多信息，例如请求头、响应头、请求体和响应体。
双击操作侧边栏中测试的一个操作。这将过滤网络请求，仅显示在该操作期间发出的请求。点击“显示全部”按钮，再次查看所有网络请求。
使用时间线通过点击起始点并拖动到结束点来过滤操作。网络选项卡也将被过滤，仅显示在选定操作期间发出的网络请求。
元数据
在“操作”选项卡旁边，您会找到“元数据”选项卡，其中会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。
附件
“附件”选项卡允许您查看附件。如果您正在进行视觉回归测试，您可以通过检查图像差异、实际图像和预期图像来比较截图。当您点击预期图像时，您可以使用滑块将一个图像叠在另一个图像上，以便轻松查看截图中的差异。