追蹤檢視器

簡介

Playwright Trace Viewer 是一個 GUI 工具，讓你探索已記錄的 Playwright Traces 測試，這意味著你可以在測試的每個動作中前後移動，並直觀地看到每個動作期間發生的情況。

你將學到

• 如何記錄追蹤
• 如何打開追蹤檢視器

錄製追蹤

追蹤可以使用 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

請查看我們的詳細指南 Trace Viewer 以了解更多關於 trace viewer 的資訊，以及如何設定你的測試，使其僅在測試失敗時記錄 trace。

接下來是什麼

• 在 CI 上使用 GitHub Actions 執行測試
• 了解更多關於 MSTest 和 NUnit 基類的資訊