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

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

查看远程跟踪记录

您可以直接使用URL打开远程跟踪记录。这样可以方便地查看远程跟踪，而无需手动从CI运行中下载文件。

pwsh bin/Debug/netX/playwright.ps1 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如下记录跟踪信息：

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.dev/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.dev/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快照的变化。您可以向前或向后查看时间线，点击某个操作进行检查和调试。使用"Before"和"After"选项卡可以直观地查看操作前后发生的变化。

actions tab in trace viewer

选择每个操作会显示：

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

屏幕截图

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

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

timeline view in trace viewer

快照

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

类型	描述
之前	动作调用时的快照。
动作	执行输入时刻的快照。这类快照在探索Playwright具体点击位置时特别有用。
之后	动作完成后的快照。

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

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

控制台

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

showing log of tests in trace viewer

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

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

网络

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

network requests tab in trace viewer

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

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

元数据

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

meta data in trace viewer

简介​

打开Trace Viewer​

使用 trace.playwright.dev​

查看远程跟踪记录​

录制跟踪记录​

仅在失败时运行跟踪​

Trace Viewer 功能​

操作​

屏幕截图​

快照​

源代码​

调用​

日志​

错误​

控制台​

网络​

元数据​

简介