ui-demo

Use Playwright's recordVideo context option combined with a three-phase process: discover page elements first, rehearse all selectors with an ensureVisible wrapper, then record with cursor overlays and natural pacing. Output is a WebM file at 1280x720.

Playwright recordings do not show a cursor by default. Inject an SVG arrow overlay as a fixed-position div that follows mousemove events, and re-inject it after every page navigation since the overlay is destroyed on navigate.

Selectors fail silently when field types are assumed rather than inspected, such as custom dropdowns instead of select elements. Run a discovery phase that dumps all visible inputs, buttons, and textareas, then rehearse each selector before recording.

Yes, inject a fixed-position subtitle bar div at the bottom of the viewport and update its text at major step transitions. Keep text under 60 characters and clear it during long pauses where the UI speaks for itself.

Playwright records at a fixed viewport without audio, and popups create separate video files that must be captured explicitly and merged later. The cursor is invisible without a custom overlay, and pacing must be scripted manually with waitForTimeout calls.