Initialization script for VRT snapshots on GitHub Actions Cache. Original: https://github.com/korosuke613/homepage-2nd/blob/dcf81729456fc1f0a33c520fdfe9e53bf5ec7d2c/.github/workflows/vrt-regression.yaml

vrt-init.yaml

name: Initialize VRT

on:
  workflow_dispatch:

jobs:
  vrt-init:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: 
          fetch-depth: 0
          filter: blob:none

      - uses: pnpm/action-setup@v4

      - name: Install dependencies
        run: |
          pnpm install --frozen-lockfile

      - name: Extract playwright version
        id: playwright-ver
        run: |
          PLAYWRIGHT_VERSION=$(npm ls --json @playwright/test | jq --raw-output '.dependencies["@playwright/test"].version')
          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT

      - name: Cache playwright binaries
        uses: actions/cache@v3
        id: playwright-cache
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ steps.playwright-ver.outputs.PLAYWRIGHT_VERSION }}
          restore-keys: playwright-

      - name: Install playwright
        run: pnpm playwright install chromium --with-deps

      - name: Run VRT init
        run: |
          pnpm run test:visual

      - name: Cache VRT snapshots
        uses: actions/cache/save@v3
        id: vrt-cache
        with:
          path: **/*.test.ts-snapshots/*.png
          key: vrt-${{ hashFiles('**/*.test.ts-snapshots/*.png') }}

vrt.yaml

name: Run VRT

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  vrt:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: 
          fetch-depth: 0
          filter: blob:none

      - uses: pnpm/action-setup@v4

      - name: Install dependencies
        run: |
          pnpm install --frozen-lockfile

      - name: Extract playwright version
        id: playwright-ver
        run: |
          PLAYWRIGHT_VERSION=$(npm ls --json @playwright/test | jq --raw-output '.dependencies["@playwright/test"].version')
          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_OUTPUT

      - name: Cache playwright binaries
        uses: actions/cache@v3
        id: playwright-cache
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ steps.playwright-ver.outputs.PLAYWRIGHT_VERSION }}
          restore-keys: playwright-

      - name: Install playwright on hit cache
        if: steps.playwright-cache.outputs.cache-hit == 'true'
        run: |
          pnpm playwright install-deps
      - name: Install playwright on hit no cache
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: |
          pnpm playwright install --with-deps

      - name: Get VRT snapshots
        uses: actions/cache@v3
        id: vrt-cache
        with:
          path: **/*.test.ts-snapshots/*.png
          key: vrt-${{ hashFiles('**/*.test.ts-snapshots/*.png') }}

      - name: Check whether snapshots exist
        run: |
          if [[ -z "$(ls -A **/*.test.ts-snapshots/*.png)" ]]; then
            echo "Snapshots not found" >> $GITHUB_STEP_SUMMARY
            exit 1
          else
            echo "Snapshots found" >> $GITHUB_STEP_SUMMARY
          fi

      - name: Run VRT
        run: |
          pnpm run test:visual

      - name: Upload failed snapshots
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: vrt-failed-snapshots-${{ github.sha }}
          path: test-results