Skip to content

feat: add Storybook visual snapshot auto-update workflow for new components #1344

Description

@sw-factory-automations

Description

In the last 14 days, 3 bugs were filed for "UI does not match design spec" after PRs merged (#1229, #1233, #1264). These regressions are caught post-merge by the UI Verifier automation, but the fix cycle (bug issue → fix PR → review → merge) adds latency. The existing CI visual job compares Storybook screenshots against committed baselines, but new or modified stories that lack baseline snapshots pass silently — the visual regression test only fails when an existing baseline changes, not when a new component looks wrong.

Adding a CI step that detects new/modified *.stories.tsx files in the PR diff and flags them for manual baseline review would catch these regressions pre-merge.

Acceptance Criteria

  • CI visual job detects when a PR adds or modifies *.stories.tsx files
  • When new stories are detected, the job generates screenshots and uploads them as a PR artifact for review
  • When existing story baselines change, the job fails (existing behavior preserved)
  • A PR comment is posted listing new/changed stories with a link to the artifact for visual review
  • No false positives on PRs that don't touch stories
  • pnpm lint && pnpm typecheck && pnpm test pass

Dependencies

None

Technical Notes

  • The existing visual job in .github/workflows/ci.yml builds Storybook and runs pnpm test:visual against committed baselines in e2e/visual-regression.spec.ts-snapshots/.
  • Playwright's --update-snapshots flag can generate new baselines. The workflow could run this for new stories only and upload the results.
  • Use git diff --name-only origin/main...HEAD -- '*.stories.tsx' to detect changed story files.
  • The PR comment can use actions/github-script to post a summary.
  • This is an enhancement to the CI pipeline, not a code change — low risk of breaking existing functionality.

Approval Required

This is classified as HIGH risk because it modifies the CI pipeline behavior and could affect merge velocity if misconfigured (false positives blocking PRs). Comment "approved" to release it to the automation queue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestneeds-humanNeeds human input — automation will re-queue when user respondspriority:3

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions