brand/.github/workflows/visual_test_storybook.yml at 75d61862e81c4c3bafc2a454fabe167f04c72754 · primer/brand · 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
name: Visual test

on:
  pull_request:

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

jobs:
  visual-test:
    if: ${{ github.repository == 'primer/brand' }}
    name: Storybook
    runs-on: macos-latest-xlarge
    env:
      NODE_ENV: test
    steps:
      - name: Checkout repository
        uses: actions/checkout@v6

      - name: Set up Node
        uses: actions/setup-node@v6
        with:
          node-version: 24.14.1

      - name: Cache dependencies
        uses: actions/cache@v5
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm ci

      - name: Run visual tests
        id: playwright-step
        run: npm run test:visual --workspace=packages/e2e
        continue-on-error: true

      - name: Upload error screenshots
        uses: actions/upload-artifact@v7
        if: steps.playwright-step.outcome != 'success'
        with:
          name: playwright-test-results
          path: packages/e2e/playwright-test-results

      - name: Upload test results
        uses: actions/upload-artifact@v7
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: packages/e2e/playwright-report/
          retention-days: 30

      - name: Comment on the PR about visual differences
        if: steps.playwright-step.outcome != 'success'
        uses: phulsechinmay/rewritable-pr-comment@a1b041997fa84ec3e524ee9dee5ba0b5f4e73604 # v0.3.0
        with:
          message: |
            ### ⚠️ Visual differences found

            <details><summary>Our visual comparison tests found UI differences.</summary>

            Please review the differences by using the test artifacts to ensure that the changes were intentional.

            Artifacts can be downloaded and reviewed locally.

            Download links are available at the bottom of the workflow summary screen.

            ##### Example:
            ![artifacts section of workflow run](https://user-images.githubusercontent.com/13340707/181026915-2bda8a90-58e3-40ef-a2f6-c9c4af6e9c4a.png)

            If the changes are expected, please run `npm run test:visual:update` to replace the previous fixtures.
            </details>

            [Review visual differences](https://github.com/primer/brand/actions/runs/${{ github.run_id }})

          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          COMMENT_IDENTIFIER: 'visual-comparison-diff'

      - name: Comment on the PR about no visual differences
        if: steps.playwright-step.outcome == 'success'
        uses: phulsechinmay/rewritable-pr-comment@a1b041997fa84ec3e524ee9dee5ba0b5f4e73604 # v0.3.0
        with:
          message: |
            ### 🟢 No visual differences found

            Our visual comparison tests did not find any differences in the UI.
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          COMMENT_IDENTIFIER: 'visual-comparison-diff'