Microsoft Playwright Testing 使ってみた

## はじめに

本文書は Microsoft Playwright Testing を調査した内容をまとめたものである。メモに近い記述になっている部分がある。
また、本文書は、以下のドキュメントを参照し、記述する。

- <https://azure.microsoft.com/en-us/products/playwright-testing/>
- [Microsoft Playwright Testing Preview documentation](https://learn.microsoft.com/ja-jp/azure/playwright-testing/)
  - [What is Microsoft Playwright Testing?](https://learn.microsoft.com/ja-jp/azure/playwright-testing/overview-what-is-microsoft-playwright-testing)
  - [Quick start: Run end-to-end tests at scale with Microsoft Playwright Testing Preview](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-run-end-to-end-tests)
- [microsoft/playwright-testing-service#README](https://github.com/microsoft/playwright-testing-service/blob/main/README.md)

## What is Microsoft Playwright Testing ?

Microsoft Playwright Testing は Playwright を用いた end-to-end での Web アプリケーションの自動テストの実行環境を Microsoft Azure 上のマネージドサービスとして提供するもの。
2023/10現在 public preview で公開されている。このサービスには、以下の利点がある。

- すでにある Playwright を用いたテストコードをそのままクラウド上で実行できる。
- ローカル環境では実現し難い、並列実行数でテスト実行をスケールできる。
- 以下の複数のブラウザ、複数のOSをサポートする。
  - OS: Windows, Linux
  - Browsers: Chromium, Firefox, WebKit, Microsoft Edge
- Web アプリケーションがインターネット上に公開されている、いないに関わらずテスト実行できる。また、ローカル環境で実行しているアプリケーションに対してもテスト実行できる。

## How it works

以下の図は、Microsoft Playwright Testing のアーキテクチャを示している。

<img src="https://learn.microsoft.com/ja-jp/azure/playwright-testing/media/overview-what-is-microsoft-playwright-testing/playwright-testing-architecture-overview.png" alt="Architecture overview">

- Playwright の実行自体はクライアントマシンで行い、 Microsoft Playwright Testing がホストするブラウザ上で、テスト実行のするためにやりとりする。
- クライアントマシンには、自前のワークステーション、および CI エージェントマシンを利用できる。CI に組み込む場合は、 Microsoft Playwright Testing を利用したテスト実行をワークフローの一部にできる。
- テスト実行後は、実行結果のメタデータを Microsoft Playwright Testing のサービスにアップロードされ、テスト実行結果、トレースファイル、スクリーンショット、ビデオなどの出力をクライアントマシンから取得できる。

## Pricing

料金は、従量課金制で、実行時間1分あたりで計算される。ワーカー数での課金はないため、並列実行数は自由に設定できる模様。独立したテストケースを実装し、1ファイル内のテストケースも並列実行で実行できるようにした方が有効にサービスを活用できることになる。ただし、実行時間は、ワーカーごとの実行時間の合計となる。具体的な料金は [Microsoft Playwright Testing pricing](https://azure.microsoft.com/ja-jp/pricing/details/playwright-testing/) のページに記載がある。

## 実際に使ってみた

### 実行編

[Free trial](https://learn.microsoft.com/ja-jp/azure/playwright-testing/how-to-try-playwright-testing-free) として試すことができる。利用期間は30日間で、テスト実行時間は合計100分までとなっている。
[Quick start: Run end-to-end tests at scale with Microsoft Playwright Testing Preview](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-run-end-to-end-tests)に従って、 Microsoft Playwright Testing を利用したテスト実行を行う。手順は以下の通りで、 Playwright を用いたテストコードのプロジェクトがあれば、簡単に試すことができた。なお、`@playwright/test` のパッケージはバージョンを v1.37 以上を利用する必要がある。

1. [ワークスペース作成](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#create-a-workspace)
2. テストコードを管理するプロジェクトに [`playwright.service.config.ts`](https://github.com/microsoft/playwright-testing-service/blob/main/samples/get-started/playwright.service.config.ts) を追加する。
3. [サービスの認証のために Access Token を発行する。](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#create-an-access-token-for-service-authentication)
4. [サービスへ接続するエンドポイントURLを取得する](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#create-a-workspace)
5. `PLAYWRIGHT_SERVICE_ACCESS_TOKEN` と `PLAYWRIGHT_SERVICE_URL` の環境変数を `.env` ファイルで設定する。このファイルは git 等のリポジトリ管理下に置かないこと。
6. `npx playwright test --config=playwright.service.config.ts --workers=20` でテスト実行する。

### 継続的実行環境編

[Quick start: Set up continuous end-to-end testing with Microsoft Playwright Testing Preview](https://learn.microsoft.com/ja-jp/azure/playwright-testing/quickstart-automate-end-to-end-testing)に従って、 Microsoft Playwright Testing を利用したテストの継続的実行環境を構築する。ここでは GitHub Actions を用いたが、ほぼ前述の「[実行編](#実行編)」の手順と同様なので、差異がある部分のみ記述する。

- `PLAYWRIGHT_SERVICE_ACCESS_TOKEN` と `PLAYWRIGHT_SERVICE_URL` の環境変数は GitHub Actions の Secrets に設定する。
- ワークフローファイルには以下のように記述する。

  ```yaml
  - name: Install dependencies
    working-directory: path/to/playwright/folder # update accordingly
    run: npm ci
  - name: Run Playwright tests
    working-directory: path/to/playwright/folder # update accordingly
    env:
      # Access token and regional endpoint for Microsoft Playwright Testing
      PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
      PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
      PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
    run: npx playwright test -c playwright.service.config.ts --workers=20
  ```

## まとめ

Microsoft Playwright Testing はテストの並列実行環境を提供するサービスで、テスト実行自体のトリガーやスケジューリングなど、いわゆる CI のホストの機能は、提供していない。GitHub Actions や Azure Pipelines などと併せて利用することで、継続的なテスト実行環境を構築することになる。導入自体は、すでに Playwright を用いたテストコードがあれば、簡単にできる。


<!-- zenn article id: 0cac974d70b8df -->