追踪查看器
简介
Playwright 追踪查看器是一款图形用户界面（GUI）工具，可帮助您在脚本运行后浏览记录的 Playwright 追踪信息。当测试在持续集成（CI）中失败时，追踪信息是调试测试的绝佳方式。您可以 在本地 或在浏览器中通过 trace.playwright.dev 打开追踪信息。
打开追踪查看器
您可以使用 Playwright 命令行界面（CLI）或在浏览器中通过 trace.playwright.dev 打开保存的追踪信息。请确保添加 trace.zip 文件所在位置的完整路径。
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"
使用 trace.playwright.dev
trace.playwright.dev 是追踪查看器的静态托管版本。您可以通过拖放或点击 “选择文件” 按钮上传追踪文件。
追踪查看器会在您的浏览器中完全加载追踪信息，不会向外部传输任何数据。
查看远程追踪信息
您可以直接使用远程追踪信息的 URL 打开它。例如，这样无需手动从 CI 运行中下载文件，就能轻松查看远程追踪信息。
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="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
录制追踪信息
可以使用 BrowserContext.tracing() API 录制追踪信息，如下所示：
Browser browser = browserType.launch();
BrowserContext context = browser.newContext();
// 在创建/导航页面之前开始追踪。
context.tracing().start(new Tracing.StartOptions()
.setScreenshots(true)
.setSnapshots(true)
.setSources(true));
Page page = context.newPage();
page.navigate("https://playwright.dev");
// 停止追踪并将其导出到一个 ZIP 归档文件中。
context.tracing().stop(new Tracing.StopOptions()
.setPath(Paths.get("trace.zip")));
这将录制追踪信息并将其保存到名为 trace.zip 的文件中。
追踪查看器功能
操作
在 “操作” 选项卡中，你可以看到每个操作使用了什么定位器，以及每个操作运行花费了多长时间。将鼠标悬停在测试的每个操作上，可以直观地看到 DOM 快照中的变化。在时间轴上前后移动，然后单击某个操作进行检查和调试。使用 “之前” 和 “之后” 选项卡，可以直观地查看操作前后发生的情况。
选择每个操作会显示：
- 操作快照
- 操作日志
- 源代码位置
屏幕截图
使用 setScreenshots 选项（默认开启）进行跟踪时，每次跟踪都会记录屏幕录像，并将其呈现为胶片带。你可以将鼠标悬停在胶片带上，查看每个操作和状态的放大图像，这有助于你轻松找到想要检查的操作。
双击某个操作可查看该操作的时间范围。你可以使用时间轴中的滑块增加所选操作，这些操作将显示在 “操作” 选项卡中，并且所有控制台日志和网络日志将被过滤，仅显示所选操作的日志。
快照
使用 setSnapshots 选项（默认开启）进行跟踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作类型的不同，它将捕获：
| 类型 | 描述 |
|---|---|
| Before | 调用操作时的快照。 |
| Action | 执行输入时的快照。这种类型的快照在探究 Playwright 确切点击位置时特别有用。 |
| After | 操作之后的快照。 |
典型的 Action 快照如下所示：
请注意，它如何同时突出显示 DOM 节点以及确切的点击位置。
源代码
当你在侧边栏中单击某个操作时，该操作的代码行将在源代码面板中突出显示。
调用
“调用” 选项卡会显示有关操作的信息，例如操作耗时、使用的定位器（若处于严格模式）以及使用的按键。
日志
查看测试的完整日志，以便更好地了解 Playwright 在幕后执行的操作，例如滚动到视图中、等待元素可见、启用和稳定，以及执行诸如点击、填充、按下等操作。
错误
如果测试失败，你将在 “错误” 选项卡中看到每个测试的错误消息。时间轴也会显示一条红线，突出显示错误发生的位置。你还可以点击 “源” 选项卡，查看错误出现在源代码的哪一行。
控制台
查看来自浏览器以及测试的控制台日志。不同的图标会显示控制台日志是来自浏览器还是测试文件。
在操作侧边栏中双击测试中的某个操作。这将过滤控制台，仅显示该操作期间生成的日志。点击 “全部显示” 按钮可再次查看所有控制台日志。
使用时间轴过滤操作，方法是点击起始点并拖动到结束点。“控制台” 选项卡也将被过滤，仅显示所选操作期间生成的日志。
网络
“网络”选项卡会显示测试期间发出的所有网络请求。你可以按不同的请求类型、状态码、方法、请求、内容类型、持续时间和大小进行排序。点击某个请求可查看其更多信息，例如请求头、响应头、请求正文和响应正文。
在操作侧边栏中双击测试中的某个操作。这将过滤网络请求，仅显示在该操作期间发出的请求。点击“全部显示”按钮可再次查看所有网络请求。
使用时间轴过滤操作，点击起始点并拖动到结束点。“网络”选项卡也将被过滤，仅显示在所选操作期间发出的网络请求。
元数据
在“操作”选项卡旁边，你会找到“元数据”选项卡，它会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。