cbioportal-frontend/.github/workflows/storybook-visual-tests.yml at cf6655348c8268ac2e8b5599c72ed8c9f5c92029 · cBioPortal/cbioportal-frontend · 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
# Storybook Visual Regression Tests
#
# Builds Storybook and runs Playwright screenshot tests against the static
# output. Each story is rendered in isolation (no backend, no auth), making
# these tests fast and reliable compared to full E2E screenshot tests.
#
# Snapshot strategy (mirrors end-to-end-test-playwright):
#   PW_DOCKER=1 → baselines read/written to __snapshots__/ (committed)
#   host runs   → __local_snapshots__/ (gitignored, never overwrite refs)
#
# First-time baseline setup:
#   When __snapshots__/ is empty (new stories added), PW_UPDATE_SNAPSHOTS
#   defaults to 'missing' — tests pass and new baselines are written.
#   The "Upload new/updated snapshots" step uploads them as an artifact.
#   Download the artifact, copy the PNGs into
#   storybook-visual-tests/tests/__snapshots__/ and commit them.
#
# Updating baselines after an intentional visual change:
#   Re-run this workflow with the input  update_snapshots: all
#   (via workflow_dispatch), download the artifact, and commit the new PNGs.

name: Storybook Visual Tests

on:
  push:
    branches: [master, rc]
  pull_request:
  workflow_dispatch:
    inputs:
      update_snapshots:
        description: >
          Snapshot update mode.
          'missing' writes only new baselines (default CI behaviour).
          'all' regenerates every baseline — use after intentional UI changes.
        type: choice
        options: [missing, all, none]
        default: missing

env:
  NODE_VERSION: '22.18.0'
  # Treat the GitHub Actions runner as the canonical Docker environment for
  # snapshot purposes (same flag the CircleCI playwright jobs use).
  PW_DOCKER: '1'

jobs:
  storybook-visual:
    name: Visual regression (Storybook + Playwright)
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Enable corepack and activate pnpm
        run: |
          corepack enable
          corepack prepare pnpm@10.33.0 --activate

      - name: Cache pnpm store
        uses: actions/cache@v4
        with:
          path: ~/.local/share/pnpm/store
          key: pnpm-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
          restore-keys: pnpm-${{ runner.os }}-

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Install Playwright Chromium browser
        run: pnpm exec playwright install chromium --with-deps

      - name: Build Storybook
        run: pnpm build-storybook

      - name: Run visual tests
        env:
          # workflow_dispatch lets the caller override; push/PR runs use the
          # default (undefined → Playwright falls back to 'missing').
          PW_UPDATE_SNAPSHOTS: ${{ inputs.update_snapshots }}
        run: node scripts/serve-and-test-storybook.js

      # Upload the canonical baselines whenever they were written or updated
      # so developers can download, review, and commit them.
      - name: Upload new/updated snapshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: storybook-snapshots
          path: storybook-visual-tests/tests/__snapshots__/
          if-no-files-found: ignore

      # Upload pixel diffs for any failing tests so reviewers can see exactly
      # what changed without having to reproduce locally.
      - name: Upload diff screenshots on failure
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: storybook-visual-diffs
          path: test-results/
          if-no-files-found: ignore