Continuous integration
GitHub Actions
storybranch in CI is a test: build Storybook, capture snapshots, exit1 when a shot needs attention. Approval stays on a machine where someone can runstorybranch review. There is no hosted review URL.
Copy-paste recipe
Start from the example workflow and PR comment script in the repo (Node.js 22.18+):
- visual-regression.yml
- storybranch-pr-comment.mjs
- docs/ci.md— monorepos, extra browsers, and how this repo’s own CI job works
What the job does
- Check out with
fetch-depth: 0so--only-changedcan find the merge base. - Install dependencies, then run
npx playwright install --with-deps chromium(GitHub-hosted runners need system libraries). npx storybook build, thennpx storybranch test --build --exit-once.Pull requests also pass--only-changed. Pushes tomaincapture every story.- On failure, upload
report.json,actual/, anddiff/as one artifact. Baselines stay in git.
npx storybook build
npx storybranch test --build --only-changed --exit-onceFlags that matter in CI
--exit-once— print results and skip the review server. Without it, a failed run can hang until the job times out.- Do not pass
--reviewor--openin CI. --only-changedusesGITHUB_BASE_REFon pull requests, otherwiseorigin/main. Lockfile or workflow edits still capture every story.- CI does not accept snapshots. Update
.storybranch/baseline/locally (storybranch approveor the review UI) and commit.
After a failed run
Download the workflow artifact, unpack it into the Storybook package, and run storybranch review. The example PR comment lists shots that need attention and links to the workflow run.
Monorepos
Each Storybook app keeps its own.storybranch/. Build and test from that package with --cwd (orSTORYBRANCH_ROOT):
npx storybook build --config-dir apps/web/.storybook \
--output-dir apps/web/storybook-static
npx storybranch test --build --cwd apps/web --exit-once