Visual Regression Testの導入

.github/actions/netlify/action.yml

@@ -0,0 +1,39 @@
+name: Deploy to Netlify
+
+description: Deploy to Netlify
+
+inputs:
+  publish-dir:
+    description: e.g. "dist", "_site"
+    required: true
+  netlify-auth-token:
+    description: Required The token to use for authentication.
+    required: true
+  netlify-site-id:
+    description: API site ID of the site you wanna work on
+    required: true
+
+outputs:
+  netlify-url:
+    value: ${{ steps.result.outputs.deploy-url }}
+    description: the URL of the draft site that Netlify provides
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@v4
+      with:
+        clean: false
+    - name: Deploy to Netlify
+      id: netlify
+      # FYI: https://github.com/netlify/actions/pull/65
+      uses: South-Paw/action-netlify-cli@v2
+      with:
+        args: 'deploy --json --dir \"${{ inputs.publish-dir }}\" --message \"VRT report [${{ github.sha }}]\"'
+      env:
+        NETLIFY_AUTH_TOKEN: ${{ inputs.netlify-auth-token }}
+        NETLIFY_SITE_ID: ${{ inputs.netlify-site-id }}
+    - name: Set outputs
+      id: result
+      shell: bash
+      run: echo "deploy-url=${{ fromJson(steps.netlify.outputs.NETLIFY_OUTPUT).deploy_url }}" >> "$GITHUB_OUTPUT"

.github/actions/setup/action.yml

@@ -0,0 +1,22 @@
+name: Setup
+
+description: Setup environment
+
+runs:
+  using: composite
+  steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: package.json
+    - name: Cache node modules
+      id: node_modules_cache_id
+      uses: actions/cache@v4
+      env:
+        cache-name: cache-node-modules
+      with:
+        path: '**/node_modules'
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+    - if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: npm ci

.github/workflows/CD.yml

@@ -2,96 +2,51 @@ name: CD
 
 on:
   push:
-    branches: 
-    - master
+    branches:
+      - master
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.16.0]
-
     steps:
-    - uses: actions/checkout@v2
-      name: Check out repository code
-    - uses: actions/setup-node@v1 
-      name: Use Node.js ${{ matrix.node-version }}
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: actions/cache@preview
-      name: Cache ~/.npm/ 
-      with:
-        path: '~/.npm/'
-        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, 'package-lock.json')) }}
-        restore-keys:
-          ${{ runner.os }}-projectname-             
-    - run: npm ci  
-    - run: npm run build
-      name: Run build
-    - uses: nwtgck/actions-netlify@v1.2.3 
-      name: deploy to netlify 
-      with:
-        publish-dir: './out'
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-      env:
-        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}      
+      - uses: actions/checkout@v4
+        name: Check out repository code
+      - uses: ./.github/actions/setup
+      - run: npm run build
+        name: Run build
+      - uses: nwtgck/actions-netlify@v1.2.3
+        name: deploy to netlify
+        with:
+          publish-dir: './out'
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
 
   lint:
     name: Lint
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.17.0]
-
     steps:
-    - uses: actions/checkout@v2
-      name: Check out repository code
-    - uses: actions/setup-node@v1 
-      name: Use Node.js ${{ matrix.node-version }}
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: actions/cache@preview
-      name: Cache ~/.npm/ 
-      with:
-        path: '~/.npm/'
-        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, 'package-lock.json')) }}
-        restore-keys:
-          ${{ runner.os }}-projectname-             
-    - run: npm ci
-    - run: npm run lint
-      name: Run lint
+      - uses: actions/checkout@v4
+        name: Check out repository code
+      - uses: ./.github/actions/setup
+      - run: npm run lint
+        name: Run lint
 
   deploy:
     name: deploy
     needs: [build, lint]
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.16.0]
-
     steps:
-    - uses: actions/checkout@v2
-      name: Check out repository code
-    - uses: actions/setup-node@v1 
-      name: Use Node.js ${{ matrix.node-version }}
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: actions/cache@preview
-      name: Cache ~/.npm/ 
-      with:
-        path: '~/.npm/'
-        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, 'package-lock.json')) }}
-        restore-keys:
-          ${{ runner.os }}-projectname-           
-    - run: npm ci     
-    - run: npm run build # build時間が長くなってきたらdeploy jobにbuildを含めないでartifact経由で取得するように変更する
-    - uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./out   
+      - uses: actions/checkout@v4
+        name: Check out repository code
+      - uses: ./.github/actions/setup
+      - run: npm run build # build時間が長くなってきたらdeploy jobにbuildを含めないでartifact経由で取得するように変更する
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./out

.github/workflows/CI.yml

@@ -2,68 +2,38 @@ name: CI
 
 on:
   push:
-    branches: 
-    - '**' 
-    - '!master'
-    - '!gh-pages'
+    branches:
+      - '**'
+      - '!master'
+      - '!gh-pages'
 
 jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.16.0]
-
     steps:
-    - uses: actions/checkout@v2
-      name: Check out repository code
-    - uses: actions/setup-node@v1 
-      name: Use Node.js ${{ matrix.node-version }}
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: actions/cache@preview
-      name: Cache ~/.npm/ 
-      with:
-        path: '~/.npm/'
-        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, 'package-lock.json')) }}
-        restore-keys:
-          ${{ runner.os }}-projectname-             
-    - run: npm ci  
-    - run: npm run build
-      name: Run build
-    - uses: nwtgck/actions-netlify@v1.0     
-      name: deploy to netlify 
-      with:
-        publish-dir: './out'
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-      env:
-        NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-        NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}      
+      - uses: actions/checkout@v4
+        name: Check out repository code
+      - uses: ./.github/actions/setup
+      - run: npm run build
+        name: Run build
+      - uses: nwtgck/actions-netlify@v1.0
+        name: deploy to netlify
+        with:
+          publish-dir: './out'
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
 
   lint:
     name: Lint
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.16.0]
-
     steps:
-    - uses: actions/checkout@v2
-      name: Check out repository code
-    - uses: actions/setup-node@v1 
-      name: Use Node.js ${{ matrix.node-version }}
-      with:
-        node-version: ${{ matrix.node-version }}
-    - uses: actions/cache@preview
-      name: Cache ~/.npm/ 
-      with:
-        path: '~/.npm/'
-        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, 'package-lock.json')) }}
-        restore-keys:
-          ${{ runner.os }}-projectname-             
-    - run: npm ci
-    - run: npm run lint
-      name: Run lint
+      - uses: actions/checkout@v4
+        name: Check out repository code
+      - uses: ./.github/actions/setup
+      - run: npm run lint
+        name: Run lint

.github/workflows/vrt.yml

@@ -0,0 +1,48 @@
+name: Visual Regression Testing
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.45.1-jammy
+    timeout-minutes: 60
+    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: Run visual tests
+        continue-on-error: true
+        id: vrt
+        run: npm run test:vrt
+      - uses: ./.github/actions/netlify
+        id: netlify
+        timeout-minutes: 1
+        with:
+          publish-dir: ./.reg
+          netlify-auth-token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          netlify-site-id: ${{ secrets.NETLIFY_SITE_ID }}
+      - if: ${{ steps.vrt.outcome == 'success' }}
+        name: Comment PR if success
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            **✨✨ That's perfect, there is no visual difference! ✨✨**
+            You can check [this report](${{ steps.netlify.outputs.netlify-url }}) out here.
+          comment_tag: test-report-vrt
+      - if: ${{ steps.vrt.outcome == 'failure' }}
+        name: Comment PR if failure
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            **reg-suit detected visual differences.**
+            Check [this report](${{ steps.netlify.outputs.netlify-url }}), and review them.
+          comment_tag: test-report-vrt

.gitignore

@@ -33,3 +33,10 @@ yarn-error.log*
 
 # vercel
 .vercel
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
+# vrt
+.reg

.node-version

@@ -1 +1 @@
-18.16.0
+20.16.0

.npmrc

@@ -0,0 +1 @@
+engine-strict=true