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时，您还可以将上传到可访问存储（例如CI内部）的跟踪文件URL作为查询参数传递。可能会应用CORS（跨源资源共享）规则。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

录制跟踪记录​

本地追踪​

要在开发模式下记录跟踪信息，在运行测试时将--trace标志设置为on。您也可以使用UI Mode来获得更好的开发体验，因为它会自动跟踪每个测试。

npx playwright test --trace on

You can then open the HTML report and click on the trace icon to open the trace.

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.dev');

// 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快照的变化。您可以向前或向后查看时间线，点击某个操作进行检查和调试。使用"Before"和"After"选项卡可以直观地查看操作前后发生的变化。

选择每个操作会显示：

• 操作快照
• 操作日志
• 源代码位置

屏幕截图​

当启用screenshots选项（默认开启）进行追踪时，每条追踪记录会录制屏幕画面并将其渲染为胶片条。您可以将鼠标悬停在胶片条上，查看每个操作和状态的放大图像，这有助于轻松找到您想要检查的操作。

双击某个操作可查看该操作的时间范围。您可以使用时间轴中的滑块来增加选中的操作，这些操作将在"Actions"选项卡中显示，同时所有控制台日志和网络日志将被过滤，仅显示选中操作对应的日志。

快照​

当启用snapshots选项（默认情况下）进行跟踪时，Playwright会为每个操作捕获一组完整的DOM快照。根据操作类型的不同，它将捕获：

以下是典型的Action快照的样子：

注意它如何同时高亮显示DOM节点和精确的点击位置。

源代码​

当您在侧边栏点击某个操作时，该操作对应的代码行会在源代码面板中高亮显示。

调用​

调用选项卡显示有关操作的信息，例如所花费的时间、使用的定位器、是否处于严格模式以及使用的按键。

日志​

查看完整的测试日志，以更好地理解Playwright在后台执行的操作，例如滚动到视图、等待元素可见、启用并稳定，以及执行点击、填写、按下等操作。

错误​

如果测试失败，您将在"错误"选项卡中看到每个测试的错误信息。时间轴还会显示一条红线，高亮标记错误发生的位置。您也可以点击源代码选项卡查看错误发生在源代码的哪一行。

控制台​

查看来自浏览器以及测试的console日志。不同的图标会显示该日志是来自浏览器还是测试文件。

在操作侧边栏中双击测试中的某个操作。这将过滤控制台，仅显示该操作期间生成的日志。点击显示全部按钮可再次查看所有控制台日志。

使用时间轴来筛选操作，通过点击起点并拖动到终点。控制台选项卡也将被筛选，仅显示所选操作期间生成的日志。

网络​

网络选项卡显示测试期间发出的所有网络请求。您可以按不同类型的请求、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击某个请求可查看更详细信息，例如请求头、响应头、请求体和响应体。

在操作侧边栏中双击测试中的某个操作。这将筛选网络请求，仅显示在该操作期间发出的请求。点击显示全部按钮可再次查看所有网络请求。

使用时间轴来筛选操作，通过点击起点并拖动到终点。网络选项卡也将被筛选，仅显示在所选操作期间发出的网络请求。

元数据​

在Actions选项卡旁边，您会找到Metadata选项卡，它将显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。

附件​

"Attachments"（附件）选项卡允许您查看附件。如果您正在进行视觉回归测试，您将能够通过检查图像差异、实际图像和预期图像来比较屏幕截图。当您点击预期图像时，可以使用滑块将一个图像滑过另一个图像，这样您可以轻松查看屏幕截图之间的差异。