Skip to main content

跟踪查看器

介绍​

¥Introduction

Playwright 跟踪查看器是一款 GUI 工具，可让你浏览测试中记录的 Playwright 跟踪，这意味着你可以前后移动测试的每个操作，并直观地查看每个操作期间发生的情况。

¥Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests meaning you can go back and forward though each action of your test and visually see what was happening during each action.

你将学习

¥You will learn

  • 如何记录痕迹

    ¥How to record a trace

  • 如何打开跟踪查看器

    ¥How to open the trace viewer

记录跟踪​

¥Recording a trace

可以使用 BrowserContext.tracing() API 记录跟踪，如下所示：

¥Traces can be recorded using the BrowserContext.tracing() API as follows:

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.nodejs.cn");

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

这将记录跟踪并将其放入名为 trace.zip 的文件中。

¥This will record the trace and place it into the file named trace.zip.

打开跟踪​

¥Opening the trace

你可以使用 Playwright CLI 或在 trace.playwright.dev 上的浏览​​器中打开已保存的跟踪。确保添加跟踪 zip 文件所在位置的完整路径。打开后，你可以点击每个操作，或使用时间轴查看每个操作前后的页面状态。你还可以在测试的每个步骤中检查日志、源和网络。跟踪查看器会创建一个 DOM 快照，以便你可以与其进行全面交互，例如打开开发者工具等。

¥You can open the saved trace using the Playwright CLI or in your browser on trace.playwright.dev. Make sure to add the full path to where your trace's zip file is located. Once opened you can click on each action or use the timeline to see the state of the page before and after each action. You can also inspect the log, source and network during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it, open devtools etc.

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="show-trace trace.zip"

playwright trace viewer

要了解更多信息，请查看我们关于 跟踪查看器 的详细指南。

¥To learn more check out our detailed guide on Trace Viewer.

下一步是什么​

¥What's next