set up chromatic visual testing for a storybook project in ci using github actions
domain: www.chromatic.com · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
create a Chromatic project at chromatic.com, connect it to the GitHub repository, and copy the generated project token
store the token as a CHROMATIC_PROJECT_TOKEN secret in the repository's GitHub Actions settings
add a workflow using actions/checkout with fetch-depth: 0 so Chromatic has full git history to compute diffs against, followed by the chromaui/action step referencing the secret
configure the action to trigger on push events rather than pull_request, since pull_request-triggered runs can lose or misidentify baselines in some merge scenarios
review UI changes flagged in the Chromatic build and approve or request changes directly from the linked PR check
Known gotchas
shallow checkouts (the actions/checkout v2+ default) break Chromatic's ability to track history-based baselines, so fetch-depth: 0 is required
running the action on pull_request instead of push can cause Chromatic to compare against an unexpected baseline branch
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?