クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、テストのトラブルシューティングを行う

[アーティクル]
10/25/2024

このクイックスタートでは、Microsoft Playwright Testing (プレビュー) 上で発行されるレポートと成果物を使用して、Playwright テストのトラブルシューティングを簡単に行う方法について説明します。さらに、このガイドでは、サービスによって提供されるクラウドでホストされたブラウザーでテストを実行しているかどうかに関係なく、レポート機能を利用する方法を説明します。

このクイックスタートを完了すると、Microsoft Playwright Testing ワークスペースが作成され、サービスポータルでテスト結果と成果物を表示できるようになります。

重要

Microsoft Playwright Testing は現在、プレビュー段階です。ベータ版、プレビュー版、または一般提供としてまだリリースされていない Azure の機能に適用される法律条項については、「Microsoft Azure プレビューの追加使用条件」を参照してください。

背景

Microsoft Playwright Testing サービスを使用すると、以下が行えます。

クラウドでホストされたブラウザーを使用してテストを並列で実行することで、ビルドパイプラインを高速化します。
テスト結果と成果物をサービスに発行し、サービスポータルからアクセスできるようにすることで、トラブルシューティングを簡略化します。

サービスのこれら 2 つの機能は互いに独立して使用でき、それぞれに独自の料金プランが設定されています。つまり、次のことが可能になります。

クラウドでホストされたブラウザーでテストを実行し、結果をサービスに発行することで、テスト実行を迅速化し、トラブルシューティングを効率化します。
クラウドでホストされたブラウザーでのみテストを実行して、テスト実行を高速化します。
効率的なトラブルシューティングのために継続的にテストをローカルで実行しながら、テスト結果をサービスに発行します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、始める前に無料アカウントを作成してください。
Azure アカウントには、所有者、共同作成者、または従来の管理者の役割のいずれかが必要です。
Playwright プロジェクト。プロジェクトがない場合は、Playwright 入門ドキュメントを使用してプロジェクトを作成するか、Microsoft Playwright Testing サンプルプロジェクトを使用します。
Azure CLI。 Azure CLI がインストールされていない場合は、「Azure CLI のインストール」を参照してください。

ワークスペースの作成

Playwright Testing サービスへのテスト結果の発行を開始するには、まず Playwright ポータルで Microsoft Playwright Testing ワークスペースを作成します。

Azure アカウントを使用して、Playwright ポータルにサインインします。
ワークスペースが既にある場合は、既存のワークスペースを選択し、次の手順に進みます。

ヒント

複数のワークスペースがある場合、別のワークスペースに切り替えるには、ページ上部にあるワークスペース名を選択します。その後、[すべてのワークスペースの管理] を選択します。

まだワークスペースがない場合は、[+ 新しいワークスペース] を選択し、次の情報を入力します。

フィールド	説明
ワークスペース名	ワークスペースを識別する一意の名前を入力します。名前には英数字のみを使用できます。また、3 から 64 文字の間で指定する必要があります。
Azure サブスクリプション	この Microsoft Playwright Testing ワークスペースに使用する Azure サブスクリプションを選択します。
リージョン	ワークスペースをホストする地理的な場所を選択します。これは、ワークスペースのテストの実行データが保存される場所です。

[ワークスペースの作成] を選択して、サブスクリプションにワークスペースを作成します。

ワークスペースの作成時に、新しいリソースグループと Microsoft Playwright Testing Azure リソースが Azure サブスクリプションに作成されます。

ワークスペースの作成が完了すると、セットアップガイドにリダイレクトされます。

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

サービスを利用するには、Microsoft Playwright Testing パッケージをインストールします。

npm init @azure/microsoft-playwright-testing

このコマンドにより、次の処理を行うための playwright.service.config.ts ファイルが生成されます。

Playwright クライアントを Microsoft Playwright Testing サービスにアクセスさせて認証する。
テスト結果と成果物を発行するレポーターを追加する。

このファイルが既にある場合、プロンプトによって上書きするよう求められます。

テスト実行にレポート機能のみを使用するには、useCloudHostedBrowsers を false に設定してクラウドでホストされたブラウザーを無効化します。

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

値を false に設定すると、クラウドでホストされたブラウザーがテストの実行に使用されなくなります。テストはローカルコンピューターで実行されますが、結果と成果物はサービスに発行されます。

ヒント

クラウドでホストされたブラウザーを使用してテストの実行を高速化する場合は、useCloudHostedBrowsers を true に設定できます。これにより、サービスで管理されるブラウザーでテストを実行できます。

サービスリージョンエンドポイントを構成する

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

サービスエンドポイントの URL を取得する

[セットアップのリージョンエンドポイントの追加] で、ワークスペースのリージョンエンドポイントをコピーします。

エンドポイント URL は、ワークスペースの作成時に選択した Azure リージョンと一致します。

環境を設定する

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

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

dotenv モジュールをプロジェクトに追加します。
```
npm i --save-dev dotenv
```
Playwright プロジェクト内の playwright.config.ts ファイルと共に .env ファイルを作成します。
```
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
{MY-REGION-ENDPOINT} テキストプレースホルダーを、先程コピーした値に置き換えてください。

認証の設定

Microsoft Playwright Testing ワークスペースでテスト結果と成果物を発行するには、サービスに対してテストを実行している Playwright クライアントを認証する必要があります。このクライアントはローカル開発マシンまたは CI マシンである可能性があります。

このサービスには、2 つの認証方法 (Microsoft Entra ID とアクセストークン) が用意されています。

Microsoft Entra ID では Azure 資格情報が使用され、アクセスをセキュリティで保護するためには Azure アカウントへのサインインが必要です。あるいは、Playwright ワークスペースからアクセストークンを生成し、セットアップで使用することもできます。

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

Microsoft Entra ID は、このサービスの既定かつ推奨される認証です。ローカル開発マシンから、Azure CLI を使用してサインインできます

az login

Note

複数の Microsoft Entra テナントに所属している場合は、ワークスペースが属するテナントにサインインしていることを確認してください。テナント ID は Azure portal から取得できます。「Microsoft Entra テナントを見つける」を参照してください。 ID を取得したら、コマンド az login --tenant <TenantID> を使用してサインインします

アクセストークンを使用して認証を設定する

Playwright Testing ワークスペースからアクセストークンを生成し、セットアップで使用できます。ただし、セキュリティが強化されているため、認証には Microsoft Entra ID を使用することを強くお勧めします。アクセストークンは便利ですが、有効期間が長いパスワードのように機能し、侵害されやすくなります。

アクセストークンを使用した認証は、既定では無効になっています。使用するには、アクセストークンベースの認証を有効にします
アクセストークンを使用して認証を設定します

注意事項

サービスへの認証には Microsoft Entra ID を使用することを強くお勧めします。アクセストークンを使用する場合は、「アクセストークンの管理方法」を参照してください。

Playwright の構成で成果物を有効化する

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

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

テストを実行し、Microsoft Playwright Testing で結果を発行する

これで、Microsoft Playwright Testing を使用してテスト結果と成果物を発行するための構成の準備ができました。新しく作成した playwright.service.config.ts ファイルを使用してテストを実行し、サービスにテスト結果と成果物を発行します。

   npx playwright test --config=playwright.service.config.ts

Note

Microsoft Playwright Testing のレポート機能に関しては、発行されたテストの数に基づいて請求されます。初めてのユーザーの場合や無料試用版の使用を開始する場合は、完全なテストスイートではなく 1 つのテストを発行することで、無料試用版の制限を超えないようにすることができます。

テストが完了したら、ターミナルでテストの状態を表示できます。

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)
    
Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

注意事項

テストスイートのサイズによっては、割り当てられた無料のテスト結果数を超えたテスト結果数の追加料金が発生する場合があります。

Playwright ポータルでテストの実行と結果を表示する

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

テスト実行が完了すると、Playwright ポータルへのリンクが生成されます。このリンクを開いて、詳細なテスト結果と関連する成果物を表示します。ポータルには次のような重要な情報が表示されます。
- CI ビルドの詳細
- 全体的なテスト実行の状態
- テスト実行に関連するコミット ID
Playwright ポータルには、トラブルシューティングに必要なすべての情報が表示されます。次のことを実行できます。
- 再試行を切り替える。
- 詳細なエラーログ、テスト手順、および添付された成果物 (スクリーンショットやビデオなど) を表示する。
- 詳細な分析のためにトレースビューアーに直接移動する。
トレースビューアーを使用すると、テスト実行の手順を視覚的に確認できます。次のことを実行できます。
- タイムラインを使用して個々の手順にカーソルを合わせて、各アクションの前後のページの状態を確認する。
- 手順の詳細なログ、DOM スナップショット、ネットワークアクティビティ、エラー、コンソール出力を調べる。

ヒント

Microsoft Playwright Testing サービスを使用して、クラウドでホストされたブラウザーを使用してテストを並列で実行することもできます。レポートとクラウドでホストされたブラウザーはどちらも独立した機能であり、個別に請求されます。このいずれかまたは両方を使用できます。詳細については、「サービス機能の使用方法」を参照してください。

Note

発行したテスト結果と成果物は、サービスに 90 日間保持されます。その後、自動的に削除されます。

次のステップ

Playwright ポータルで Microsoft Playwright Testing ワークスペースを正常に作成し、クラウドブラウザーで Playwright テストを実行しました。

次のクイックスタートでは、CI/CD ワークフローで Playwright テストを実行して、エンドツーエンドの継続的なテストを設定します。

CI/CD でエンドツーエンドの継続的なテストを設定する

次の方法で共有

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、テストのトラブルシューティングを行う

背景

前提条件

ワークスペースの作成

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

サービスリージョンエンドポイントを構成する

環境を設定する

認証の設定

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

アクセストークンを使用して認証を設定する

Playwright の構成で成果物を有効化する

テストを実行し、Microsoft Playwright Testing で結果を発行する

Playwright ポータルでテストの実行と結果を表示する

次のステップ

フィードバック

その他のリソース

次の方法で共有

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、テストのトラブルシューティングを行う

背景

前提条件

ワークスペースの作成

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

サービス リージョン エンドポイントを構成する

環境を設定する

認証の設定

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

アクセス トークンを使用して認証を設定する

Playwright の構成で成果物を有効化する

テストを実行し、Microsoft Playwright Testing で結果を発行する

Playwright ポータルでテストの実行と結果を表示する

次のステップ

フィードバック

その他のリソース

サービスリージョンエンドポイントを構成する

アクセストークンを使用して認証を設定する