Trace viewer

简介

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

打开 Trace Viewer

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

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

使用 trace.playwright.dev

trace.playwright.dev 是 Trace Viewer 的静态托管变体。您可以使用拖放或通过选择文件按钮上传跟踪文件。

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

查看远程跟踪

您可以直接使用 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/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

记录跟踪

可以使用 BrowserContext.Tracing API 记录跟踪，如下所示

MSTest
NUnit
xUnit

namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
    [SetUp]
    public async Task Setup()
    {
        await Context.Tracing.StartAsync(new()
        {
            Title = TestContext.CurrentContext.Test.ClassName + "." + TestContext.CurrentContext.Test.Name,
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TearDown]
    public async Task TearDown()
    {
        // This will produce e.g.:
        // bin/Debug/net8.0/playwright-traces/PlaywrightTests.Tests.Test1.zip
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                TestContext.CurrentContext.WorkDirectory,
                "playwright-traces",
                $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
            )
        });
    }

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

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()
    {
        // ...
    }
}

using System.Reflection;
using Microsoft.Playwright;
using Microsoft.Playwright.Xunit;
using Xunit.Sdk;

namespace PlaywrightTests;

[WithTestName]
public class UnitTest1 : PageTest
{
    public override async Task InitializeAsync()
    {
        await base.InitializeAsync().ConfigureAwait(false);
        await Context.Tracing.StartAsync(new()
        {
            Title = $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    public override async Task DisposeAsync()
    {
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
               $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}.zip"
            )
        });
        await base.DisposeAsync().ConfigureAwait(false);
    }

    [Fact]
    public async Task GetStartedLink()
    {
        // ...
        await Page.GotoAsync("https://playwright.net.cn/dotnet/docs/intro");
    }
}

public class WithTestNameAttribute : BeforeAfterTestAttribute
{
    public static string CurrentTestName = string.Empty;
    public static string CurrentClassName = string.Empty;

    public override void Before(MethodInfo methodInfo)
    {
        CurrentTestName = methodInfo.Name;
        CurrentClassName = methodInfo.DeclaringType!.Name;
    }

    public override void After(MethodInfo methodInfo)
    {
    }
}

这将记录跟踪并将其放置到 bin/Debug/net8.0/playwright-traces/ 目录中。

仅在失败时运行跟踪

设置您的测试以仅在测试失败时记录跟踪

MSTest
NUnit
xUnit

namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class ExampleTest : PageTest
{
    [SetUp]
    public async Task Setup()
    {
        await Context.Tracing.StartAsync(new()
        {
            Title = $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TearDown]
    public async Task TearDown()
    {
        var failed = TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Error
            || TestContext.CurrentContext.Result.Outcome == NUnit.Framework.Interfaces.ResultState.Failure;

        await Context.Tracing.StopAsync(new()
        {
            Path = failed ? Path.Combine(
                TestContext.CurrentContext.WorkDirectory,
                "playwright-traces",
                $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
            ) : null,
        });
    }

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

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()
    {
        // ...
    }
}

using System.Reflection;
using Microsoft.Playwright;
using Microsoft.Playwright.Xunit;
using Xunit.Sdk;

namespace PlaywrightTests;

[WithTestName]
public class UnitTest1 : PageTest
{
    public override async Task InitializeAsync()
    {
        await base.InitializeAsync().ConfigureAwait(false);
        await Context.Tracing.StartAsync(new()
        {
            Title = $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    public override async Task DisposeAsync()
    {
        await Context.Tracing.StopAsync(new()
        {
            Path = !TestOk ? Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
               $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}.zip"
            ) : null
        });
        await base.DisposeAsync().ConfigureAwait(false);
    }

    [Fact]
    public async Task GetStartedLink()
    {
        // ...
        await Page.GotoAsync("https://playwright.net.cn/dotnet/docs/intro");
    }
}

public class WithTestNameAttribute : BeforeAfterTestAttribute
{
    public static string CurrentTestName = string.Empty;
    public static string CurrentClassName = string.Empty;

    public override void Before(MethodInfo methodInfo)
    {
        CurrentTestName = methodInfo.Name;
        CurrentClassName = methodInfo.DeclaringType!.Name;
    }

    public override void After(MethodInfo methodInfo)
    {
    }
}

Trace Viewer 功能

操作

在“操作”选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作运行所需的时间。将鼠标悬停在测试的每个操作上，并直观地查看 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

简介​

打开 Trace Viewer​

使用 trace.playwright.dev​

查看远程跟踪​

记录跟踪​

仅在失败时运行跟踪​

Trace Viewer 功能​

操作​

屏幕截图​

快照​

来源​

调用​

日志​

错误​

控制台​

网络​

元数据​

简介