@dinaalghazali/visual-regression-kit

Published as @dinaalghazali/visual-regression-kit on npm (npm username dinaalghazali). Forks should change "name" in package.json to their own scope.

Private registry: see PRIVATE_PUBLISH.md (GitHub Packages, npm org, or tarball).

npm package that scaffolds dynamic Storybook visual regression tests: Playwright reads storybook-static/index.json and captures screenshots per story and viewport. Works with any styling (Tailwind, CSS Modules, etc.) as long as Storybook preview loads the same global CSS as your app.

This is the same tree as the visual-regression-scaffold/ folder in the upstream visual-regression-workspace monorepo (if you maintain both, keep them in sync before publishing).

Install / use

From the root of the project that already has Storybook (or will have):

npx @dinaalghazali/visual-regression-kit init
# or a specific path:
npx @dinaalghazali/visual-regression-kit init /path/to/repo --force

--force overwrites existing files. Without it, existing files are skipped with a warning.

What gets copied

| Path | Role | |------|------| | docs/VISUAL_REGRESSION_DYNAMIC.md | Full integration guide | | tests/visual-dynamic/** | Playwright config, spec, visual.config.json, helpers | | npm-scripts.example.json | Merge these scripts into your package.json |

The package does not copy template/README.md (merge instructions) into your repo root, so your own README.md is safe.

After init

1. Merge npm-scripts.example.json into your package.json scripts (and adjust build-storybook if your Storybook CLI differs).
2. npm install -D @playwright/test then npx playwright install.
3. Import your global CSS in .storybook/preview so screenshots match production (see your app’s Tailwind / CSS entry).
4. npm run build-storybook — confirm storybook-static/index.json exists.
5. npm run test:visual:dynamic:update once to create baselines, then commit snapshot PNGs.

Chromatic (optional)

This package is not the Chromatic CLI. For Chromatic cloud UI review, add chromatic as a devDependency and a script that runs after build-storybook; use CHROMATIC_PROJECT_TOKEN in CI.

Publish (maintainers)

From this directory:

npm pack   # dry-run tarball

• Public on npmjs: npm publish --access public (enable 2FA / publish token on your npm account if npm asks).
• Private: follow PRIVATE_PUBLISH.md (GitHub Packages or npm org).

Bump version in package.json for each release.

Sync template from the monorepo kit

When visual-regression-scaffold/ changes at the repo root, refresh the bundled template:

# from repo root (Windows PowerShell)
Remove-Item -Recurse -Force packages/visual-regression-kit/template -ErrorAction SilentlyContinue
New-Item -ItemType Directory -Force -Path packages/visual-regression-kit/template
Copy-Item -Path visual-regression-scaffold/* -Destination packages/visual-regression-kit/template -Recurse

Then bump version and npm publish.

License

MIT