跳到主要内容

追踪查看器

简介​

Playwright 追踪查看器是一款图形用户界面（GUI）工具，可帮助您在脚本运行后浏览记录的 Playwright 追踪信息。当测试在持续集成（CI）中失败时，追踪信息是调试测试的绝佳方式。您可以 在本地 或在浏览器中通过 trace.playwright.dev 打开追踪信息。

打开追踪查看器​

您可以使用 Playwright 命令行界面（CLI）或在浏览器中通过 trace.playwright.dev 打开保存的追踪信息。请确保添加 trace.zip 文件所在位置的完整路径。

pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip

使用 trace.playwright.dev​

trace.playwright.dev 是追踪查看器的静态托管版本。您可以通过拖放或使用 “选择文件” 按钮上传追踪文件。

追踪查看器会在您的浏览器中完全加载追踪信息，不会向外部传输任何数据。

拖放 Playwright 追踪信息以加载

查看远程追踪信息​

您可以直接使用远程追踪信息的 URL 打开它。例如，这样无需从 CI 运行中手动下载文件，就能轻松查看远程追踪信息。

pwsh bin/Debug/netX/playwright.ps1 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/fa874b0d59cdedec675521c21124e93161d66533.zip

录制跟踪信息​

可以使用 BrowserContext.Tracing API 录制跟踪信息，如下所示：

using System.Text.RegularExpressions;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTestsMSTest;

[TestClass]
public class UnitTest1 : PageTest
{
    [TestInitialize]
    public async Task TestInitialize()
    {
         await Context.Tracing.StartAsync(new()
        {
            Title = TestContext.TestName,
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TestCleanup]
    public async Task TestCleanup()
    {
        // 这将生成例如：
        // bin/Debug/net8.0/playwright-traces/PlaywrightTests.UnitTest1.zip
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
                $"{TestContext.FullyQualifiedTestClassName}.zip"
            )
        });
    }

    [TestMethod]
    public async Task TestYourOnlineShop()
    {
        // ...
    }
}

这将录制跟踪信息并将其放置在 bin/Debug/net8.0/playwright-traces/ 目录中。

仅在失败时运行跟踪​

将测试设置为仅在测试失败时记录跟踪：

using System.Text.RegularExpressions;
using Microsoft.Playwright;
using Microsoft.Playwright.MSTest;

namespace PlaywrightTests;

[TestClass]
public class ExampleTest : PageTest
{
    [TestInitialize]
    public async Task TestInitialize()
    {
         await Context.Tracing.StartAsync(new()
        {
            Title = $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TestCleanup]
    public async Task TestCleanup()
    {
        var failed = new[] { UnitTestOutcome.Failed, UnitTestOutcome.Error, UnitTestOutcome.Timeout, UnitTestOutcome.Aborted }.Contains(TestContext.CurrentTestOutcome);

        await Context.Tracing.StopAsync(new()
        {
            Path = failed ? Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
                $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}.zip"
            ) : null,
        });
    }

    [TestMethod]
    public async Task GetStartedLink()
    {
        // ...
    }
}

追踪查看器功能​

操作​

在“操作”选项卡中，你可以看到每个操作使用了什么定位器，以及每个操作的运行时间。将鼠标悬停在测试的每个操作上，可以直观地看到 DOM 快照中的变化。在时间轴上前后移动，点击某个操作进行检查和调试。使用“之前”和“之后”选项卡，可以直观地查看操作前后发生的情况。

追踪查看器中的操作选项卡

选择每个操作会显示：

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

截图​

在启用 截图 选项（默认）进行追踪时，每次追踪都会记录屏幕截图，并将其呈现为胶片带。你可以将鼠标悬停在胶片带上，查看每个操作和状态的放大图像，这有助于你轻松找到想要检查的操作。

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

追踪查看器中的时间轴视图

快照​

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

类型描述
Before调用操作时的快照。
Action执行输入操作瞬间的快照。这种类型的快照在探究 Playwright 具体点击位置时特别有用。
After操作之后的快照。

典型的 Action 快照如下所示：

跟踪查看器中的 action 选项卡

请注意，它如何同时突出显示 DOM 节点以及确切的点击位置。

源代码​

当你在侧边栏中点击某个操作时，该操作的代码行将在源代码面板中突出显示。

跟踪查看器中显示源代码选项卡

调用​

“调用”选项卡会显示有关操作的信息，例如操作耗时、使用的定位器（如果处于严格模式）以及使用的按键。

跟踪查看器中显示调用选项卡

日志​

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

跟踪查看器中显示测试日志

错误​

如果测试失败，你将在“错误”选项卡中看到每个测试的错误消息。时间轴也会显示一条红线，突出显示错误发生的位置。你还可以点击“源”选项卡，查看错误出现在源代码的哪一行。

在跟踪查看器中显示错误

控制台​

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

在跟踪查看器中显示测试日志

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

使用时间轴过滤操作，点击起始点并拖动到结束点。“控制台”选项卡也将被过滤，仅显示所选操作期间生成的日志。

网络​

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

跟踪查看器中的网络请求选项卡

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

使用时间轴过滤操作，点击起始点并拖动到结束点。“网络” 选项卡也将被过滤，仅显示在所选操作期间发出的网络请求。

元数据​

在 “操作” 选项卡旁边，你会找到 “元数据” 选项卡，它会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。

跟踪查看器中的元数据