いわさです。
Web E2E テストを行うためのフレームワークには様々なものが存在しますが、その中のひとつに Microsoft が開発した Playwright というものがあります。
Playwright は Chromium、Firefox、WebKit のレンダリングエンジンをサポートしており、クロスプラットフォーム環境で使用することが出来ます。
Playwright のテストランナーは並列ワーカーの実行をサポートしており、大規模な E2E テストを CI/CD の中で実行する場合でも効率的に実行することが出来ます。
しかし、並列ワーカーを増やしたとしても CI/CD ワーカーのコア数など限度があり、テスト対象のブラウザやオペレーティングシステムの組み合わせやテスト規模が増えることによって、E2E テスト完了までの時間が増加する悩みがあります。
Azure 上の Playwright 実行環境「Microsoft Playwright Testing」
この問題を解決するアプローチのひとつとして Microsoft Playwright Testing というサービスがあります。
先日までプライベートプレビューで提供されていたのですが、最近パブリックプレビューで提供されるようになりました。
このサービスは Azure 上のマネージドサービスとして提供されており、次の構成図が示すように Playwright のワーカー環境をクラウド (Microsoft Azure) 上にオフロード出来るサービスとなっており、大規模な並列実行を構成することでテスト時間の短縮が期待出来ます。
引用元：What is Microsoft Playwright Testing? - Microsoft Playwright Testing | Microsoft Learn
本日は Microsoft Playwright Testing を導入して使ってみたので構成の流れなどを紹介したいと思います。
Azure 上のサービスとして構成
Azure ポータルから、あるいは Microsoft Playwright Testing 専用のポータルから構成が可能です。
導入方法ですが、ワークスペースを作成してトークンを発行し、あとは Playwright 実行環境でサービス構成を設定する流れとなります。
ポータルへは Playwright Service からサインイン出来ます。
ワークスペースの作成
Azure アカウントでサインインします。
サインイン出来たら、Azure サブスクリプションを選択してワークスペースを作成します。
料金については後述しますが、Azure サブスクリプションを通して料金が発生します。
ワークスペース情報としては、ワークスペース名と対象の Azure サブスクリプション、そしてリージョンを選択します。
リージョンは本日時点では次の 4 つのリージョンが選択出来ました。
なお、ワーカーが実行されるリージョンについては選択したリージョンで実行するか、あるいは最寄りのリージョンを自動選択されるか構成出来ます。後ほど説明します。
おそらくここで選択するリージョンはサービスのコントロールプレーンが実行されるリージョンなのかなと思います。
数秒でワークスペースが作成されると、実行環境のオンボーディング用の画面に遷移します。
なお、Azure ポータルからもワークスペース作成は可能です。
Playwright Testing サービスを探し、ワークスペースを作成することが出来ます。
どちらで作成した場合でもワークスペースは Azure 上でリソースとして管理することが出来ます。
Azure ポータルの場合は Overview からダッシュボード URL を取得してオンボーディング画面に遷移することが出来ます。
なお、Azure メニューの Region Management でテストが実行されるワーカーのリージョンを選択することが出来ます。
テスト環境を用意
Microsoft Playwright Testing はリモートワーカー環境を提供してくれるサービスなので、実行させるテストスクリプトや Playwright コマンドの実行環境は従来どおり準備が必要です。
Playwright の基本的な流れとしては初期設定・テストの作成・テストの実行となっています。
なお、本記事は以下のローカル環境に Playwright をセットアップしました。
% system_profiler SPSoftwareDataType SPHardwareDataType
Software:
System Software Overview:
System Version: macOS 13.5.2 (22G91)
Kernel Version: Darwin 22.6.0
:
Hardware:
Hardware Overview:
Model Name: MacBook Pro
Model Identifier: MacBookPro18,4
Model Number: Z15G001R1J/A
Chip: Apple M1 Max
Total Number of Cores: 10 (8 performance and 2 efficiency)
Memory: 32 GB
:インストール
% npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
:次のように環境が初期設定されました。
テスト実行
初期状態でexampla.spec.tsというテストスクリプトが用意されておりすぐに実行が可能です。
example.spec.ts
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects page to have a heading with the name of Installation.
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});テストの内容は`https://playwright.dev/`にアクセスしてタイトルを確認し「Get Started」リンクを押して遷移先画面のheadingタグを確認しています。
次のコマンドで実行することが出来ます。
% npx playwright test
Running 6 tests using 5 workers
6 passed (5.7s)
To open last HTML report run:
npx playwright show-reportちなみに、レポートも確認することが出来ます。なかなか良さげ。
Microsoft Playwright Testing で動作出来るようにする
ここまででローカル実行を試すことが出来ましたので、次はリモートワーカーで実行したいと思います。
手順はダッシュボードのオンボーディング手順に従えば良いです。
まずはサービス構成ファイルをplaywright.config.tsと同じ場所に配置します。
以下からダウンロードが可能です。
スクリプトの中ではアクセストークンとサービスエンドポイントの 2 つの環境変数を参照していますので、続いてそれらを構成します。
ダッシュボード上から Bash あるいは PowerShell 用に値つきでコマンドを取得出来ますのでそのまま実行します。
% export PLAYWRIGHT_SERVICE_ACCESS_TOKEN=eyJhbGci ... 0JIRh57Q
% export PLAYWRIGHT_SERVICE_URL=wss://eastasia.api.playwright.microsoft.com/api/authorize/connectSessionリモートワーカーで実行してみる
これでクラウド上で実行出来るようになったので並列ワーカーを指定して実行してみます。
実行時にサービス構成ファイルの指定が必要です。
なお、今回試していませんが Visual Studio Code の Playwright 拡張では自動でサービス構成を認識してくれるようです。
% npx playwright test --config=playwright.service.config.ts --workers=2
Running 6 tests using 2 workers
6 passed (28.0s)
To open last HTML report run:
npx playwright show-reportコマンド上は実行出来ました。
ワークスペースを確認してみるとアクティビティログが追加されていることが確認出来ます。ステータスはin Progressです。
少し待つとステータスが変更され、実行時間などが表示されました。
この画面からテスト実行内容の詳細なログが確認出来るわけではないので、従来どおりレポート機能などでローカルで確認する必要がありそうですね。
何度か実行していると、無料枠が消費されていることも確認しました。
今回試した内容では並列ワーカーを利用するような大規模なテストではないので、初期化などの時間のほうがオーバーヘッドになってしまっていますね。
数十分、数時間かかるような大規模なテストだと恩恵を受けれるのかなという感じです。
料金
Playwright 自体は OSS で誰でもすぐに使うことが出来るフレームワークですが、Microsoft Playwright Testing サービスはワーカーの実行時間に対する従量課金となっています。
料金の詳細は以下をご確認ください。
さいごに
本日は Playwright をローカルへ導入し、Microsoft Playwright Testing を構成してリモートワーカー上でテストを実行してみました。
Microsoft Playwright Testing サービスの構成と実行自体は設定する内容がほとんど無いので、Playwright 導入済みの方であればおそらく非常に簡単に導入出来るのではないでしょうか。
まだパブリックプレビューですが、Playwright の大規模な実行でテスト時間の課題を抱えている方はこのサービスのアップデートや GA タイミングなどウォッチしてみてください。
3
