Profile My skills Saved Collections Edit profile Submit a skill

Diff

Scaffold a playwright visual regression test suite that takes per-route full-page screenshots and compares against committed baselines. Pixel diffing is done by playwright's toHaveScreenshot, not by dragoon. Use when the user wants visual regression coverage. Pass --routes to set the routes to capture. Defaults to dry-run; pass --apply to write. Run as `node ~/.claude/skills/dragoon/skills/diff/scripts/diff.js`.

dragoon0x d54e50b 2 files · 5.4 KB Updated
Coding & Dev Tools

File contents

/diff

Scaffolds visual regression with playwright snapshots.

When to use

  • The user wants visual regression coverage
  • "Set up screenshot diffing", "snapshot tests", "pixel diff"
  • Before any major UI refactor

What it writes

  • playwright.visual.config.ts snapshot-tuned config
  • tests/visual/routes.ts list of routes to capture (default /)
  • tests/visual/snapshots.spec.ts spec that loops routes and runs toHaveScreenshot

Pixel diffing is done by playwright's built-in toHaveScreenshot, not by dragoon. We just generate the harness.

Run it

dragoon diff
dragoon diff --apply
dragoon diff --apply --routes "/,/about,/login"

Then

npm i -D @playwright/test
npx playwright install --with-deps chromium
npx playwright test tests/visual --update-snapshots   # first time, baselines
npx playwright test tests/visual                      # after that, regression

Dragoon0x/dragoon-skills/tree/main/skills/diff commit d54e50b2d9

Browse category

Frequently asked questions

npx skillmds@latest add dragoon0x/diff