跳至主要内容

跟踪查看器

简介​

Playwright 跟踪查看器是一个 GUI 工具，可帮助您在脚本运行后探索记录的 Playwright 跟踪。当您的测试在 CI 上失败时，跟踪是调试测试的一种好方法。您可以本地打开跟踪，或在 trace.playwright.dev 上的浏览器中打开。

跟踪查看器功能​

操作​

在“操作”选项卡中，您可以看到每个操作使用了什么定位器以及每个操作运行了多长时间。将鼠标悬停在测试的每个操作上，并直观地查看 DOM 快照的变化。及时往返并单击操作以检查和调试。使用“之前”和“之后”选项卡以直观地查看操作之前和之后发生了什么。

actions tab in trace viewer

选择每个操作将显示

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

屏幕截图​

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

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

timeline view in trace viewer

快照​

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

类型说明
之前调用操作时的快照。
操作执行输入时的快照。当探索 Playwright 在哪里单击时，此类型的快照特别有用。
之后操作后的快照。

以下是典型操作快照的外观

action tab in trace viewer

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

源​

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

showing source code tab in trace viewer

调用​

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

showing call tab in trace viewer

日志​

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

showing log of tests in trace viewer

错误​

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

showing errors in trace viewer

控制台​

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

showing log of tests in trace viewer

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

使用时间线筛选操作，方法是单击起始点并拖动到结束点。控制台选项卡也将被筛选，以仅显示在所选操作期间生成的日志。

网络​

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

network requests tab in trace viewer

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

使用时间线筛选操作，方法是单击起始点并拖动到结束点。“网络”选项卡也将被筛选，以仅显示在所选操作期间发出的网络请求。

元数据​

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

meta data in trace viewer

录制跟踪​

可以使用 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()
    {
        // This will produce e.g.:
        // 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()
    {
        // ...
    }
}

打开跟踪​

您可以使用 Playwright CLI 或在 trace.playwright.dev 上的浏览器中打开保存的跟踪。请确保添加 trace.zip 文件所在位置的完整路径。

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

使用 trace.playwright.dev​

trace.playwright.dev 是跟踪查看器的静态托管变体。您可以使用拖放上传跟踪文件。

Drop Playwright Trace to load

查看远程跟踪​

您可以使用其 URL 打开远程跟踪。它们可以在 CI 运行时生成，这使得无需手动下载文件即可轻松查看远程跟踪。

pwsh bin/Debug/netX/playwright.ps1 show-trace https://example.com/trace.zip

您还可以将上传的跟踪的 URL（例如，在您的 CI 中）从某些可访问的存储作为参数传递。CORS（跨源资源共享）规则可能适用。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip