@dragonmastery/playwemo

Headed Playwright demo walks: persistent overlay, visible cursor, device presets, paced clicks/fills, an email-safe transcript, and a stitched walk.mp4.

One spec, two speeds. Leave E2E_DEMO unset for a fast click storyboard (shot on teaching clicks). Set E2E_DEMO=1 for overlay, pacing, and video.

Docs (VitePress): playwemo.dragonmastery.com, or bun run docs:dev from the repo root.

Install (after publish)

npm install @dragonmastery/playwemo
npm install -D @playwright/test

Configure once per app

import { configureDemoWalk, runDemoWalk } from '@dragonmastery/playwemo';

configureDemoWalk({
  personas: {
    ADMIN: { bg: '#f59e0b', fg: '#111827' },
    ADVISOR: { bg: '#34d399', fg: '#022c22' },
  },
  layout: {
    main: '#main-content',
    stickyNavs: ['#admin-nav-sidebar'],
  },
  startPath: '/login',
});

Teaching stills: pass shot on demoClick / fillField / demoPoint. The pointer stays hidden until aimed. Each click uses one gold ring. Keep shot on the video run — the film path does not hold the ring or write a PNG. On video the ring pulses, then the click, then a short pause.

See the VitePress guide for overlay, recording, and transcripts.

License

MIT. Copyright Dragon Mastery.