Zenn
🎭

Microsoft Playwright Testing 使ってみた

2023/10/16に公開
Azure
Test
#
CI
Playwright
tech

はじめに

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

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 のアーキテクチャを示している。

Architecture overview

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

Pricing

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

実際に使ってみた

実行編

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

  1. ワークスペース作成
  2. テストコードを管理するプロジェクトに playwright.service.config.ts を追加する。
  3. サービスの認証のために Access Token を発行する。
  4. サービスへ接続するエンドポイントURLを取得する
  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に従って、 Microsoft Playwright Testing を利用したテストの継続的実行環境を構築する。ここでは GitHub Actions を用いたが、ほぼ前述の「実行編」の手順と同様なので、差異がある部分のみ記述する。

  • PLAYWRIGHT_SERVICE_ACCESS_TOKEN と PLAYWRIGHT_SERVICE_URL の環境変数は GitHub Actions の Secrets に設定する。

  • ワークフローファイルには以下のように記述する。

    - 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 を用いたテストコードがあれば、簡単にできる。

GitHubで編集を提案

Discussion