Record browser interactions as video using Playwright. Use for capturing demo videos, app walkthroughs, and UI flows for Remotion videos. Triggers include recording a demo, capturing browser video, screen recording a website, or creating walkthrough footage.

Playwright Video Recording Playwright can record browser interactions as video perfect for demo footage in Remotion compositions. Quick Start Installation Basic Recording Script Run with: Recording Configuration Viewport Sizes Video Quality Settings Recording Patterns Form Submission Demo Multi Page Navigation Scroll Demo Login Flow Cursor Highlighting Playwright doesn't show cursor by default. Add visual indicators: CSS Cursor Highlight Click Ripple Effect Output for Remotion Move Recording to public/demos/ Convert WebM to MP4 Playwright outputs WebM. Convert for better Remotion compatibility: Interactive Recording For user driven recordings where you manually perform actions: Key insight: page.evaluate() throws during navigation. Use try/catch and continue don't treat errors as stop signals. Window Scaling for Laptops Record at full 1080p while showing a smaller window: Cookie Banner Dismissal Comprehensive selector list for common consent platforms: Call after page.goto() and on page.on('load') for navigation. Important: Injected Elements Appear in Video Warning: Any DOM elements you inject (cursors, control panels, overlays) will be recorded. For UI free recordings, use terminal based controls only (Ctrl+C, max duration timer). Tips for Good Demo Recordings 1. Use slowMo 50 100ms makes actions visible 2. Add waitForTimeout Pause between actions for comprehension 3. Wait for animations Use waitForLoadState('networkidle') 4. Match Remotion dimensions 1920x1080 at 30fps typical 5. Test without recording first Debug before final capture 6. Clear browser state Use fresh context for clean demos 7. Dismiss cookie banners Use comprehensive selector list above 8. Re inject on navigation Cursor/listeners reset on page load Feedback & Contributions If this skill is missing information or could be improved: Missing a pattern? Describe what you needed Found an error? Let me know what's wrong Want to contribute? I can help you: 1. Update this skill with improvements 2. Create a PR to github.com/digitalsamba/claude code video toolkit Just say "improve this skill" and I'll guide you through updating .claude/skills/playwright recording/SKILL.md .

playwright-recording