はじめに
前回は、AzureポータルでPlaywright Workspacesのリソースを作成し、簡易TODOアプリへのE2Eテストをクラウド上のChromiumで実行しました。ただし、実行したテストは2つ、ブラウザは1種類だけです。これではクラウド実行の恩恵はほとんど感じられません。
今回は、テストの対象をブラウザ／OS／モバイルへ広げ、並列度を上げて実行時間を短縮していきます。あわせて、並列化して表面化するテストの脆さについても紹介します。
projectsでブラウザマトリクスを組む
Playwrightで「同じテストを異なる条件で回す」ための仕組みが、設定ファイルのprojectsです。まずはここを拡張します。
projectsの役割
前回のplaywright.config.tsでは、projectsにchromiumがひとつ定義されているだけでした。projectsは実行条件のセットを並べる配列で、ここに定義した数だけ、testsフォルダ配下の全テストが繰り返し実行されます。テストコードには一切手を加えず、設定だけで対象環境を増やせるのがポイントです。
各projectに付けた名前は実行ログやレポートに表示されるほか、後述するテストデータの分離にも使うため、環境が識別できるものにしておきます。
3つのブラウザエンジンへ広げる
Playwrightが標準で扱えるブラウザエンジンは、Chromium（ChromeやEdgeの基盤）、Firefox、WebKit（Safariの基盤）の3種類です。devicesプリセットを使って定義します。
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
],
devicesは、ブラウザの種類やユーザーエージェント、ビューポートサイズなどをまとめたプリセット集です。この状態で実行すると、同じテストがブラウザの数だけ繰り返されます。HTMLレポーターで結果を開くと、各テストにプロジェクト名のバッジが付き、どの環境の結果なのかが一目で分かります。
図のように、同じテスト名がchromium、firefoxと並びます。これがマトリクス実行の基本形です。
実行OSはサービス設定全体で決まる
Playwright Workspacesは、クラウド上のブラウザをLinuxとWindowsのどちらでホストするかを選べます。ただし、ここには制約があります。
実行OSを指定するosオプションは、playwright.service.config.tsのcreateAzurePlaywrightConfigに渡すもので、サービス設定全体に適用されます。projectごとにOSを変えることはできず、1回の実行で使えるOSはひとつだけです。
そのため、両方を検証したい場合は実行そのものを分けます。ここでは環境変数で切り替えられるようにしておきましょう。
// 実行OSは環境変数SERVICE_OSで切り替えます（既定はLinux）
const serviceOs =
process.env.SERVICE_OS === 'windows'
? ServiceOS.WINDOWS
: ServiceOS.LINUX;
createAzurePlaywrightConfig(config, {
exposeNetwork: '<loopback>',
os: serviceOs,
// ポータル上で実行を見分けるための名前
runName: `todo-app-${serviceOs}`,
credential: new DefaultAzureCredential(),
})
runNameは、テスト実行に付ける名前です。指定しないとサービス側が自動生成したIDが使われるため、Azureポータルの実行履歴でLinux実行とWindows実行を見分けたいときは明示しておきます。
実行時は「SERVICE_OS=windows npx playwright test --config=playwright.service.config.ts」のように環境変数を与えます。PowerShellの場合は「$env:SERVICE_OS = "windows"」を先に実行してください。
