次の方法で共有

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、大規模なエンド ツー エンドテストを実行する

  • [アーティクル]

このクイックスタートでは、Microsoft Playwright Testing (プレビュー) を使用して、高度に並列化されたクラウド ブラウザーで Playwright テストを実行し、失敗したテストを簡単にトラブルシューティングする方法について説明します。 クラウド インフラストラクチャを使用して、複数のブラウザー、デバイス、オペレーティング システムにわたってアプリケーションを検証します。 Playwright によって生成された結果と成果物をサービスに発行し、サービス ポータルでそれらを表示します。

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

重要

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

前提条件

ワークスペースの作成

クラウド ブラウザーで大規模な Playwright テストの実行を開始するには、まず Playwright ポータルで Microsoft Playwright Testing ワークスペースを作成します。

  1. Azure アカウントを使用して、Playwright ポータルにサインインします。

  2. ワークスペースが既にある場合は、既存のワークスペースを選択し、次の手順に進みます。

    ヒント

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

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

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

    Playwright ポータルの [ワークスペースの作成] ページを示すスクリーンショット。

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

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

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

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

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

npm init @azure/microsoft-playwright-testing@latest

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

  • Playwright を Microsoft Playwright Testing サービスに転送して認証する。
  • テスト結果と成果物を発行するレポーターを追加する。

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

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

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

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

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

サービス エンドポイント URL を取得するには、次の手順を実行します。

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

    エンドポイント URL は、ワークスペースの作成時に選択した Azure リージョンと一致します。 この URL が PLAYWRIGHT_SERVICE_URL 環境変数で利用可能であることを確認してください。

    Playwright Testing ポータルでワークスペース リージョン エンドポイントをコピーする方法を示すスクリーンショット。

環境を設定する

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

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

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

    npm i --save-dev dotenv

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

    PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}

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

サービス構成を設定する

次の内容を含むファイル PlaywrightServiceSetup.cs をプロジェクトに作成します。

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Note

プロジェクトで Microsoft.Playwright.NUnit バージョン 1.47 以降を使用していることを確認してください。

認証を設定する

Microsoft Playwright Testing ワークスペースで Playwright テストを実行するには、テストを実行している 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 を使用することを強くお勧めします。 アクセス トークンは便利ですが、有効期間が長いパスワードのように機能し、侵害されやすくなります。

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

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

注意事項

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

Playwright セットアップでアーティファクトを有効にする

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

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

スクリーンショット、ビデオ、トレースなどのアーティファクトを Playwright でキャプチャできるようにします。

これらのアーティファクトを収集したら、TestContext に添付し、テスト レポートで使用できるようにします。 詳細については、NUnit のサンプル プロジェクトに関するページを参照してください

Microsoft Playwright Testing を使用して、大規模なテストを実行し、簡単にトラブルシューティングを行います

これで、Microsoft Playwright Testing を使用してクラウドで Playwright テストを実行するための構成の準備ができました。 Playwright CLI を使用してテストを実行するか、Playwright Test Visual Studio Code 拡張機能を使用できます。

サービスで 1 つのテストを実行する

Microsoft Playwright Testing では、合計テスト時間数 (分) と発行されたテストの数に基づいて課金されます。 初めてのユーザーの場合、または無料試用版の使用を開始している場合は、完全なテスト スイートの代わりに大規模な 1 つのテストを実行することで、無料試用版の制限を超えないようにすることができます。

Note

レポート機能は、既存のワークスペースに対して既定で有効になっています。 これは段階的にロールアウトされ、数日かかる予定です。 エラーを回避するには、先に進む前に、ワークスペースの Rich diagnostics using reporting 設定がオンになっていることを確認します。 「ワークスペースのレポートを有効にする」を参照してください。

テストが正常に実行されたことを検証したら、サービスでさらに多くのテストを実行することで、テストの負荷を徐々に増やすことができます。

次の手順を使用して、Microsoft Playwright Testing で 1 つの Playwright テストを実行します。

Playwright CLI を使用して Microsoft Playwright Testing でテストを実行するには、コマンド ライン パラメーターとしてサービス構成ファイルを渡します。

  1. ターミナル ウィンドウを開きます。

  2. 次のコマンドを入力して、ワークスペース内のリモート ブラウザーで Playwright テストを実行します。

    {name-of-file.spec.ts} テキスト プレースホルダーをテスト仕様ファイルの名前に置き換えます。

    npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

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

    Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report

これで、サービスで複数のテストを実行したり、リモート ブラウザーでテスト スイート全体を実行したりできるようになりました。

注意事項

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

サービスで完全なテスト スイートを実行する

Microsoft Playwright Testing で 1 つのテストを実行できることを検証したので、完全な Playwright テスト スイートを大規模に実行できます。

Microsoft Playwright Testing で完全な Playwright テスト スイートを実行するには、次の手順を使用します。

Microsoft Playwright Testing を使用して複数の Playwright テストまたは完全なテスト スイートを実行する場合は、必要に応じて、コマンド ライン パラメーターとして並列 worker の数を指定できます。

  1. ターミナル ウィンドウを開きます。

  2. 次のコマンドを入力して、ワークスペース内のリモート ブラウザーで Playwright テスト スイートを実行します。

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

    このコマンドを実行すると、テスト スイートのサイズに応じて、最大 20 個の並列ワーカーでテストが実行されます。

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

    Running 6 tests using 6 workers
    6 passed (18.2s)

Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

サービスによって管理されているブラウザーに対して Playwright テストを実行し、上記で作成した構成を使用して統合ポータルで結果を確認します。

dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

テスト実行の設定は、.runsettings ファイルで定義されています。 サービス パッケージ オプションの使用方法に関するページを参照してください

テストの実行が完了すると、ターミナルでテストの状態を確認できます。

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

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

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

  1. テスト実行が完了すると、Playwright ポータルへのリンクが生成されます。 このリンクを開いて、詳細なテスト結果と関連する成果物を表示します。 ポータルには次のような重要な情報が表示されます。

    • CI ビルドの詳細
    • 全体的なテスト実行の状態
    • テスト実行に関連するコミット ID

    テスト実行のテストの一覧を示すスクリーンショット。

  2. Playwright ポータルには、トラブルシューティングに必要なすべての情報が表示されます。 次のことを実行できます。

    • 再試行を切り替える。
    • 詳細なエラー ログ、テスト手順、および添付された成果物 (スクリーンショットやビデオなど) を表示する。
    • 詳細な分析のためにトレース ビューアーに直接移動する。

    テストのプレビューを示すスクリーンショット。

  3. トレース ビューアーを使用すると、テスト実行の手順を視覚的に確認できます。 次のことを実行できます。

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

    トレース ビューアーを示すスクリーンショット。

  1. テストの実行が完了すると、ターミナルで Playwright ポータルへのリンクが表示されます。 このリンクを開いて、詳細なテスト結果と関連する成果物を表示します。 ポータルには次のような重要な情報が表示されます。

    • CI ビルドの詳細
    • 全体的なテスト実行の状態
    • テスト実行に関連するコミット ID

    テスト実行のテストの一覧を示すスクリーンショット。

  2. Playwright ポータルには、トラブルシューティングに必要なすべての情報が表示されます。 次のことを実行できます。

    • 詳細なエラー ログと、添付された成果物 (スクリーンショットやビデオなど) を表示する。
    • 詳細な分析のためにトレース ビューアーに直接移動する。

    テストのプレビューを示すスクリーンショット。

Note

メタデータの中には、現在サービス ダッシュボードに表示されないものがあります (所有者、説明、カテゴリなど)。 今後表示を希望する追加情報がある場合は、GitHub の問題点としてリポジトリに送信してください。

  1. トレース ビューアーを使用すると、テスト実行の手順を視覚的に確認できます。 次のことを実行できます。

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

    トレース ビューアーを示すスクリーンショット。

ヒント

Microsoft Playwright Testing サービス機能は、それだけで使用できます。 クラウドでホストされているブラウザー機能を使わずにテスト結果をポータルに発行でき、クラウドでホストされているブラウザーのみを使って、テスト結果を発行せずにテスト スイートを高速化することもできます。

Note

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

並列ワーカー構成を最適化する

サービスでテストがスムーズに実行されたら、並列ワーカーの数を変えて実験し、テスト完了までの時間を最小限に抑えられる最適な構成を判断します。

Microsoft Playwright Testing では、最大 50 個の並列ワーカーで実行することができます。 プロジェクトの最適な構成は、クライアント コンピューターの CPU、メモリ、ネットワーク リソース、ターゲット アプリケーションの負荷処理容量、テストで実行されるアクションの種類など、複数の要因の影響を受けます。

Playwright CLI コマンド ラインで並列 worker の数を指定するか、Playwright サービス構成ファイルで workers プロパティを構成できます。

Playwright CLI コマンド ラインで並列ワーカーの数を指定することも、.runsettings ファイルで NumberOfTestWorkers プロパティを構成することもできます。

詳細については、テスト スイートの完了を最適化する最適な構成を判断する方法に関するページを参照してください。

次のステップ

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

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

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