Reqnroll + PlaywrightでHTMLレポートにスクリーンショットを出力する方法

この記事は「Reqnroll × Playwrightで始めるE2Eテスト入門」シリーズの一部です。

【完全入門】Reqnroll × Playwrightで始めるE2Eテスト入門（C# / .NET対応）

Reqnroll + Playwright で HTML レポートにスクリーンショットを出力する方法
スクリーンショットを撮るヘルパーを作る
Reqnroll の HTML レポーター設定
Playwright Hooks の準備
ステップ内でスクリーンショットを HTML レポートに出力する
実行例
まとめ

Reqnroll + Playwright で HTML レポートにスクリーンショットを出力する方法

E2Eテストを行う際、ステップごとの画面状態をスクリーンショットとして残しておくと、テスト失敗時の原因解析が格段に楽になります。
この記事では、.NET環境で Reqnroll と Playwright を組み合わせ、 Reqnroll v3以降の機能であるHTMLレポートにスクリーンショットを埋め込む方法を解説します。

スクリーンショットを撮るヘルパーを作る

まずはスクリーンショットを簡単に撮影できるヘルパークラスを作成します。

using Microsoft.Playwright;

public static class ScreenshotHelper
{
    public static async Task<string> CaptureAsync(IPage page)
    {
        var dir = "TestResults/screenshots";

        if (!Directory.Exists(dir))
        {
            Directory.CreateDirectory(dir);
        }

        var fileName = $"{DateTime.Now:yyyyMMddHHmmss}.png";

        var path = Path.Combine(dir, fileName);

        await page.ScreenshotAsync(new PageScreenshotOptions
        {
            Path = path,
            FullPage = true
        });

        return path;
    }
}

FullPage = true にすることでページ全体をキャプチャできます。

Reqnroll の HTML レポーター設定

reqnroll.json に HTML レポートの出力先を設定します。

{
  "$schema": "https://schemas.reqnroll.net/reqnroll-config-latest.json",
  "formatters": {
    "html": {
      "outputFilePath": "TestResults/TestReport.html"
    }
  }
}

outputFilePath は生成される HTML レポートのパスです。
後でスクリーンショットを埋め込む際は、このパスを基準に相対パスを指定すると便利です。

Playwright Hooks の準備

Reqnroll のテスト実行前後にブラウザを起動・終了するために、以下で紹介している、Playwright Hooksを使います。

⇒　.NETのReqnrollプロジェクトでPlaywrightを使うときのコード構成（基本）

各シナリオ開始時にブラウザを起動し、終了時に閉じることで安定したテストが可能です。
Page は各ステップでスクリーンショット撮影に使います。

ステップ内でスクリーンショットを HTML レポートに出力する

Reqnroll の Output API を使って、StepDefinitionsのファイルで、スクリーンショットをステップログとして埋め込みます。

        private readonly IReqnrollOutputHelper _reqnrollOutputHelper;

        public CalculatorStepDefinitions(IReqnrollOutputHelper outputHelper)
        {
            _reqnrollOutputHelper = outputHelper;
        }

        [Given("サイトを開く")]
        public async Task OpenSite()
        {
            await PlaywrightHooks.Page.GotoAsync("https://playwright.dev/");
            var path = await ScreenshotHelper.CaptureAsync(PlaywrightHooks.Page);
            _reqnrollOutputHelper.AddAttachment(path);
        }

IReqnrollOutputHelperは、reqnrollの機能であり、自動的にインジェクトします。
IReqnrollOutputHelperには、レポートに対して、WriteLineメソッドによるテキスト出力や、AddAttachmentによる画像出力ができます。

実行例

Reqnroll + Playwright テストを実行
TestResults/screenshots にスクリーンショットが生成される
TestResults/TestReport.html を開くと、各ステップのスクリーンショットが確認できる

まとめ

スクリーンショットヘルパーを作るとテストコードがシンプルになる
Reqnroll の Output API で HTML レポートに簡単に埋め込める
レポートにスクリーンショットがあるとテスト失敗時のデバッグが効率的

これで、Playwright + Reqnroll でステップごとのスクリーンショット付き HTML レポートが作れるようになります。