Azure Static Web Appsの環境毎にE2Eテストしてみる

Azure Static Web AppsがGAしたようで、とてもうれしい。

直近のマイブームがE2Eテストなので、Static Web Appsの中でも特にいいなと思うGitリポジトリのPull Requestごとの動作環境に対してE2Eとビジュアルテストを仕掛けてみた。

E2Eテストは先日試した Cypressをそのまま使い、ビジュアルテストはそれにPercyを連携してみた。

なんで Percy
構成
感想

なんで Percy

Cypressをベースにしたビジュアルテストは公式なドキュメントにいくつか手法が紹介されている。その中でシンプルに画像を比較しているっぽくて試してみやすそうなPercyを選んだ。

docs.cypress.io

構成

Static Web Appsはビルド、デプロイ用のGitHub ActionsのActionが用意されている。その出力にその時デプロイした環境のURLがある。これを後続のE2Eテストに入力してやる。

Cypressは環境変数でテスト時のベースURLを指定できるので、それを使ってみた。

SRC/azure-static-web-apps-icy-coast-005428600.yml at c4ae1afa27b472d5c7786a593cf9035af97927b0 · 7474/SRC · GitHub

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    # アクションの出力を参照して
    outputs:
      static_web_app_url: ${{ steps.builddeploy.outputs.static_web_app_url }}
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ICY_COAST_005428600 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: 'upload'
          app_location: 'SRC.Sharp/SRCTestBlazor/'
          api_location: ''
          output_location: 'wwwroot'

  e2e:
    runs-on: ubuntu-latest
    needs: build_and_deploy_job
    steps:
      - name: checkout
        uses: actions/checkout@v2
      - run: npm ci
        working-directory: ./SRC.Sharp/SRCTestBlazor/E2E
      - name: Percy exec Cypress run
        uses: percy/exec-action@v0.3.1
        with:
          working-directory: ./SRC.Sharp/SRCTestBlazor/E2E
          command: 'cypress run --record'
        env:
          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          # 別のジョブ、アクションに入力（環境変数に設定）してやる
          CYPRESS_BASE_URL: ${{ needs.build_and_deploy_job.outputs.static_web_app_url }}