Playwright Workspacesでマルチプラットフォーム・マルチブラウザの並列テストを実行する

クラウドE2Eテストを実現するMicrosoft Playwright Workspaces入門 第3回

　本連載では全4回に分けて、Microsoftが提供するクラウド型のEnd-to-End（以降「E2E」）テストサービス「Microsoft Playwright Workspaces」について紹介します。

はじめに

　前回は、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プリセットを使って定義します。

［リスト1］ブラウザごとのprojects定義（playwright.config.ts）

projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit', use: { ...devices['Desktop Safari'] } },
],

　devicesは、ブラウザの種類やユーザーエージェント、ビューポートサイズなどをまとめたプリセット集です。この状態で実行すると、同じテストがブラウザの数だけ繰り返されます。HTMLレポーターで結果を開くと、各テストにプロジェクト名のバッジが付き、どの環境の結果なのかが一目で分かります。

図1：プロジェクト別に結果が表示されたHTMLレポーター

　図のように、同じテスト名がchromium、firefoxと並びます。これがマトリクス実行の基本形です。

実行OSはサービス設定全体で決まる

　Playwright Workspacesは、クラウド上のブラウザをLinuxとWindowsのどちらでホストするかを選べます。ただし、ここには制約があります。

　実行OSを指定するosオプションは、playwright.service.config.tsのcreateAzurePlaywrightConfigに渡すもので、サービス設定全体に適用されます。projectごとにOSを変えることはできず、1回の実行で使えるOSはひとつだけです。

　そのため、両方を検証したい場合は実行そのものを分けます。ここでは環境変数で切り替えられるようにしておきましょう。

［リスト2］実行OSを環境変数で切り替える（playwright.service.config.ts）

// 実行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"」を先に実行してください。