クイックスタート: Playwright Workspaces を使用してエンドツーエンドのテストを大規模に実行する

このクイックスタートでは、Playwright Workspaces を使用して、高度にに並列なクラウドブラウザーで Playwright テストを実行する方法について説明します。クラウドインフラストラクチャを使用して、複数のブラウザー、デバイス、オペレーティングシステムにわたってアプリケーションを検証します。

このクイックスタートを完了すると、Playwright テストを大規模に実行するための Playwright Workspaces が作成されます。

[前提条件]

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

ワークスペースの作成

クラウドブラウザーで Playwright テストの実行を開始するには、まず Playwright Workspaces を作成する必要があります。

Azure portal にサインインします。
ポータルの左上隅にあるメニューボタンを選択して、[ リソースの作成] を選択します。
検索ボックスに「Playwright Workspaces」と入力します。
[Playwright Workspaces] カードを選択し、[作成] を選択します。

新しい Playwright Workspaces を構成するには、次の情報を指定します:

フィールド	説明
サブスクリプション	この Playwright Workspaces に使用する Azure サブスクリプションを選択します。
リソースグループ	既存のリソースグループを選択します。または、[新規作成] を選択し、新しいリソースグループの一意の名前を入力します。
名前	ワークスペースを識別する一意の名前を入力します。名前には英数字とハイフンのみを使用できます。3 から 24 文字の間で指定する必要があります。
場所	ワークスペースをホストする地理的な場所を選択します。この場所は、テスト実行結果が格納される場所も決定します。

注

必要に応じて、[タグ] タブでさらに詳細を構成できます。タグは名前と値のペアであり、同じタグを複数のリソースやリソースグループに適用することで、リソースを分類したり、統合された課金を表示したりできるようにします。

リソースの構成が完了したら、[確認および作成] を選択します。
すべての構成設定を確認し、[作成] を選択して Playwright Workspaces のデプロイを開始します。

プロセスが完了すると、デプロイ成功メッセージが表示されます。
新しいワークスペースを表示するには、[Go to resource]\(リソースに移動\) を選択します。

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

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

npm init @azure/playwright@latest

これにより、Playwright Workspaces に対する Playwrite から Playwrite Workspaces にダイレクトをし認証を行う playwright.service.config.ts ファイルが生成されます。

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

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

dotnet add package Azure.Developer.Playwright.NUnit

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

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

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

Azure アカウントで Azure portal にサインインし、ワークスペースに移動します。
[作業の開始] ページを選択します。
[ブラウザーエンドポイントをセットアップに追加する] で、エンドポイント URL をコピーします。

この URL が PLAYWRIGHT_SERVICE_URL 環境変数で利用可能であることを確認してください。

環境を設定する

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

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

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

サービス構成を設定する

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

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

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

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

注

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

認証を設定する

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

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

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

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

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

az login

注

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

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

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

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

注意事項

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

Playwright Workspaces を使用して大規模なテストを実行する

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

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

Playwright Workspaces では、合計テスト分数に基づいて課金されます。初めてのユーザーまたは無料試用版の使用を開始する場合は、無料試用版の制限を使い果たさないように、完全なテストスイートではなく 1 つのテストの実行から始めることができます。

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

Playwright Workspaces で 1 つの Playwright テストを実行するには、次の手順を実行します:

Playwright CLI
Visual Studio Code

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

ターミナルウィンドウを開きます。
次のコマンドを入力して、ワークスペース内のリモートブラウザーで 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
```

Playwright Workspaces を使用して Visual Studio Code で 1 つの Playwright テストを実行するには、テストエクスプローラー ビューでサービス構成ファイルを選択します。次に、テストの一覧からテストを選択して実行します。

Playwright Test Visual Studio Code 拡張機能をインストールします。
アクティビティバーでテストエクスプローラー ビューを開きます。

テストリストエディターによって、プロジェクト内の Playwright テストとサービス構成が自動的に検出されます。
[既定のプロファイルの選択] を選択し、サービス構成ファイルから既定のプロジェクトを選択します。

サービス実行プロファイルは、前に追加した playwright.service.config.ts ファイルから取得されていることに注意してください。

既定のプロファイルを設定すると、サービスでテストを自動的に実行したり、複数の Playwright プロジェクトを同時に実行したりできます。
テストの一覧から、テストの横にある [テストの実行] ボタンを選択して実行します。

テストは、既定のプロファイルで選択したプロジェクトで実行されます。サービス構成から 1 つ以上のプロジェクトを選択した場合、テストはワークスペース内のリモートブラウザーで実行されます。

ヒント

リモートブラウザーでテストを実行するときにも、[テストのデバッグ] ボタンを使用してテストコードをデバッグできます。
テスト結果は Visual Studio Code で直接表示できます。

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

注意事項

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

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

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

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

Playwright CLI
Visual Studio Code

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

ターミナルウィンドウを開きます。
次のコマンドを入力して、ワークスペース内のリモートブラウザーで Playwright テストスイートを実行します。
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
このコマンドを実行すると、テストスイートのサイズに応じて、最大 20 個の並列ワーカーでテストが実行されます。

テストが完了したら、ターミナルでテストの状態を表示できます。
```
Running 6 tests using 6 workers
    6 passed (18.2s)
```

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

dotnet test -- NUnit.NumberOfTestWorkers=20

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

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

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

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

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

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

次のステップ

これで、Azure portal で Playwright Workspaces が正常に作成され、クラウドブラウザーで Playwright テストが実行されました。

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

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

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-30