PlaywrightのUIテストをクラウドでさっくりと

# はじめに
Microsoft Playwright Testingというサービスがプレビューで出てきました。[公式ドキュメント](https://learn.microsoft.com/en-us/azure/playwright-testing/)に色々と書いてはありますが、なによりもUIテストを実行するインスタンス自体をマネージドサービスに外だしできるのはとても良いですよね。

なお、基本的に公式ドキュメントをなぞったのですが、2023/10/13現在は以下のバグがあり、テスト結果をAzure LogAnalytics Workspaceには送れないですね・・残念。プレビューですが、早く治るといいなぁ。
[[BUG]: Log Analytics receives no monitoring data after a test run ](https://github.com/microsoft/playwright-testing-service/issues/57)

# やったこと
試した内容は以下の5点だけです。とても簡単です。

1. Playwrightのバージョンを最新に上げる
1. Mirosfot Playwright Testing のリソースを作って設定を控える
1. クラウド実行用の設定ファイルを作成する
1. GitHub Actionsに組み込む
1. UIテスト結果を確認する

なお、参考にした公式ドキュメントは以下の2つです。
- [Quickstart: Run end-to-end tests at scale with Microsoft Playwright Testing Preview](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli)
- [Quickstart: Set up continuous end-to-end testing with Microsoft Playwright Testing Preview](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-automate-end-to-end-testing?tabs=github)

## 1. Playwrightのバージョンを最新に上げる
当初そのまま設定ファイルなどを作ったのですが、スキーマエラーなどが発生しましたので、公式最新にしておきます。（久々に触る場合なんか特に…）
```
npm install @playwright/test@latest
```

## 2. Microsoft Playwright Testing のリソースを作って設定を控える
このあたりは[公式の手順](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#prerequisites)そのままです。無料トライアルとして、30日間100分までのテストは無料になりますので、動きを試してみるくらいには十分使えそうです。

- Azure Portal から Microsoft Playwright Testing のリソースを作成する
- Microsoft Playwright Testing ポータルに移動する
- Microsoft Playwright Testing ポータルから必要な設定値（エンドポイント、トークン）を控えておく

## 3. クラウド実行用の設定ファイルを作成する
設定ファイル(playwright.service.config.ts)も[公式ドキュメントのまま](https://learn.microsoft.com/en-us/azure/playwright-testing/quickstart-run-end-to-end-tests?tabs=playwrightcli#add-microsoft-playwright-testing-configuration)で大丈夫です。既にあるplaywright.config.tsと同じとこに置きます。
もし、ここでエラーなどが出るようでしたらplaywrightのバージョンを上げる必要があります。

あとは環境変数ように.envなりを用意したら、この時点で`npx playwright test --config=playwright.service.config.ts"`でローカルからクラウド上でのUIテスト実行が可能です。失敗したらlocalhostに戻ってきてplaywrightの結果が確認できます。

## 4. GitHub Actionsに組み込む
基本的には公式ドキュメント通りなのですが、今回は以下のようにステージを分けました。

```yaml:github_actions.yml
  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テストが全部成功すれば普通にオールグリーンですが、失敗させると以下のような感じで失敗ログを確認できます。（しょうもないエラーを出させてみました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977156/12c41bb4-be3c-2cde-576a-140f635f0fff.png)

なお、本来であればテスト詳細ログをLog Analyticsにとばして、そっちで確認できるみたいなんですが、冒頭に書いたようにバグがあって確認できません。とても残念。

また、ダッシュボードもあるのですが、いつ誰がどのくらい実行したか、くらいの情報しかないため、こちらではテスト結果が確認できません。これも残念

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977156/8d60f81e-ae68-e200-f01e-5f62fe4e51b1.png)

# これからに期待

Playwright のテストをクラウド上で大量並列で実行するシナリオなど、現状でも使い勝手がありそうですが、プレビューゆえに以下の残念ポイントがあります。

- Log Analytics Workspaceにログがとばせない
- ダッシュボードではいつ実行したかくらいの情報しかない
- 上2点ゆえに、テスト結果をCI/CDパイプラインのログとして見ないとならない

まぁそれでもビルドマシン上からUIテストをしているケースなんかでは代替したほうが良いケースもありそうですし、またもしコンテナとかをUIテスト用に作っていたりするケースだと手間暇も減りそう。

結果を見るすべが充実してくるとこのサービスとてもとても使えそうな雰囲気だなというところが10/13プレビュー時点での評価かなと。

LoadTesting(JMeter)と合わせて使うと必要なテストの大部分がマネージドでまかなえるようになるので、期待してしばらく待ちたいと思います。