playwright-visual-regression.yml

name: Vercel Preview Playwright Visual Regression Tests

on:
  workflow_call:
    inputs:
      config-path:
        required: false
        type: string
      preview_url:
        required: true
        type: string
    secrets:
      token:
        required: false

permissions:
  contents: read

jobs:
  visual-regression:
    timeout-minutes: 30
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # 6.0.1

      - name: Enable Corepack (Pre-Setup)
        run: corepack enable

      - uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # 6.3.0
        with:
          node-version: 22

      - name: Enable Corepack
        run: |
          corepack enable
          corepack prepare yarn@4.12.0 --activate

      - name: Install dependencies
        run: yarn install

      - name: Install Playwright
        run: npx playwright install

      - name: Read paths from file and generate full URLs
        id: read-urls
        run: |
          base_url="https://${{ inputs.preview_url }}"
          full_urls=""
          paths=$(jq -r '.paths[]' packages/tests/pipelines-urls.json)
          for path in $paths; do
            full_url="${base_url}${path}"
            full_urls="${full_urls}${full_url}\n"
          done
          echo -e "The following URLs will be processed:\n$full_urls"
          echo "urls<<EOF" >> $GITHUB_ENV
          echo -e "$full_urls" >> $GITHUB_ENV
          echo "EOF" >> $GITHUB_ENV

      - name: Verify Snapshot Directory
        run: ls -la packages/tests/visual-regression.test.ts-snapshots

      - name: Run Playwright Visual Regression Tests
        continue-on-error: true
        env:
          BASE_URL: "https://${{ inputs.preview_url }}"
          VERCEL_BYPASS_TOKEN: ${{ secrets.VERCEL_BYPASS_TOKEN }}
        run: npx playwright test packages/tests/visual-regression.test.ts --config=packages/tests/playwright.config.ts --reporter=list

      - name: Upload Test Results
        if: always()
        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # 7.0.0
        id: upload-report
        with:
          name: test-report
          path: |
            test-results/*

      - name: Format Playwright message
        id: format_playwright_message
        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd  #v8.0.0
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const artifactUrl = '${{ steps.upload-report.outputs.artifact-url }}';

            let commentArray;

            if (artifactUrl && artifactUrl !== 'null') {
              commentArray = [
                `🔴 Visual comparisons failed. Differences detected. [Download report](${artifactUrl}).`,
                `If this change was expected push updated snapshots by running`,
                `yarn playwright-snapshots:update`
              ];
            } else {
              commentArray = [
                `🟢 Visual comparisons passed for pages:`,
                `${{ env.urls }}`
              ];
            }
            const comment = commentArray.join('\n');
            core.setOutput("comment", comment);

      - run: |
          echo "### Playwright results:: ${{ steps.format_playwright_message.outputs.comment }}" >> $GITHUB_STEP_SUMMARY

      - name: Send Playwright Report to Slack
        if: success() || failure()
        env:
          pr_url: ${{ github.event.pull_request.html_url }}
          comment: ${{ steps.format_playwright_message.outputs.comment }}
          repo_name: ${{ github.repository }}
          pr_number: ${{ github.event.pull_request.number }}
        run: |
          repo_name=$(echo "$repo_name" | cut -d'/' -f2)

          curl -X POST -H 'Content-type: application/json' \
          --data '{
            "text": "Playwright Visual Regression Tests completed for <'"$pr_url"'|PR #"$pr_number"> on '"$repo_name"'. \nTest Summary: \n'"$comment"'"
          }' \
          ${{ secrets.SLACK_WEBHOOK_URL }}