Trace 查看器
简介
Playwright Trace 查看器是一个 GUI 工具，可帮助您在脚本运行后浏览记录的 Playwright 跟踪。跟踪是在 CI 上测试失败时调试测试的好方法。您可以在 本地或浏览器中在 trace.playwright.dev 上打开跟踪。
打开 Trace 查看器
您可以使用 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 是 Trace 查看器的静态托管版本。您可以使用拖放或通过 Select file(s) 按钮上传跟踪文件。
Trace 查看器完全在您的浏览器中加载跟踪，并且不会在外部传输任何数据。
查看远程跟踪
您可以直接使用 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 时，您还可以将上传的跟踪的 URL 作为查询参数传递到某些可访问的存储位置（例如，在您的 CI 中）。CORS（跨域资源共享）规则可能适用。
https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip
录制跟踪
可以使用 BrowserContext.tracing() API 录制跟踪，如下所示
Browser browser = browserType.launch();
BrowserContext context = browser.newContext();
// Start tracing before creating / navigating a page.
context.tracing().start(new Tracing.StartOptions()
.setScreenshots(true)
.setSnapshots(true)
.setSources(true));
Page page = context.newPage();
page.navigate("https://playwright.net.cn");
// Stop tracing and export it into a zip archive.
context.tracing().stop(new Tracing.StopOptions()
.setPath(Paths.get("trace.zip")));
这将记录跟踪并将其放入名为 trace.zip 的文件中。
Trace 查看器功能
操作
在“操作”选项卡中，您可以查看每个操作使用了什么定位器以及每个操作运行所需的时间。将鼠标悬停在测试的每个操作上，并直观地查看 DOM 快照中的更改。在时间轴中前后移动，然后单击操作以进行检查和调试。使用“之前”和“之后”选项卡可以直观地查看操作之前和之后发生的情况。
选择每个操作会显示
- 操作快照
- 操作日志
- 源代码位置
屏幕截图
当启用 setScreenshots 选项（默认）进行跟踪时，每个跟踪都会记录屏幕录像并将其呈现为胶片。您可以将鼠标悬停在胶片上以查看每个操作和状态的放大图像，这有助于您轻松找到要检查的操作。
双击操作可查看该操作的时间范围。您可以使用时间轴中的滑块来增加所选操作的数量，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志都将被过滤，仅显示所选操作的日志。
快照
当启用 setSnapshots 选项（默认）进行跟踪时，Playwright 会为每个操作捕获一组完整的 DOM 快照。根据操作的类型，它将捕获
| 类型 | 描述 |
|---|---|
| 之前 | 调用操作时的快照。 |
| 操作 | 执行输入时的快照。当探索 Playwright 实际点击的位置时，这种类型的快照特别有用。 |
| 之后 | 操作后的快照。 |
以下是典型的操作快照的样子
请注意它是如何同时突出显示 DOM 节点和确切的点击位置的。
源代码
当您单击侧边栏中的操作时，该操作的代码行将在源代码面板中突出显示。
调用
“调用”选项卡显示有关操作的信息，例如所用时间、使用的定位器、是否处于严格模式以及使用的键。
日志
查看测试的完整日志，以更好地了解 Playwright 在幕后所做的事情，例如滚动到视图中、等待元素可见、启用和稳定，以及执行诸如单击、填充、按下等操作。
错误
如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间轴还将显示一条红线，突出显示错误发生的位置。您还可以单击“源代码”选项卡以查看错误位于源代码的哪一行。
控制台
查看来自浏览器以及测试的控制台日志。显示不同的图标以向您显示控制台日志是来自浏览器还是来自测试文件。
双击操作侧边栏中测试的操作。这将过滤控制台，仅显示在该操作期间生成的日志。单击“显示全部”按钮以再次查看所有控制台日志。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。控制台选项卡也将被过滤，仅显示在所选操作期间生成的日志。
网络
“网络”选项卡显示测试期间发出的所有网络请求。您可以按不同的请求类型、状态代码、方法、请求、内容类型、持续时间和大小进行排序。单击请求以查看有关它的更多信息，例如请求标头、响应标头、请求正文和响应正文。
双击操作侧边栏中测试的操作。这将过滤网络请求，仅显示在该操作期间发出的请求。单击“显示全部”按钮以再次查看所有网络请求。
使用时间轴过滤操作，方法是单击起始点并拖动到结束点。网络选项卡也将被过滤，仅显示在所选操作期间发出的网络请求。
元数据
在“操作”选项卡旁边，您将找到“元数据”选项卡，该选项卡将显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。