visual-differ/.github/workflows/visual-diff.yml at main · jrjohnson/visual-differ · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
name: Visual Diff

on:
  pull_request:
    types: [labeled, unlabeled, opened, synchronize, reopened]

concurrency:
  group: visual-diff-${{ github.head_ref || github.ref }}
  cancel-in-progress: true

jobs:
  baseline:
    name: Baseline
    runs-on: ubuntu-latest
    outputs:
      ref: ${{ steps.ref.outputs.ref }}
    steps:
      - uses: actions/checkout@v6
        with:
          ref: ${{ github.base_ref }}
      - id: ref
        run: |
          echo "$(git rev-parse HEAD)"
          echo "ref=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
      - name: Cache Screenshots
        id: screenshot-cache
        uses: actions/cache@v5
        with:
          path: build
          key: screenshots-${{ steps.ref.outputs.ref }}
      - uses: pnpm/action-setup@v5
      - uses: actions/setup-node@v6
        with:
          node-version: 24
          cache: pnpm
      - name: Install Dependencies
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          pnpm install
          pnpm exec playwright install --with-deps
      - name: Capture Screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: pnpm run test:screenshots
      - uses: actions/upload-artifact@v7
        with:
          name: baseline
          path: build

  candidate:
    name: Candidate
    runs-on: ubuntu-latest
    outputs:
      ref: ${{ steps.ref.outputs.ref }}
    steps:
      - uses: actions/checkout@v6
      - id: ref
        run: |
          echo "$(git rev-parse HEAD)"
          echo "ref=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
      - name: Cache Screenshots
        id: screenshot-cache
        uses: actions/cache@v5
        with:
          path: build
          key: screenshots-${{ steps.ref.outputs.ref }}-${{ matrix.name }}
      - uses: pnpm/action-setup@v5
      - uses: actions/setup-node@v6
        with:
          node-version: 24
          cache: pnpm
      - name: Install Dependencies
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: |
          pnpm install
          pnpm exec playwright install --with-deps
      - name: Capture Screenshots
        if: steps.screenshot-cache.outputs.cache-hit != 'true'
        run: pnpm test:screenshots
      - uses: actions/upload-artifact@v7
        with:
          name: candidate
          path: build

  compare:
    name: Visual Diff
    needs: [baseline, candidate]
    runs-on: ubuntu-latest
    env:
      OUTPUT_DIR: visual-diff-${{ github.event.pull_request.number }}
      BASELINE_REF: ${{needs.baseline.outputs.ref}}
      CANDIDATE_REF: ${{needs.candidate.outputs.ref}}
    steps:
      - uses: actions/checkout@v6
      - uses: actions/setup-node@v6
        with:
          node-version: 24
      - uses: pnpm/action-setup@v5
      - name: Restore Comparison Cache
        id: comparison-cache
        uses: actions/cache/restore@v5
        with:
          path: |
            ${{ env.OUTPUT_DIR }}
            results
          key: comparison-${{ env.BASELINE_REF }}-${{ env.CANDIDATE_REF }}
      - uses: actions/download-artifact@v8
        if: steps.comparison-cache.outputs.cache-hit != 'true'
      - run: ls -lh baseline candidate 2>/dev/null || true
      - run: |
          mkdir -p ./results
          echo ${{ github.event.pull_request.number }} > ./results/pr_number
      - run: pnpm install
        if: steps.comparison-cache.outputs.cache-hit != 'true'
      - run: pnpm build
        if: steps.comparison-cache.outputs.cache-hit != 'true'
      - name: Create Visual Diff
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        run: |
          set +e
          node ./dist/bin/visual-differ.js --threshold=0.1 baseline candidate ${{ env.OUTPUT_DIR }} > results/visual-diff.txt
          exit_code=$?
          echo $exit_code > ./results/exit_code
          cp ${{ env.OUTPUT_DIR }}/report.md results/
          cat results/report.md results/visual-diff.txt
      - uses: actions/upload-artifact@v7
        id: upload-output
        with:
          name: ${{ env.OUTPUT_DIR }}
          path: ${{ env.OUTPUT_DIR }}
      - run: |
          echo ${{ steps.upload-output.outputs.artifact-url }} > ./results/artifact_url
          echo ${{ contains(github.event.pull_request.labels.*.name, 'approve visual diff') }} > ./results/approved
      - name: Save Comparison Cache
        if: steps.comparison-cache.outputs.cache-hit != 'true'
        uses: actions/cache/save@v5
        with:
          path: |
            ${{ env.OUTPUT_DIR }}
            results
          key: ${{ steps.comparison-cache.outputs.cache-primary-key }}
      - uses: actions/upload-artifact@v7
        with:
          name: results
          path: results
      - name: Check Status
        run: |
          exitCode=$(cat ./results/exit_code)
          approved=$(cat ./results/approved)
          echo "visual-differ exit code: $exitCode"
          echo "approve visual diff label present: $approved"
          if [ "$exitCode" != "0" ] && [ "$approved" != "true" ]; then
            echo "Visual diff detected and 'approve visual diff' label not present."
            exit 1
          fi