57 lines
1.2 KiB
Markdown
57 lines
1.2 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run test:visual
|
||
|
|
```
|
||
|
|
|
||
|
|
until visual differences are within acceptable thresholds.
|