Kjell Tore Guttormsen
2ed24add12
tests/screenshot/run.mjs now clears PNGs a previous run left in its output directory and writes playground/screenshots/MANIFEST.json (output directory, sha256 per PNG, sha256 of the demo state rendered). One run produced the 24 PNGs in playground/screenshots/v1.15.0/ (12 surfaces x 2 themes, including the dark onboarding view removed in 1.18.1).
Removed the v1.10.0, v1.11.0, v1.14.0 and v2-mockup sets (77 PNGs) and tests/screenshot/shoot-mockup.local.mjs. Chose regenerate for the set the runner writes and delete for the rest, because the current runner cannot reproduce the older layouts, and the mockup script reads an HTML file that is not in the repository, so its output could never be regenerated from a clone.
README gallery, docs/playground.md and tests/screenshot/README.md now point at v1.15.0 and describe the 12 surfaces the runner captures. The manifest gate goes green: 4/4.
OCR (Apple Vision, local): 0 of 24 PNGs in the tree carry text from the older demo; known positives from 715950b were found (2 of 2).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
65 lines
2.3 KiB
Markdown
65 lines
2.3 KiB
Markdown
# Playground screenshot tooling
|
|
|
|
Standalone Playwright runner that captures playground screenshots for documentation.
|
|
|
|
## Usage
|
|
|
|
```bash
|
|
cd tests/screenshot
|
|
npm install
|
|
npx playwright install chromium # one-time, ~150 MB
|
|
node run.mjs
|
|
```
|
|
|
|
Output goes to `../../playground/screenshots/v1.15.0/`. The runner first deletes
|
|
PNGs a previous run left in that directory, then writes
|
|
`../../playground/screenshots/MANIFEST.json`: the output directory, the sha256 of
|
|
every PNG, and the sha256 of the demo state block it rendered.
|
|
`tests/kb-update/test-screenshots-manifest.test.mjs` fails when a PNG in the tree
|
|
is not in the manifest, a PNG changed, the demo state changed after the run, or a
|
|
doc points at another screenshot directory. Fix: run `node run.mjs` again.
|
|
|
|
## What it captures
|
|
|
|
For each theme (dark, light):
|
|
|
|
| # | Surface | View |
|
|
|---|---------|------|
|
|
| 01 | Onboarding | Empty state |
|
|
| 02 | Project | Overview (no artifact selected) |
|
|
| 03-07 | Project | Artifacts: classify, security, ros, cost, summary |
|
|
| 08 | Project | Import modal (viewport only) |
|
|
| 09 | Project | Sidebar search |
|
|
| 10 | Home | Project list with the demo project |
|
|
| 11 | Catalog | Command catalog |
|
|
| 12 | Onboarding | Prefilled from demo state |
|
|
|
|
= 24 PNGs, captured with `deviceScaleFactor: 2` (retina-crisp), `fullPage: true`
|
|
except the import modal.
|
|
|
|
## How the demo state works
|
|
|
|
The screenshot script clicks `[data-action="load-demo"]` which reads the
|
|
inline `<script type="application/json" id="demo-state-v1">` block from the
|
|
playground HTML. That block is generated by `scripts/build-demo-state.mjs`
|
|
and includes one demo project ("Acme: Kunde-chatbot") with
|
|
all 17 fixture markdowns pre-loaded as `raw_markdown`. After load, the
|
|
project surface re-runs `handlePasteImport` for each report so the
|
|
visualizations render automatically.
|
|
|
|
## Regenerating demo state
|
|
|
|
If `playground/test-fixtures/*.md` changes:
|
|
|
|
```bash
|
|
node scripts/build-demo-state.mjs
|
|
```
|
|
|
|
This rewrites the `<script id="demo-state-v1">` block in the playground HTML.
|
|
Regenerate the screenshots afterwards; the manifest gate fails until you do.
|
|
|
|
## Commit policy
|
|
|
|
- Commit `playground/screenshots/v1.15.0/*.png` and `MANIFEST.json` so forkers see what the
|
|
plugin looks like without running anything.
|
|
- Don't commit `node_modules/` (gitignored).
|