シリーズ一覧

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

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

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

理想はこちらでしょう。

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

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

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

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

Github Pagesの設定

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

Vercelの設定

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

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

{
  "$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の設定はこうなります。

- 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()を忘れないでね。

- 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へコメント

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

- 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

試してみる

プルリクエストを出したらテストが走ってコメントしてくれます。

URLをクリックすると、テスト結果を確認できます。

完了

これですべての設定が終わりました。少々煩雑だったんだけど、ビジュアルリグレッションテストがあればパッケージのバージョンアップにはもう怖くないでしょう。設定済みのプロジェクトはこちらです。ご参考まで。

https://thundermiracle.github.io/next-startbootstrap-agency