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

Open
#1,344 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
55/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
github-actions, playwright, storybook, typescript
Domain
ci-cd, testing

Research direction

Start with the visual job in .github/workflows/ci.yml, then read e2e/visual-regression.spec.ts-snapshots/ and the existing pnpm test:visual command. Check how git diff --name-only origin/main...HEAD -- '*.stories.tsx' identifies changes and how actions/github-script can report them. Done means new or modified stories produce a reviewable artifact and comment while existing baseline changes still fail and unaffected PRs remain clean.

Written by the indexing model from the issue text.

Description

enhancement needs-human priority:3

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.

Dominant language
TypeScript
Stars
55
Forks
11
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from gitpod-io/memo

All issues in gitpod-io/memo

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.