📄

GitHub Actions上で実行したPlaywrightのレポートをGitHub Pagesで見る

mishiwata1015

2023/02/07に公開

GitHub Actions

Playwright

tech

こんにちは、 Leaner Technologies の石渡（@mishiwata1015）です。

最近肩こりに悩まされていて、分割キーボードにしたら軽減できないかな〜と気になっています🧐

今回は GitHub Actions 上で実行した Playwright のレポートを GitHub Pages で見るための設定手順をまとめました。

やりたいこと

Playwright のレポートをワンクリックでサッと見たい。

Playwright のドキュメントには、Actionsのページからレポートをダウンロードしてローカルで閲覧するよう案内されています。ただ、毎回ダウンロードしにいくのも面倒なので、レポートを GitHub Pages で公開すればワンクリックで閲覧できるんじゃないかなと考えました。

GitHub Pages公開設定

まずは、Playwright を実行しているリポジトリに対して GitHub Pages 公開設定をしていきます。gh-pages ブランチを作成すると自動的に GitHub Pages が有効になるので、以下の手順で作成します。

--orphan オプションを使って、親コミットを持たない gh-pages ブランチ作成
```
$ git checkout --orphan gh-pages
```
全部空にする
```
$ git rm -rf .
```

空コミット作成

$ git commit --allow-empty -m "Setup GitHub Pages"

リポジトリへ push

$ git push --set-upstream origin gh-pages

これで GitHub Pages が公開されます。リポジトリの Settings > Pages から有効になっているか確認してください。（まだ中身が無いためアクセスしても 404 エラー表示されます）

ここに Playwright のレポートを表示できるよう設定していきます。

テスト実行後、gh-pagesブランチへレポートをpushする

GitHub Actions でテスト実行後、Playwright のレポートを gh-pages ブランチへ push します。あとは GitHub Pages が自動的にデプロイしてくれます。

Playwright を実行しているワークフローに対して、以下のように push 処理を追記します。github.ref_name, github.run_id, github.run_attempt を組み合わせたディレクトリへ push することで、ワークフローの実行ごとに一意なパスでレポートが公開されます。

.github/workflows/playwright.yml

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]

jobs:
  test:
    name: Test
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 16
    - name: Install dependencies
      run: yarn
    - name: Install Playwright Browsers
      run: yarn playwright install --with-deps
    - name: Run Playwright tests
      run: yarn playwright test
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

  # ここからレポートpush処理
  publish_report:
    name: Publish Report
    # always() だとワークフローをキャンセルした場合も実行されてしまうので、明示的に指定する
    if: "success() || needs.test.result == 'failure'"
    needs: [test]
    runs-on: ubuntu-latest
    continue-on-error: true
    env:
      # ワークフロー実行ごとに一意となるパスを組み立てる
      HTML_REPORT_URL_PATH: reports/${{ github.ref_name }}/${{ github.run_id }}/${{ github.run_attempt }}
    steps:
      - name: Checkout GitHub Pages Branch
        uses: actions/checkout@v3
        with:
          ref: gh-pages
      - name: Set Git User
        # GitHub Actions botとしてレポート追加のコミットを作成する
        # See: https://github.com/orgs/community/discussions/26560
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
      - name: Download zipped HTML report
        uses: actions/download-artifact@v3
        with:
          name: playwright-report
          path: ${{ env.HTML_REPORT_URL_PATH }}
      - name: Push HTML Report
        timeout-minutes: 3
        # gh-pagesブランチにレポート追加のコミットをpushできるまでrebase, pushを繰り返す
        # 異なるPRで同時にCIが走った場合など、このジョブが同時に実行される場合でも全てのレポートをpushするために必要
        run: |
          git add .
          git commit -m "workflow: add HTML report for run-id ${{ github.run_id }} (attempt:  ${{ github.run_attempt }})"

          while true; do
            git pull --rebase
            if [ $? -ne 0 ]; then
              echo "Failed to rebase. Please review manually."
              exit 1
            fi

            git push
            if [ $? -eq 0 ]; then
              echo "Successfully pushed HTML report to repo."
              exit 0
            fi
          done
      - name: Output Report URL as Worfklow Annotation
        # レポートのGitHub PagesのURLを出力する
        run: |
          FULL_HTML_REPORT_URL=https://mishiwata1015.github.io/playwright-report-to-gh-pages/$HTML_REPORT_URL_PATH

          echo "::notice title=📋 Published Playwright Test Report::$FULL_HTML_REPORT_URL"