AzureポータルでPlaywright Workspacesを作成
ローカルのアプリが起動することが確認できたら、クラウド側の準備に入ります。AzureポータルでPlaywright Workspacesのリソースを作成しましょう。
リソースの作成手順
Azureポータルにサインインし、画面左上のメニューから「リソースの作成」を選択します。検索ボックスに「Playwright Workspaces」と入力し、表示された画面から「作成」を選択すると、リソース作成画面が開きます。
作成画面では、次の項目を設定します。サブスクリプションとリソースグループは、お手元の環境に合わせて選択してください。
- サブスクリプション：利用するサブスクリプションを選択
- リソースグループ：既存のものを選ぶか、新規に作成
- ワークスペース名：3〜64文字の英数字でワークスペース名を指定
- リージョン：ワークスペースをホストする地理的な場所
- レポート：テスト結果をワークスペースへアップロードするレポート機能の有効・無効
リージョンは、テスト結果の保存先と実行されるクラウドブラウザの場所を決める重要な項目です。日本国内のアプリを対象とするなら、「East Asia」を選ぶとレイテンシの面で有利になります。
レポートは、テストの実行結果やTrace、スクリーンショットをワークスペースへアップロードし、Azureポータル上のダッシュボードで一覧・分析できるようにする機能です。有効にすると、後述するplaywright.service.config.tsのレポーター設定（@azure/playwright/reporter）と連動してテスト結果が集約され、チームでの結果共有がしやすくなります。
一方で、結果の保存に伴うリソースを消費するため、まずは仕組みの理解を優先したい今回は構成をシンプルに保ち、レポートは「無効」に設定します。レポートが無効でも、クラウドブラウザでのテスト実行自体は問題なく行え、後述の「ブラウザーアクティビティログ」から実行の様子を確認できます。
なお、作成後にレポートを有効化したくなった場合も、ワークスペースの設定変更とレポーター設定の有効化によって後から切り替えられます。そのため、まずは無効のまま進め、必要になった段階で有効化を検討する流れがおすすめです。レポート機能を活用した結果分析は、次回以降で詳しく扱う予定です。
設定が済んだら「確認と作成」へ進み、内容を確認して「作成」を選択します。デプロイが完了したら「リソースに移動」を選択してワークスペースを開きます。
ブラウザーエンドポイントの確認
作成したワークスペースの概要画面には「ブラウザーエンドポイント」という項目があります。ここに表示されるエンドポイントURLは、選択したリージョンに対応したサービスの接続先です。後の手順で環境変数に設定するため、この値をコピーしておきましょう。
このエンドポイントURLが、ローカルのテストランナーとクラウドブラウザを結ぶ接続先となります。
@azure/playwrightによるプロジェクトの初期化
ワークスペースが用意できたら、ローカルのPlaywrightプロジェクトをクラウド実行に対応させます。ここで利用するのが「@azure/playwright」パッケージです。
これは旧Microsoft Playwright Testingで使われていた「@azure/microsoft-playwright-testing」の後継にあたるパッケージで、現在のPlaywright Workspacesではこちらを使用します。
初期化コマンドの実行
todo-appフォルダで、次のコマンドを実行します。
npm init @azure/playwright@latest
このコマンドは、Playwrightをクラウドへ接続・認証するための設定ファイル「playwright.service.config.ts」を生成します。
生成される設定ファイル
生成されるplaywright.service.config.tsの内容は次の通りです。既存の基本設定（playwright.config.ts）を読み込み、その上にクラウド実行用の設定を重ねる構造になっています。
import { defineConfig } from '@playwright/test';
import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';
export default defineConfig(
config,
createAzurePlaywrightConfig(config, {
exposeNetwork: '<loopback>', // localhostへのアクセスを許可
connectTimeout: 3 * 60 * 1000, // 接続タイムアウト（3分）
os: ServiceOS.LINUX, // 実行OSの指定
credential: new DefaultAzureCredential(), // Entra ID認証
})
);
「createAzurePlaywrightConfig」が、基本設定にクラウド実行用のオプションを付与する関数です。「os」では実行OS（LinuxまたはWindows）を、「credential」では認証方法を指定します。「exposeNetwork」に「<loopback>」を指定することで、クラウドのブラウザからローカルのlocalhostへアクセスできるようになります。前回触れた「インバウンドのポート開放が不要」という特徴は、この仕組みによって実現されています。
環境変数の設定
続いて、先ほど控えたブラウザーエンドポイントを環境変数「PLAYWRIGHT_SERVICE_URL」に設定します。ターミナルで以下のコマンドを実行します。
export PLAYWRIGHT_SERVICE_URL={ブラウザーエンドポイント}
{ブラウザーエンドポイント}の部分を、ポータルでコピーした値に置き換えてください。
