07 - Examples

SpecLoop ships with two small browser scenarios generated by specloop init. specloop scaffold scenarios can recreate the same starter scenarios later, and specloop scaffold scripts adds executable helpers.

Localhost Smoke

.specloop/scenarios/localhost-3000-smoke.md expects the product app to already be running at http://localhost:3000.

npm run dev
specloop scaffold scripts
node --experimental-strip-types scripts/specloop-browser-smoke.ts --target local

It saves .specloop/screenshots/local-landing.png.

Use --url when the app is not on port 3000:

node --experimental-strip-types scripts/specloop-browser-smoke.ts --target local --url http://localhost:5173

Lemon Content Screenshots

.specloop/scenarios/lemon-content-screenshots.md is a remote read-only example:

specloop scaffold scripts
node --experimental-strip-types scripts/specloop-browser-smoke.ts --target lemon

It opens https://lemon.dev.br/pt, scrolls to the footer, saves .specloop/screenshots/lemon-landing.png, clicks Conteúdo, and saves .specloop/screenshots/lemon-blog.png.

Scenario And Loop Authoring

After specloop scaffold scripts, create focused runbooks with:

node --experimental-strip-types scripts/specloop-new-scenario.ts --name "pricing smoke" --url "http://localhost:3000"
node --experimental-strip-types scripts/specloop-new-loop.ts --name "checkout smoke" --trigger "manual"

The scripts write markdown under .specloop/scenarios/ and .specloop/loops/ without overwriting existing files.

A Complete Example Should Prove

• a green run;
• a red run;
• a human-readable report;
• a machine-readable schema;
• a regression-test suggestion.

Examples must stay small. The goal is reproducibility, not a giant demo app.

See examples/nextjs-saas/.