クイック スタート: Playwright ワークスペース レポートを使用して高度な診断を実行する

このクイック スタートでは、Playwright ワークスペースのレポート機能を使用して Playwright テストをデバッグする方法について説明します。 Playwright テストで高度な診断を実行するには、テスト レポートを Azure Storage に保存し、Playwright Workspaces レポーターを使用して Azure portal で表示します。

[前提条件]

• アクティブなサブスクリプションを持つ Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。
• Azure アカウントには、所有者、共同作成者、または従来の管理者の役割のいずれかが必要です。
• Playwright ランナーと JavaScript SDK を使用する Playwright プロジェクト (NUnit およびその他のランナーは現在サポートされていません)。 プロジェクトがない場合は、 Playwright 入門ドキュメント を使用してプロジェクトを作成するか、 Playwright Workspaces サンプル プロジェクトを使用します。
• Playwright プロジェクトでは、Playwright パッケージ (@plawright/テスト) バージョン 1.57 以降を使用する必要があります。
• Azure CLI。 Azure CLI がインストールされていない場合は、「Azure CLI のインストール」を参照してください。
• Playwright ワークスペースでは、Microsoft Entra ID 認証を使用する必要があります。 レポートでは、アクセス トークンを使用した認証はサポートされていません。

レポートを有効にし、ストレージ アカウントをワークスペースにリンクする

Playwright Workspaces レポートの使用を開始するには、最初にワークスペースでレポートを有効にし、ストレージ アカウントをリンクしてレポート成果物を格納します。 新しいワークスペースの使用を開始することも、既存のワークスペースを使用することもできます。

リンクされたストレージ アカウントのロール ベースのアクセス制御 (RBAC) ロールを追加する

1. Azure portal でリンクされたストレージ アカウントを開きます。

2. [アクセス制御 (IAM)] タブを開きます。

   

3. [ロールの割り当ての追加] を選択します。

   

4. [ジョブ関数ロール] で、ストレージ BLOB データ共同作成者ロールを検索して選択し、[次へ] をクリックします。

   

5. テストを実行するすべてのメンバーを選択して追加します。

   

6. 確認と割り当てをクリックします。

Playwright Workspaces パッケージをインストールする

Playwright ワークスペースを使用するには、Playwright ワークスペース パッケージをインストールします。

npm init @azure/playwright@latest

このコマンドを実行すると、playwright から Playwright Workspaces への指示と認証を行う playwright.service.config.ts ファイルが生成されます。

このファイルが既に存在する場合、パッケージによって上書きが求められます。

HTML と Playwright Workspaces レポーターを有効にする

Playwright Workspaces レポート機能を使用するには、playwright.service.config.ts ファイルに次の設定を追加して、html と Playwright Workspaces レポーターを有効にします。

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Playwright セットアップ内で成果物を有効にする

プロジェクトの playwright.config.ts ファイルで、必要なすべての成果物を収集していることを確認します。

use: 
{
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
}

ブラウザー エンドポイントを構成する

セットアップでは、リージョン固有のブラウザー エンドポイントを指定する必要があります。 エンドポイントは、ワークスペースの作成時に選択した Azure リージョンによって異なります。

ブラウザー エンドポイント URL を取得するには、次の手順に従います。

1. Azure アカウントで Azure portal にサインインし、ワークスペースに移動します。

2. [ 作業の開始 ] ページを選択します。

   

3. [ブラウザー エンドポイントをセットアップに追加する] で、エンドポイント URL をコピーします。

   この URL が PLAYWRIGHT_SERVICE_URL 環境変数で使用できることを確認します。

   

環境を設定する

環境を設定するには、前の手順で取得した値を使用して PLAYWRIGHT_SERVICE_URL 環境変数を構成する必要があります。

dotenv モジュールを使用して環境を管理します。 dotenvを使用すると、.env ファイルで環境変数を定義できます。

1. dotenv モジュールをプロジェクトに追加します。

   npm i --save-dev dotenv
   

2. playwright.service.config.tsに次のコード スニペットを追加します。

   require('dotenv').config();
   

3. Playwright プロジェクト内の .env ファイルと共に playwright.config.ts ファイルを作成します。

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   {MY-REGION-ENDPOINT} テキスト プレースホルダーを、先程コピーした値に置き換えてください。

認証の設定

Playwright Workspaces で Playwright テストを実行するには、サービスでテストを実行している Playwright クライアントを認証する必要があります。 ローカル開発マシンまたは CI マシンから認証します。

Microsoft Entra ID を使用して認証を設定する

Microsoft Entra ID は、Playwright ワークスペースでレポート機能を使用するためにサポートされている唯一の認証です。 ローカル開発マシンから、 Azure CLI を使用してサインインできます

az login

Playwright ワークスペースを使用してテストを実行する

Playwright ワークスペースを使用してクラウドで Playwright テストを実行するための構成を完了しました。 Playwright CLI を使用してテストを実行するか、Playwright Test Visual Studio Code 拡張機能を使用できます。

Azure portal でテストの実行と結果をデバッグする

リンクされたストレージ アカウントのロール ベースのアクセス制御 (RBAC) ロールを追加する

1. Azure portal でリンクされたストレージ アカウントを開きます。

2. [アクセス制御 (IAM)] タブを開きます。

   

3. [ロールの割り当ての追加] を選択します。

   

4. [ 特権管理者ロール] で、[ 共同作成者* ロール] を検索して選択し、[ 次へ] をクリックします。

   

5. テスト レポートを表示できるすべてのメンバーを選択して追加します。

   

6. 確認と割り当てをクリックします。

(トレースが有効な場合のみ)リンクされたストレージ アカウントでパブリック トレース ビューアーの一覧を許可する

1. Azure portal でリンクされたストレージ アカウントを開きます。

2. 設定 -> リソース共有 (CORS) に移動します。

   

3. BLOB サービスで、新しいレコードを追加します。

   • 許可されるオリジン: https://trace.playwright.dev
   • 使用できるメソッド: GET、 OPTIONS
   • 最大有効期間: 0 ~ 2147483647の値を入力します。

   

4. 保存 を選択します。

Azure portal で保存されたテスト レポートを表示する

これで、Azure portal で失敗したテスト ケースのトラブルシューティングを行うことができます。

1. テストの実行が完了すると、レポーターは Azure portal の [テストの実行] ページへのリンクを生成します。 詳細なテスト結果と関連する成果物を表示するには、このリンクを開きます。

   

2. [ テストの実行] ページ には、トラブルシューティングに必要なすべての情報が表示されます。 次のようにすることができます。

   • 詳細なエラー ログ、テスト 手順、および添付された成果物 (スクリーンショットやビデオなど) を表示します。
   • より詳細な分析を実施するには、[Trace Viewer (トレース ビューアー)] に直接移動します。

   

3. トレース ビューアーを使用すると、テストの実行を視覚的にステップ実行できます。 次のようにすることができます。

   • タイムラインを使用して個々の手順にカーソルを合わせ、各アクションの前後にあるページの状態を明らかにします。
   • 各ステップの 詳細なログ、 DOM スナップショット、 ネットワーク アクティビティ、 エラー、 コンソール出力 を調べます。