Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 3

シリーズ一覧

Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 1
Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 2
Playwright+Github Actionでビジュアルリグレッションテストしてみた -- 3　← 今はここ

残課題2--テスト失敗した時PRの中に確認できるようにしたい

テストが失敗したら、一々Github ActionのArtifactファイルをダウンロード　→　解凍　→　htmlファイルを開くのが本当に面倒くさいです。

理想はこちらでしょう。

Playwrightが生成してくれるplaywright-reportをどこにホスティングする
ホスティング先のURLをプルリクエストへコメントする

`playwright-report`をGithub Pagesにホスティングする

Github Pagesを選ぶ理由は2つです。

publicなら無料。
Github Actionで簡単にデプロイできる。

Github Pagesの設定

Github Pagesの設定方法はオフィシャルサイトを確認すれば難しくありません。https://pages.github.com/

Vercelの設定

Vercelはブランチの変更を検知し、main（productionブランチ）以外Previewデプロイをやってくれます。しかし、Playwrightのレポートをホスティング用のブランチgh-pagesの変更はVercelのデプロイメントを発動させたくありません。エラーになってしまうからです。

vercel-gh-pages-error

Vercelの挙動を変えるために、gh-pagesブランチに、vercel.jsonを置く必要があります。

vercel.json


12345678{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "git": {
    "deploymentEnabled": {
      "gh-pages": false
    }
  }
}

これでVercelのデプロイメントが動かなくなります。

Github Actionの設定

Playwrightレポートのデプロイ先のフォルダはイベントによって違うでしょう。今回はこういうふうに設定したいと思います。

mainブランチへのpush: /mainフォルダ
プルリクエスト： **/pull/[pull request number]**フォルダ

Github Actionの設定はこうなります。

e2e.yaml


123456789101112131415- name: Get destination_dir for publishing to gh-pages
  if: |
    steps.alias-preview-url.outputs.status == 'READY' &&
    always()
  id: gh-pages-publish-info
  uses: actions/github-script@v6
  with:
    script: |
      const eventName = '${{ github.event_name }}';
      if (eventName === 'pull_request') {
        core.setOutput('dir', 'pull/${{ github.event.number }}/');
        core.setOutput('subPath', 'pull/${{ github.event.number }}/');
      } else {
        core.setOutput('dir', 'main/');
      }

4行目：ビジュアルリグレッションテストが落ちたとしても動くように、always()を忘れないでください。

Github Pagesへデプロイするための設定はpeaceiris/actions-gh-pagesを使えばすごく簡単です。（感謝の⭐️を入れておきましょう）

同じくalways()を忘れないでね。

e2e.yaml


1234567891011- name: Publish to gh-pages
    if: |
      steps.alias-preview-url.outputs.status == 'READY' &&
      always()
    uses: peaceiris/actions-gh-pages@v3
    with:
      github_token: ${{ secrets.GITHUB_TOKEN }}
      publish_dir: ./playwright-report/
      destination_dir: ${{ steps.gh-pages-publish-info.outputs.dir }}
      user_name: 'github-actions[bot]'
      user_email: 'github-actions[bot]@users.noreply.github.com'

これでgh-pagesへのデプロイメントの設定は完了しました。

プルリクエストへgh-pagesへコメント

これは流石に簡単でしょう。

e2e.yaml

123456789101112131415161718192021222324252627- name: 'Find comment for E2E test results'
  if: |
    github.base_ref == 'main' &&
    github.event_name == 'pull_request' &&
    steps.alias-preview-url.outputs.status == 'READY' &&
    always()
  uses: peter-evans/find-comment@v2
  id: fc-gh-pages
  with:
    issue-number: ${{ github.event.number }}
    comment-author: 'github-actions[bot]'
    body-includes: 'E2E test results'

- name: 'Create or update comment for E2E test results'
  if: |
    github.base_ref == 'main' &&
    github.event_name == 'pull_request' &&
    steps.alias-preview-url.outputs.status == 'READY' &&
    always()
  uses: peter-evans/create-or-update-comment@v2
  with:
    comment-id: ${{ steps.fc-gh-pages.outputs.comment-id }}
    issue-number: ${{ github.event.number }}
    body: |
      ### E2E test results
      - [https://thundermiracle.github.io/next-startbootstrap-agency/${{ steps.gh-pages-publish-info.outputs.subPath }}](https://thundermiracle.github.io/next-startbootstrap-agency/${{ steps.gh-pages-publish-info.outputs.subPath }})
    edit-mode: replace