チュートリアル: Playwright Workspaces を使用してエンドツーエンドの Playwright テストを実行する

このチュートリアルでは、Playwright テストスイートを Playwright Workspaces と統合し、クラウドでホストされているブラウザーを使用してテストをより迅速に実行する方法について説明します。 Playwright テストスイートをシミュレートし、Playwright Workspaces に接続して実行を高速化します。

このチュートリアルでは、次の操作を行います。

Playwright テストスイートを設定します。
Playwright テストスイートを Playwright Workspaces と統合します。
実行を高速化するために、サービスでテストスイートを実行します。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。
ご利用のローカルコンピューターに Azure CLI がインストールされていること。
Azure CLI バージョン 2.2.0 以降。コンピューターにインストールされているバージョンを確認するには、az --version を実行します。 Azure CLI をインストールまたはアップグレードする必要がある場合は、「Azure CLI をインストールする方法」を参照してください。
Visual Studio Code。お持ちでない場合は、ダウンロードしてインストールしてください。
Git。お持ちでない場合は、ダウンロードしてインストールしてください。

前提条件チェック

開始する前に、環境を検証します。

Azure portal にサインインし、ご利用のサブスクリプションがアクティブであることを確認します。
az --version を実行して、ターミナルまたはコマンドウィンドウの Azure CLI のバージョンを確認します。最新バージョンについては、最新のリリースノートを参照してください。

最新バージョンを使用していない場合は、オペレーティングシステムまたはプラットフォーム用のインストールガイドに従ってインストールを更新します。

Playwright テストスイートを設定する

この手順では、サービスと統合された Playwright テストスイートを作成します。

サンプルリポジトリを複製し、テストフォルダーに移動します。

git clone https://github.com/Azure/playwright-workspaces
cd playwright-workspaces/samples/playwright-tests

依存関係をインストールします。

npm install

Playwright テストを実行します。

このコマンドを実行して、サービスの外部でテストをローカルで実行し、サービスと統合する前に問題を特定します。このプロジェクトは、サービスと統合するために次の手順で使用されます。

npx playwright test

Playwright テストスイートを Playwright Workspaces と統合する

前のチュートリアルで作成した Playwright テストスイートを Playwright Workspaces サービスと統合します。

次の手順に従ってサービスを設定し、テストスイートを統合します。

Playwright ワークスペースを作成する

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

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

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

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

注

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

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

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

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

サービスパッケージをインストールするには、前のチュートリアルで作成したテストスイートの場所に移動し、次のコマンドを実行します。

npm init @azure/playwright@latest

このコマンドは、Playwright Workspaces に対する Playwright の指示と認証を行う playwright.service.config.ts ファイルを生成します。

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

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

サービスエンドポイント URL を取得するには、Azure portal でワークスペースに移動します。次に、[セットアップのリージョンエンドポイントの追加] で、ワークスペースのリージョンエンドポイントをコピーします。エンドポイント URL は、ワークスペースの作成時に選択した Azure リージョンと一致します。この URL が PLAYWRIGHT_SERVICE_URL 環境変数で利用可能であることを確認してください。

環境を設定する

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

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

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

認証を設定する

Playwright Workspaces で Playwright テストを実行するには、サービスでテストを実行している Playwright クライアントを認証する必要があります。 Playwright テストを実行している開発ワークステーションで認証します。

Microsoft Entra ID は、このサービスの既定かつ推奨される認証です。 Azure CLI を使用してサインインします。

az login

注

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

テストを大規模に実行する

これで、Playwright Workspaces を使用してクラウドで Playwright テストを実行するための構成が準備できました。

サービスで Playwright テストを実行する

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

Playwright Workspaces で Playwright テストを実行するには、次の手順に従います。

ターミナルウィンドウを開きます。
次のコマンドを入力して、リモートブラウザーで Playwright テストスイートを実行し、テスト結果をワークスペースに公開します。
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
テストが完了したら、ターミナルでテストの状態を表示できます。
```
Running 600 tests using 20 workers
    600 passed (3m)
```

次のステップ

フィードバック

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

Last updated on 2025-10-10