はじめに
Microsoft Playwright Testingというサービスがプレビューで出てきました。公式ドキュメントに色々と書いてはありますが、なによりもUIテストを実行するインスタンス自体をマネージドサービスに外だしできるのはとても良いですよね。
なお、基本的に公式ドキュメントをなぞったのですが、2023/10/13現在は以下のバグがあり、テスト結果をAzure LogAnalytics Workspaceには送れないですね・・残念。プレビューですが、早く治るといいなぁ。
[BUG]: Log Analytics receives no monitoring data after a test run
やったこと
試した内容は以下の5点だけです。とても簡単です。
- Playwrightのバージョンを最新に上げる
- Mirosfot Playwright Testing のリソースを作って設定を控える
- クラウド実行用の設定ファイルを作成する
- GitHub Actionsに組み込む
- UIテスト結果を確認する
なお、参考にした公式ドキュメントは以下の2つです。
- Quickstart: Run end-to-end tests at scale with Microsoft Playwright Testing Preview
- Quickstart: Set up continuous end-to-end testing with Microsoft Playwright Testing Preview
1. Playwrightのバージョンを最新に上げる
当初そのまま設定ファイルなどを作ったのですが、スキーマエラーなどが発生しましたので、公式最新にしておきます。（久々に触る場合なんか特に…）
npm install @playwright/test@latest
2. Microsoft Playwright Testing のリソースを作って設定を控える
このあたりは公式の手順そのままです。無料トライアルとして、30日間100分までのテストは無料になりますので、動きを試してみるくらいには十分使えそうです。
- Azure Portal から Microsoft Playwright Testing のリソースを作成する
- Microsoft Playwright Testing ポータルに移動する
- Microsoft Playwright Testing ポータルから必要な設定値（エンドポイント、トークン）を控えておく
3. クラウド実行用の設定ファイルを作成する
設定ファイル(playwright.service.config.ts)も公式ドキュメントのままで大丈夫です。既にあるplaywright.config.tsと同じとこに置きます。
もし、ここでエラーなどが出るようでしたらplaywrightのバージョンを上げる必要があります。
あとは環境変数ように.envなりを用意したら、この時点でnpx playwright test --config=playwright.service.config.ts"でローカルからクラウド上でのUIテスト実行が可能です。失敗したらlocalhostに戻ってきてplaywrightの結果が確認できます。
4. GitHub Actionsに組み込む
基本的には公式ドキュメント通りなのですが、今回は以下のようにステージを分けました。
uitest:
runs-on: ubuntu-latest
needs: deploy
steps:
- uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: '18.x'
- name: npm install, build, and test
run: |
npm install
- name: Run Playwright tests
working-directory: .
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
5. UIテスト結果を確認する
UIテストが全部成功すれば普通にオールグリーンですが、失敗させると以下のような感じで失敗ログを確認できます。（しょうもないエラーを出させてみました）
なお、本来であればテスト詳細ログをLog Analyticsにとばして、そっちで確認できるみたいなんですが、冒頭に書いたようにバグがあって確認できません。とても残念。
また、ダッシュボードもあるのですが、いつ誰がどのくらい実行したか、くらいの情報しかないため、こちらではテスト結果が確認できません。これも残念
これからに期待
Playwright のテストをクラウド上で大量並列で実行するシナリオなど、現状でも使い勝手がありそうですが、プレビューゆえに以下の残念ポイントがあります。
- Log Analytics Workspaceにログがとばせない
- ダッシュボードではいつ実行したかくらいの情報しかない
- 上2点ゆえに、テスト結果をCI/CDパイプラインのログとして見ないとならない
まぁそれでもビルドマシン上からUIテストをしているケースなんかでは代替したほうが良いケースもありそうですし、またもしコンテナとかをUIテスト用に作っていたりするケースだと手間暇も減りそう。
結果を見るすべが充実してくるとこのサービスとてもとても使えそうな雰囲気だなというところが10/13プレビュー時点での評価かなと。
LoadTesting(JMeter)と合わせて使うと必要なテストの大部分がマネージドでまかなえるようになるので、期待してしばらく待ちたいと思います。