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

on:
  pull_request:

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

      - name: Run visual tests
        id: playwright-step
        run: cd packages/e2e && bash scripts/playwright/run-visual-tests
        continue-on-error: true

      - name: Upload error screenshots
        uses: actions/upload-artifact@v4
        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@v4
        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@v0.2.1
        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-snapshots` 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@v0.2.1
        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'