nxtgauge-admin-solid/docs/visual-pixel-matching.md

Admin UI Pixel Matching Workflow

This repo now supports route-level visual diffs against Figma PNG references.

Tools Used

• Storybook: manual page-level UI review and iteration
• Playwright: deterministic screenshot capture
• Pixelmatch: image diffing against Figma PNG references
• VisBug: browser-side spacing/typography inspection during manual tuning

Figma Reference Source

References are read from:

/Users/ashwin/workspace/Admin Panel/Nxtgauge Figma

Run Visual Pixel Tests

npm run test:visual

This runs tests/e2e/admin-visual.spec.ts, captures route screenshots, compares them with Pixelmatch, and writes artifacts to:

• tests/visual-artifacts/actual
• tests/visual-artifacts/diff

Storybook Pages For Manual Tuning

npm run storybook

Use stories in:

• src/stories/admin/AdminPages.stories.tsx

These stories mirror the same admin routes used in visual tests.

Using VisBug During Tuning

Install/use VisBug bookmarklet or extension in the Storybook browser tab and inspect:

• spacing
• typography sizes
• alignment
• box-model dimensions

Then rerun:

npm run test:visual

until visual differences are within acceptable thresholds.