Gameplane/.github/workflows/visual-diff.yaml at master · GameplanePanel/Gameplane · 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
name: visual regression

on:
  push:
    branches: [master]
    paths:
      - 'web/**'
      - 'i18n/locales/**'
      - 'assets/design-export/**'
      - '.github/workflows/visual-diff.yaml'
  pull_request:
    paths:
      - 'web/**'
      - 'i18n/locales/**'
      - 'assets/design-export/**'
      - '.github/workflows/visual-diff.yaml'
  workflow_dispatch:

permissions:
  contents: read

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

jobs:
  visual-diff:
    name: design vs browser visual diff
    runs-on: ubuntu-latest
    permissions:
      contents: read
    timeout-minutes: 20
    defaults:
      run:
        working-directory: web
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          persist-credentials: false

      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
        with:
          node-version: "24"
          cache: "npm"
          cache-dependency-path: web/package-lock.json

      - name: install dependencies
        run: npm ci

      - name: playwright browser cache
        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('web/package-lock.json') }}
          restore-keys: |
            playwright-${{ runner.os }}-${{ runner.arch }}-

      - name: install chromium
        run: npx playwright install --with-deps chromium

      - name: capture browser screenshots
        run: npm run screenshots:design

      - name: compare design baseline vs browser captures
        if: always()
        run: npm run diff:screenshots -- --check-expected

      - name: upload visual diff artifacts
        if: always()
        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
        with:
          name: visual-diff-report
          path: web/test-results/visual-diff
          retention-days: 14
          if-no-files-found: warn

      - name: upload original browser captures
        if: always()
        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
        with:
          name: browser-screenshot-captures
          path: web/e2e/screenshots/*.png
          retention-days: 14
          if-no-files-found: warn

  pseudo-locale:
    name: en-XA screenshots (spec 019)
    runs-on: ubuntu-latest
    permissions:
      contents: read
    timeout-minutes: 30
    defaults:
      run:
        working-directory: web
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          persist-credentials: false

      - uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7.1.0
        with:
          node-version: "24"
          cache: "npm"
          cache-dependency-path: web/package-lock.json

      - name: install dependencies
        run: npm ci

      - name: playwright browser cache
        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('web/package-lock.json') }}
          restore-keys: |
            playwright-${{ runner.os }}-${{ runner.arch }}-

      - name: install chromium
        run: npx playwright install --with-deps chromium

      - name: capture en-XA screenshots and check clipping
        run: npm run screenshots:pseudo

      - name: upload en-XA captures and clipping report
        if: always()
        uses: actions/upload-artifact@cf430e030ddbb5b0abf93d22962f4752f3646cd9 # v7.0.2
        with:
          name: en-XA-screenshots
          path: |
            web/test-results/en-XA
            web/playwright-report
          retention-days: 14
          if-no-files-found: warn