Getting started

Install

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

Peer: @playwright/test >=1.50.0. This package does not bundle Playwright. ffmpeg is optional and only needed to stitch walk.mp4.

Configure once

Call configureDemoWalk before any overlay install. Import that module from playwright.config.ts so every spec sees the same personas and layout. Init scripts receive these values as arguments — they cannot close over Node module state. See Playwright config.

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

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

First walk

import { demoClick, demoFocus, demoTimeout, runDemoWalk } from '@dragonmastery/playwemo';
import { test } from '@playwright/test';

test('owner signs in', async ({ browser, page }) => {
  test.setTimeout(demoTimeout(60_000));
  await runDemoWalk({ browser, page }, ['ADMIN'], async (walk) => {
    const admin = walk.page.ADMIN;
    await demoFocus(admin, '1 / 1', 'Sign in', 'On the login form');
    await demoClick(admin, admin.getByRole('button', { name: 'Sign in' }), {
      shot: 'sign_in',
    });
  }, { device: 'desktop' });
});

Leave E2E_DEMO unset. Open test-results/e2e-demo/stills/<stamp>/screenshots/sign_in.png. That PNG is the teaching beat (pointer + held ring). The run also writes transcript.txt.

When that still looks right, run the same spec with E2E_DEMO=1 for overlay, pacing, and walk.mp4. Keep every shot. Playwemo does not hold the ring or write those PNGs during video. See Video.

Next: Stills, then Writing a walk. Agents: For agents or getting-started.md.