全OSでGithub Actionsでのスナップショットを更新できるようにする

.github/workflows/test.yml

@@ -16,6 +16,29 @@ defaults:
     shell: bash
 
 jobs:
+  config: # 全 jobs で利用する定数の定義. `env` が利用できないコンテキストでも利用できる.
+    runs-on: ubuntu-latest
+    outputs:
+      shouldUpdateSnapshots: ${{ steps.check-whether-to-update-snapshots.outputs.shouldUpdateSnapshots }}
+    steps:
+      - name: Check if commit message includes [update snapshots]
+        id: check-whether-to-update-snapshots
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const commits = ${{ toJson(github.event.commits) }};
+            if (!commits) {
+              // pull_request などでコミットがない場合はスキップ
+              core.setOutput("shouldUpdateSnapshots", false);
+              process.exit(0);
+            }
+            const shouldUpdateSnapshots = commits.some((commit) =>
+              commit.message.toLowerCase().includes("[update snapshots]")
+            );
+            core.setOutput("shouldUpdateSnapshots", shouldUpdateSnapshots);
+            console.log(`shouldUpdateSnapshots: ${shouldUpdateSnapshots}`);
+
   # ビルドのテスト
   build-test:
     runs-on: windows-latest
@@ -38,6 +61,7 @@ jobs:
   # e2e テスト
   e2e-test:
     runs-on: ${{ matrix.os }}
+    needs: [config]
     strategy:
       fail-fast: false
       matrix:
@@ -87,31 +111,13 @@ jobs:
           sed -i -e 's|"executionArgs": \[\],|"executionArgs": ["--port='$PORT'"],|' .env.test
           cp .env.test .env
 
-      - name: Check if commit message includes [update snapshots]
-        id: check-whether-to-update-snapshots
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const commits = ${{ toJson(github.event.commits) }};
-            if (!commits) {
-              // pull_request などでコミットがない場合はスキップ
-              core.setOutput("shouldUpdateSnapshots", false);
-              process.exit(0);
-            }
-            const shouldUpdateSnapshots = commits.some((commit) =>
-              commit.message.toLowerCase().includes("[update snapshots]")
-            );
-            core.setOutput("shouldUpdateSnapshots", shouldUpdateSnapshots);
-            console.log(`shouldUpdateSnapshots: ${shouldUpdateSnapshots}`);
-
       - name: Run npm run test:browser-e2e
         run: |
           if [ -n "${{ runner.debug }}" ]; then
             export DEBUG="pw:browser*"
           fi
           ARGS=""
-          if [[ ${{ steps.check-whether-to-update-snapshots.outputs.shouldUpdateSnapshots }} == 'true' ]]; then
+          if [[ ${{ needs.config.outputs.shouldUpdateSnapshots }} == 'true' ]]; then
             ARGS="--update-snapshots"
           fi
           npm run test:browser-e2e -- $ARGS
@@ -134,35 +140,49 @@ jobs:
           name: playwright-report-${{ matrix.os }}
           path: playwright-report
 
-      - name: Upload updated snapshots to artifact
-        if: steps.check-whether-to-update-snapshots.outputs.shouldUpdateSnapshots == 'true'
+      - name: Collect patch for snapshots
+        if: needs.config.outputs.shouldUpdateSnapshots == 'true'
+        run: |
+          git add --intent-to-add tests/  # git diff に表示されるようにする
+          git diff tests/  # ロギング用
+          git diff --binary tests/ > patch-${{ matrix.os }}.diff
+
+      - name: Upload patch to artifact
+        if: needs.config.outputs.shouldUpdateSnapshots == 'true'
         uses: actions/upload-artifact@v4
         with:
           name: updated-snapshots-${{ matrix.os }}
-          path: tests/e2e/browser/*-snapshots/*
+          path: patch-${{ matrix.os }}.diff
 
   commit-snapshots:
     runs-on: ubuntu-latest
     permissions:
       contents: write
-    needs:
-      - e2e-test
+    needs: [config, e2e-test]
+    if: needs.config.outputs.shouldUpdateSnapshots == 'true'
     steps:
       - uses: actions/checkout@v3
 
       - name: Download artifacts
         uses: actions/download-artifact@v4
         with:
           pattern: updated-snapshots-*
-          path: tests/e2e/browser
+          path: patches
           merge-multiple: true
 
       - name: Commit updated snapshots
         run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          # パッチを適用
+          for patch in patches/*.diff; do
+            git apply --allow-empty $patch
+            rm $patch
+          done
+
+          # 変更があるかチェック
           if [ -n "$(git status --porcelain)" ]; then
-            git add tests/e2e/browser
+            git config --global user.name "github-actions[bot]"
+            git config --global user.email "github-actions[bot]@users.noreply.github.com"
+            git add tests/
             git commit -m "（スナップショットを更新）"
             git push
           else

README.md

@@ -116,8 +116,11 @@ npx playwright codegen http://localhost:5173/#/talk  --viewport-size=800,600
 #### スクリーンショットの更新
 
 ブラウザ End to End テストでは Visual Regression Testing を行っています。
+現在 VRT テストは Windows のみで行っています。
 以下の手順でスクリーンショットを更新できます：
 
+##### Github Actions で更新する場合
+
 1. フォークしたリポジトリの設定で GitHub Actions を有効にします。
 2. リポジトリの設定の Actions > General > Workflow permissions で Read and write permissions を選択します。
 3. `[update snapshots]` という文字列をコミットメッセージに含めてコミットします。
@@ -128,6 +131,14 @@ npx playwright codegen http://localhost:5173/#/talk  --viewport-size=800,600
 
 4. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
 
+##### ローカルで更新する場合
+
+ローカル PC の OS に対応したもののみが更新されます。
+
+```bash
+npm run test:browser-e2e -- --update-snapshots
+```
+
 ### Electron End to End テスト
 
 Electron の機能が必要な、エンジン起動・終了などを含めた End to End テストを実行します。