🤖 tests: make README screenshots reproducible via Storybook #2035
+2,762
−76
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
docs
ibetitsmike
force-pushed
the
mike/readme-storybook-states
branch
from
d69380a to
ae3615f
Compare
ibetitsmike
force-pushed
the
mike/readme-storybook-states
branch
from
ae3615f to
ec120d7
Compare
ibetitsmike
force-pushed
the
mike/readme-storybook-states
branch
from
7f034f3 to
d0b3666
Compare
Expand MessageWithImages into a 4-message bug-report arc with screenshots, add MultipleImageFormats story with 3 distinct placeholder image types (screenshot, diagram, photo), and add SingleLargeImage for non-gallery layout testing.
…tories - Enrich WithTitles: 8 workspaces across 3 projects (my-app, backend-api, docs-site) with mixed titles/no-titles and varied age timestamps - Add FuzzySearch: same rich set with 'refac' typed into palette input to demonstrate fuzzy filtering behavior - Add ManyWorkspaces: 14 workspaces across 5 projects (adds infra-tools, design-system) to stress-test palette scrolling and grouping - Extract shared helpers (createRichWorkspaces, setupStory, openPalette) to reduce boilerplate across stories
- Enrich MacOSDesktop with 4 workspaces across 2 projects so the sidebar shows real content behind the traffic lights - Extract createPopulatedClient() helper shared by both stories - Add BrowserMode story showing the non-Electron title bar variant - Use selectWorkspace + expandProjects + collapseRightSidebar for a lived-in app state
…stories - Expand setupGovernorStory from 1 workspace to 5 across 2 projects (my-app + infra-tools) for a lived-in sidebar behind the modal - Import expandProjects/collapseRightSidebar from storyHelpers - Add PolicyBlocked story: policyState 'blocked' with no providers, no MCP, only local runtime - Add RichPolicy story: enforced policy with 3 providers (anthropic with specific models, openai with forced proxy URL, google with all models allowed)
Replace thin 1-2 message exchanges with rich 4-6 message multi-turn arcs in 5 screenshot stories: - ProductHero: 5 messages with file read, file edit, bash, and status tools - CodeReview: 4 messages with file read, bash (typecheck), and PR summary - PlanMermaidWithCosts: 5 messages with bash (ls), propose plan, and status tools - CostsTabRich: 6 messages with file read, file edit, bash, and status tools - OpportunisticCompactionTooltip: 6 messages building up to the compaction (last message preserved with 'Replace all chat history' for play function) The chat panes now show realistic multi-turn agent conversations with tool calls, making screenshots look lived-in and professional.
Add scripts/capture-readme-screenshots.ts that uses Playwright + Sharp to capture all 8 README screenshot stories from a running Storybook instance. Features: - Navigates to each story's iframe URL with 2x DPR viewport (1600×1171) - Waits for network idle + stabilization before capture - Converts PNG captures to WebP (quality 90) via Sharp - Handles play-function stories (GitStatusPopover, ProjectSecretsModal, OpportunisticCompactionTooltip) by replicating interactions in Playwright - AgentStatusSidebar: clips sidebar region and upscales to full viewport - --storybook-url flag (default http://localhost:6006) - --story flag to capture a single story - Graceful error handling: logs failures but continues with remaining stories - Summary output with success/failure count Also adds 'capture-readme-screenshots' Makefile target.
ProjectSecretsModal: wrap querySelector in waitFor so it retries until the sidebar renders instead of failing immediately. OpportunisticCompactionTooltip: use findAllByRole and grab the last 'Start Here' button since multiple assistant messages each render one.
…ettings When policyState is 'blocked', the app renders PolicyBlockedScreen instead of the main App, so there's no settings button to click. Replace the play function to verify the blocked screen renders with 'blocked by policy' text.
…o capture script The opacity-0 secrets button is inside a Radix TooltipTrigger. Clicking it in the headless test runner triggers scroll-lock (pointer-events: none on body), preventing the modal from appearing. The capture script handles the full interaction via Playwright directly.
…rminal - Capture script: add TARGET_WIDTH (2400px), resize all screenshots from native 3200px (DPR 2) to consistent output width via lanczos3 kernel. - GitStatusPopover: add postProcess crop (left 40%, center vertical) for focused divergence tooltip shot. - AgentStatusSidebar: fix upscale to TARGET_WIDTH instead of viewport size. - ProductHero terminal: add ANSI color codes for realistic bun test + lint + typecheck output with colored prompts/checkmarks. - OpportunisticCompaction capture: use .last() for Start Here button to handle multiple assistant messages. - Remove unused createCompactionRequestMessage import.
Both stories rely on Radix portaled elements (tooltip/modal) that are unreliable in the headless test-runner environment. The capture script replicates these interactions via Playwright instead. Add tags: ['!test'] to exclude them from test-storybook while keeping them available for Chromatic visual regression and interactive use.
The README hero image is now mux-demo.gif instead of product-hero.webp. Remove ProductHero from the capture script's story list while keeping the story itself for Storybook browsing and Chromatic regression.
ibetitsmike
force-pushed
the
mike/readme-storybook-states
branch
from
d0b3666 to
c68c8e0
Compare
Replace 1600px legacy screenshots with high-resolution 3800px WebP
images captured from Storybook stories. Also fix capture script:
- Fix GitStatusPopover: use radio role selector instead of ambiguous
getByText('Commits')
- Fix ProjectSecretsModal: target manage-secrets button by aria-label
with force-click (bypasses opacity-0 hover requirement)
- Fix ProjectSecretsModal: use input[value] selector for secret keys
(they render in <input> elements, not as text nodes)
- Add retry logic (3 attempts) for stories with playInteraction to
handle flaky Radix portal timing under sequential load
Documents the full pipeline for regenerating high-resolution README screenshots from Storybook stories. Includes prerequisite checks, step-by-step procedure, troubleshooting, and explicit instructions to fail loudly if dependencies are missing.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Replace manually-captured README screenshots with a deterministic, reproducible pipeline using Storybook stories + Playwright + Sharp. All 7 documentation screenshots are now generated at 3800px (1900 CSS × DPR 2) from isolated mock states, ensuring visual consistency across regenerations.
Background
Implementation
Stories (
App.readmeScreenshots.stories.tsx)Docs/README Screenshots(7 captured + ProductHero for regression only)mockFactory.tswith stable timestamps, ANSI terminal output, multi-model token costs, git divergence states, and project secretsCapture Pipeline (
scripts/capture-readme-screenshots.ts)playInteractionfor Radix popovers/tooltips/modals (hover, click, tab switch)postProcessfor custom Sharp pipelines (sidebar crop+upscale, focused region extraction)Agent Skill (
.mux/skills/generate-readme-screenshots/)Screenshot Mapping
CodeReviewcode-review.webpAgentStatusSidebaragent-status.webpGitStatusPopovergit-status.webpPlanMermaidWithCostsplan-mermaid.webpProjectSecretsModalproject-secrets.webpCostsTabRichcosts-tab.webpOpportunisticCompactionTooltipopportunistic-compaction.webpValidation
make storybook-build)Generated with
mux• Model:anthropic:claude-opus-4-6• Thinking:xhigh• Cost:$153.96