跟踪查看器

简介

Playwright 跟踪查看器是一个 GUI 工具，可让您探索记录的 Playwright 测试跟踪，这意味着您可以回溯和前进您的测试的每个操作，并直观地查看每个操作期间发生了什么。

您将学习

• 如何记录跟踪
• 如何打开跟踪查看器

记录跟踪

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

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

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

打开跟踪

您可以使用 Playwright CLI 或在浏览器中打开 trace.playwright.dev 打开保存的跟踪。请确保添加跟踪 zip 文件所在的完整路径。打开后，您可以单击每个操作或使用时间线查看每个操作之前和之后的页面状态。您还可以在测试的每个步骤中检查日志、源代码和网络。跟踪查看器创建了一个 DOM 快照，因此您可以与之完全交互，打开开发者工具等。

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

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

接下来做什么

• 在 CI 上使用 GitHub Actions 运行测试
• 了解有关 MSTest 和 NUnit 基类的更多信息