| name | inspect-feature |
| description | Use when you need to visually inspect or verify a frontend feature (plots, result views) in this repo — take screenshots, check rendering, or confirm an interaction. Drives the dev:ui demo with Playwright via the inspection/ harness; runs locally or in Docker. Targets only this repo's own demo, never a downstream consuming app. |
Inspect a feature
Use the inspection/ harness to screenshot a feature instead of building
scaffolding. See inspection/README.md for detail.
Steps
- Pick a run mode. If the host has working browser libraries, use local
(
npm run inspect:setup once, then npm run inspect). If the sandbox lacks
browser system libraries (no sudo, missing libs like libnspr4.so), use
Docker: npm run inspect:docker (official Playwright image; nothing to
install).
- Ensure the sample exists. Check
packages/ui/src/demo/samples.ts; if the
fixture you need isn't there, add it to the registry (kebab-case key).
- Add a hook if needed. Targeting a specific component? Give its root a
stable
data-testid and rebuild the package.
- Write/adjust a spec under
inspection/specs/ using the inspect fixture
(goToSample, region, paretoPlot, shoot); copy pareto.spec.ts.
- Build then run.
npm run build (so dev:ui serves current code), then
the chosen inspect command.
- Read the screenshots from
inspection/output/*.png.
Notes
- On-demand only: don't wire this into CI; don't commit screenshots.
- Never reference brownie-bee or any downstream app — this harness targets only
this repo's
dev:ui demo.
