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
133
134
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
    # Include the same system fonts used by the hosted runner alongside the
    # complete Playwright font set used for design and clipping comparisons.
    container: &screenshot_runtime
      image: mcr.microsoft.com/playwright:v1.65.0-noble@sha256:6e3fb709361521eb27161606e6da6d2674e5e89fa16516cb37d6fdd91372273d
      volumes:
        - /usr/share/fonts:/usr/local/share/fonts/runner:ro
    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

      - &verify_screenshot_browser
        name: verify the locked screenshot browser
        run: |
          node --input-type=module <<'JS'
          import assert from 'node:assert/strict';
          import { readFileSync } from 'node:fs';
          const json = path => JSON.parse(readFileSync(path, 'utf8'));
          assert.equal(
            json('/ms-playwright/.docker-info').driverVersion,
            json('node_modules/playwright/package.json').version,
            'Update the screenshot image digest when upgrading Playwright',
          );
          JS
          bash e2e/install-chromium.sh

      - 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
    container: *screenshot_runtime
    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

      - *verify_screenshot_browser

      - 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