トレースビューアー

はじめに

Playwright Trace Viewer は、スクリプト実行後に記録された Playwright トレースを探索するのに役立つ GUI ツールです。トレースは、CI でテストが失敗した場合にデバッグするための優れた方法です。トレースは、ローカルまたはブラウザの trace.playwright.dev で開くことができます。

トレースビューアーを開く

保存されたトレースを開くには、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 を使用する場合、アクセス可能なストレージ (CI 内など) にアップロードされたトレースの URL をクエリパラメータとして渡すこともできます。CORS (クロスオリジンリソース共有) ルールが適用される場合があります。

https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/data/cb0fa77ebd9487a5c899f3ae65a7ffdbac681182.zip

トレースの記録

トレースは、次のように 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()
    {
        // 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()
    {
        // ..
    }
}

NUnit

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

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.dokyumento.jp/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

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

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

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 = !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.dokyumento.jp/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)
    {
    }
}

トレースビューアーの機能

アクション

「アクション」タブでは、すべてのアクションに使用されたロケーターと、それぞれのアクションの実行にかかった時間を確認できます。テストの各アクションにカーソルを合わせると、DOM スナップショットの変化を視覚的に確認できます。時間を戻したり進めたり、アクションをクリックして検査およびデバッグします。「前」タブと「後」タブを使用して、アクションの前後に何が起こったかを視覚的に確認します。

各アクションを選択すると、以下が表示されます

• アクションスナップショット
• アクションログ
• ソースコードの場所

スクリーンショット

スクリーンショット オプションをオン (デフォルト) にしてトレースする場合、各トレースはスクリーンキャストを記録し、それをフィルムストリップとしてレンダリングします。フィルムストリップにカーソルを合わせると、各アクションの拡大画像と状態が表示され、検査するアクションを簡単に見つけることができます。

アクションをダブルクリックすると、そのアクションの時間範囲が表示されます。タイムラインのスライダーを使用して、選択したアクションを増やすことができ、これらは「アクション」タブに表示され、すべてのコンソールログとネットワークログは、選択したアクションのログのみを表示するようにフィルタリングされます。

スナップショット

スナップショット オプションをオン (デフォルト) にしてトレースする場合、Playwright は各アクションに対して完全な DOM スナップショットのセットをキャプチャします。アクションのタイプに応じて、以下をキャプチャします

タイプ	説明
前	アクションが呼び出された時点のスナップショット。
アクション	実行された入力の瞬間のスナップショット。このタイプのスナップショットは、Playwright が正確にどこをクリックしたかを探る場合に特に役立ちます。
後	アクション後のスナップショット。

典型的なアクションスナップショットは次のようになります

DOM ノードと正確なクリック位置の両方が強調表示されていることに注意してください。

ソース

サイドバーのアクションをクリックすると、そのアクションのコード行がソースパネルで強調表示されます。

呼び出し

「呼び出し」タブには、かかった時間、使用されたロケーター、厳密モードの場合、使用されたキーなど、アクションに関する情報が表示されます。

ログ

テストの完全なログを参照して、Playwright が背後で何をしているかをより深く理解します。たとえば、ビューへのスクロール、要素が表示され、有効になり、安定するのを待機し、クリック、入力、押下などのアクションを実行します。

エラー

テストが失敗した場合、「エラー」タブに各テストのエラーメッセージが表示されます。タイムラインにも、エラーが発生した場所を強調表示する赤い線が表示されます。「ソース」タブをクリックして、ソースコードのどの行でエラーが発生したかを確認することもできます。

コンソール

ブラウザとテストからのコンソールログを確認します。コンソールログがブラウザからのものか、テストファイルからのものかを示すさまざまなアイコンが表示されます。

アクションサイドバーでテストのアクションをダブルクリックします。これにより、コンソールがフィルタリングされ、そのアクション中に作成されたログのみが表示されます。すべて表示 ボタンをクリックすると、すべてのコンソールログが再度表示されます。

タイムラインを使用してアクションをフィルタリングするには、開始点をクリックして終了点までドラッグします。「コンソール」タブもフィルタリングされ、選択したアクション中に作成されたログのみが表示されます。

ネットワーク

「ネットワーク」タブには、テスト中に作成されたすべてのネットワークリクエストが表示されます。リクエストのタイプ、ステータスコード、メソッド、リクエスト、コンテンツタイプ、期間、サイズで並べ替えることができます。リクエストをクリックすると、リクエストヘッダー、レスポンスヘッダー、リクエストボディ、レスポンスボディなど、詳細情報が表示されます。

アクションサイドバーでテストのアクションをダブルクリックします。これにより、ネットワークリクエストがフィルタリングされ、そのアクション中に作成されたリクエストのみが表示されます。すべて表示 ボタンをクリックすると、すべてのネットワークリクエストが再度表示されます。

タイムラインを使用してアクションをフィルタリングするには、開始点をクリックして終了点までドラッグします。「ネットワーク」タブもフィルタリングされ、選択したアクション中に作成されたネットワークリクエストのみが表示されます。

メタデータ

「アクション」タブの隣には「メタデータ」タブがあり、ブラウザ、ビューポートサイズ、テスト期間など、テストに関する詳細情報が表示されます。