Trace viewer

简介​

Playwright Trace Viewer 是一款GUI工具，可帮助您在脚本运行后查看已录制的Playwright跟踪记录。当测试在CI上失败时，跟踪记录是调试测试的绝佳方式。您可以在本地或通过浏览器在trace.playwright.dev上打开跟踪记录。

打开Trace Viewer​

您可以使用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 Viewer的一个静态托管版本。您可以通过拖放或点击Select file(s)按钮来上传跟踪文件。

Trace Viewer 完全在您的浏览器中加载跟踪数据，不会向外部传输任何数据。

查看远程跟踪记录​

您可以直接使用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/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.dev");

// Stop tracing and export it into a zip archive.
context.tracing().stop(new Tracing.StopOptions()
  .setPath(Paths.get("trace.zip")));

这将记录跟踪信息并将其保存到名为trace.zip的文件中。

Trace Viewer 功能​

操作​

在"操作"选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作的执行时长。将鼠标悬停在测试的每个操作上，直观地查看DOM快照的变化。您可以向前或向后查看时间线，点击某个操作进行检查和调试。使用"Before"和"After"选项卡可以直观地查看操作前后发生的变化。

选择每个操作会显示：

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

屏幕截图​

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

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

快照​

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

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

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

源代码​

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

调用​

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

日志​

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

错误​

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

控制台​

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

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

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

网络​

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

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

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

元数据​

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