跟踪查看器

介绍

¥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:

MSTest

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

NUnit

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()
    {
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                Environment.CurrentDirectory,
                "playwright-traces",
                $"{TestContext.FullyQualifiedTestClassName}.{TestContext.TestName}.zip"
            )
        });
    }

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

xUnit

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

这将为每个测试（例如 PlaywrightTests.ExampleTest.GetStartedLink.zip）录制一个 zip 文件，并将其放入 bin/Debug/net8.0/playwright-traces/ 目录中。

¥This will record a zip file for each test, e.g. PlaywrightTests.ExampleTest.GetStartedLink.zip and place it into the bin/Debug/net8.0/playwright-traces/ directory.

打开跟踪

¥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.

pwsh bin/Debug/net8.0/playwright.ps1 show-trace bin/Debug/net8.0/playwright-traces/PlaywrightTests.ExampleTest.GetStartedLink.zip

查看我们关于 跟踪查看器 的详细指南，了解更多关于跟踪查看器的信息，以及如何设置测试以仅在测试失败时记录跟踪。

¥Check out our detailed guide on Trace Viewer to learn more about the trace viewer and how to setup your tests to record a trace only when the test fails.

下一步是什么

¥What's next

• 使用 GitHub Actions 在 CI 上运行测试

  ¥Run tests on CI with GitHub Actions

• 了解更多关于 MSTest、NUnit 和 xUnit 基类的信息

  ¥Learn more about the MSTest, NUnit, and xUnit base classes