test(vrt): baseブランチの差分と比較できるように修正

.github/actions/screenshots/action.yml

@@ -0,0 +1,53 @@
+name: Take screenshots
+
+description: Take screenshots
+
+inputs:
+  ref:
+    description: target branch
+  path:
+    description: the path to a directory containing saved screenshots
+    required: true
+
+outputs:
+  cache-key:
+    description: the cache key name
+    value: vrt-${{ steps.latest-commit.outputs.sha }}
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ inputs.ref }}
+        clean: false
+    - name: Check latest commit hash
+      id: latest-commit
+      run: |
+        git config --global --add safe.directory /__w/${{ github.event.repository.name }}/${{ github.event.repository.name }}
+        echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+      shell: bash
+    - name: Restore screenshots
+      id: vrt-screenshots
+      uses: actions/cache@v4
+      with:
+        path: ${{ inputs.path }}
+        key: vrt-${{ steps.latest-commit.outputs.sha }}
+    - if: ${{ steps.vrt-screenshots.outputs.cache-hit != 'true' }}
+      name: Install Japanese fonts
+      run: |
+        apt-get update
+        apt-get purge -y fonts-wqy-zenhei fonts-ipafont-gothic
+        apt-get install -y fonts-noto-cjk-extra
+        fc-cache -fv
+      shell: bash
+    - if: ${{ steps.vrt-screenshots.outputs.cache-hit != 'true' }}
+      uses: ./.github/actions/setup
+    - if: ${{ steps.vrt-screenshots.outputs.cache-hit != 'true' }}
+      name: Take screenshots
+      run: npm run screenshot
+      shell: bash
+    - name: debug
+      run: ls ${{ inputs.path }}
+      shell: bash

.github/workflows/vrt.yml

@@ -4,21 +4,61 @@ on:
   pull_request:
     types: [opened, synchronize]
 
+env:
+  screenshots-dir: './reg/screenshots'
+
 jobs:
-  test:
+  prepare-screenshots-actual:
+    name: Take actual screenshots
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.46.1-jammy
+    timeout-minutes: 60
+    outputs:
+      cache-key: ${{ steps.screenshots.outputs.cache-key }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: './.github/actions/screenshots'
+        id: screenshots
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: ${{ env.screenshots-dir }}
+
+  prepare-screenshots-expected:
+    name: Take expected screenshots
     runs-on: ubuntu-latest
     container:
       image: mcr.microsoft.com/playwright:v1.46.1-jammy
     timeout-minutes: 60
+    outputs:
+      cache-key: ${{ steps.screenshots.outputs.cache-key }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: './.github/actions/screenshots'
+        id: screenshots
+        with:
+          ref: ${{ github.base_ref }}
+          path: ${{ env.screenshots-dir }}
+
+  test:
+    name: Verify screenshots
+    needs: [prepare-screenshots-actual, prepare-screenshots-expected]
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Install Japanese fonts
-        run: |
-          apt-get update
-          apt-get purge -y fonts-wqy-zenhei fonts-ipafont-gothic
-          apt-get install -y fonts-noto-cjk-extra
-          fc-cache -fv
       - uses: ./.github/actions/setup
+      - name: Restore actual screenshots
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.screenshots-dir }}
+          key: ${{ needs.prepare-screenshots-actual.outputs.cache-key }}
+      - run: mv ${{ env.screenshots-dir }} .reg/actual
+      - name: Restore expected screenshots
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.screenshots-dir }}
+          key: ${{ needs.prepare-screenshots-expected.outputs.cache-key }}
+      - run: mv ${{ env.screenshots-dir }} .reg/expected
       - name: Run visual tests
         continue-on-error: true
         id: vrt

package.json

@@ -16,7 +16,8 @@
     "prepare": "husky",
     "preview": "astro preview",
     "start": "astro dev",
-    "test:vrt": "playwright test -u && reg-cli .reg/actual .reg/expected .reg/diff -R .reg/index.html",
+    "screenshot": "playwright test -u",
+    "test:vrt": "reg-cli .reg/actual .reg/expected .reg/diff -R .reg/index.html",
     "type-check": "astro check"
   },
   "dependencies": {

tests/vrt.spec.ts

@@ -2,10 +2,11 @@ import { test } from '@playwright/test'
 
 test.describe('Capture screenshots', () => {
   const workDir = '.reg'
+  const saveDir = `${workDir}/screenshots`
   const actualDir = `${workDir}/actual`
   const expectedDir = `${workDir}/expected`
 
-  test('Home', async ({ page }, info) => {
+  test.skip('[Old] Home', async ({ page }, info) => {
     for (const dir of [expectedDir, actualDir]) {
       const isExpectedDir = expectedDir === dir
 
@@ -17,4 +18,13 @@ test.describe('Capture screenshots', () => {
       })
     }
   })
+
+  test('Home', async ({ page }, info) => {
+    await page.goto('/')
+    await page.screenshot({
+      path: `${saveDir}/${info.title}/${info.project.name}.png`,
+      fullPage: true,
+      animations: 'disabled'
+    })
+  })
 })