SKILL.md

Playwright Video Recording

Playwright can record browser interactions as video - perfect for demo footage in Remotion compositions.

Quick Start

Installation

# In your video project

npm init -y

npm install -D playwright @playwright/test

npx playwright install chromium

Basic Recording Script

// scripts/record-demo.ts

import { chromium } from 'playwright';

async function recordDemo() {

  const browser = await chromium.launch();

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: {

      dir: './recordings',

      size: { width: 1920, height: 1080 }

    }

  });

  const page = await context.newPage();

  // Your recording actions

  await page.goto('https://example.com');

  await page.waitForTimeout(2000);

  await page.click('button.demo');

  await page.waitForTimeout(3000);

  // Close to save video

  await context.close();

  await browser.close();

  console.log('Recording saved to ./recordings/');

}

recordDemo();

Run with:

npx ts-node scripts/record-demo.ts

# or

npx tsx scripts/record-demo.ts

Recording Configuration

Viewport Sizes

// Standard 1080p (recommended for Remotion)

viewport: { width: 1920, height: 1080 }

// 720p (smaller files)

viewport: { width: 1280, height: 720 }

// Square (social media)

viewport: { width: 1080, height: 1080 }

// Mobile

viewport: { width: 390, height: 844 } // iPhone 14

Video Quality Settings

const context = await browser.newContext({

  viewport: { width: 1920, height: 1080 },

  recordVideo: {

    dir: './recordings',

    size: { width: 1920, height: 1080 } // Match viewport for crisp output

  },

  // Slow down for visibility

  // Note: slowMo is on browser launch, not context

});

// For slow motion, launch browser with slowMo

const browser = await chromium.launch({

  slowMo: 100 // 100ms delay between actions

});

Recording Patterns

Form Submission Demo

import { chromium } from 'playwright';

async function recordFormDemo() {

  const browser = await chromium.launch({ slowMo: 50 });

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }

  });

  const page = await context.newPage();

  await page.goto('https://myapp.com/form');

  await page.waitForTimeout(1000);

  // Type with realistic speed

  await page.fill('#name', 'John Smith', { timeout: 5000 });

  await page.waitForTimeout(500);

  await page.fill('#email', 'john@example.com');

  await page.waitForTimeout(500);

  // Click submit

  await page.click('button[type="submit"]');

  // Wait for result

  await page.waitForSelector('.success-message');

  await page.waitForTimeout(2000);

  await context.close();

  await browser.close();

}

Multi-Page Navigation

async function recordNavDemo() {

  const browser = await chromium.launch({ slowMo: 100 });

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }

  });

  const page = await context.newPage();

  // Page 1

  await page.goto('https://myapp.com');

  await page.waitForTimeout(2000);

  // Navigate to page 2

  await page.click('nav a[href="/features"]');

  await page.waitForLoadState('networkidle');

  await page.waitForTimeout(2000);

  // Navigate to page 3

  await page.click('nav a[href="/pricing"]');

  await page.waitForLoadState('networkidle');

  await page.waitForTimeout(2000);

  await context.close();

  await browser.close();

}

Scroll Demo

async function recordScrollDemo() {

  const browser = await chromium.launch();

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }

  });

  const page = await context.newPage();

  await page.goto('https://myapp.com/long-page');

  await page.waitForTimeout(1000);

  // Smooth scroll

  await page.evaluate(async () => {

    const delay = (ms: number) => new Promise(r => setTimeout(r, ms));

    for (let i = 0; i < 10; i++) {

      window.scrollBy({ top: 200, behavior: 'smooth' });

      await delay(300);

    }

  });

  await page.waitForTimeout(1000);

  await context.close();

  await browser.close();

}

Login Flow

async function recordLoginDemo() {

  const browser = await chromium.launch({ slowMo: 75 });

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }

  });

  const page = await context.newPage();

  await page.goto('https://myapp.com/login');

  await page.waitForTimeout(1000);

  await page.fill('#email', 'demo@example.com');

  await page.waitForTimeout(300);

  await page.fill('#password', '••••••••');

  await page.waitForTimeout(500);

  await page.click('button[type="submit"]');

  // Wait for dashboard

  await page.waitForURL('**/dashboard');

  await page.waitForTimeout(3000);

  await context.close();

  await browser.close();

}

Cursor Highlighting

Playwright doesn't show cursor by default. Add visual indicators:

CSS Cursor Highlight

// Inject cursor visualization

await page.addStyleTag({

  content: `

    * { cursor: none !important; }

    .playwright-cursor {

      position: fixed;

      width: 24px;

      height: 24px;

      background: rgba(255, 100, 100, 0.5);

      border: 2px solid rgba(255, 50, 50, 0.8);

      border-radius: 50%;

      pointer-events: none;

      z-index: 999999;

      transform: translate(-50%, -50%);

      transition: transform 0.1s ease;

    }

    .playwright-cursor.clicking {

      transform: translate(-50%, -50%) scale(0.8);

      background: rgba(255, 50, 50, 0.8);

    }

  `

});

// Add cursor element

await page.evaluate(() => {

  const cursor = document.createElement('div');

  cursor.className = 'playwright-cursor';

  document.body.appendChild(cursor);

  document.addEventListener('mousemove', (e) => {

    cursor.style.left = e.clientX + 'px';

    cursor.style.top = e.clientY + 'px';

  });

  document.addEventListener('mousedown', () => cursor.classList.add('clicking'));

  document.addEventListener('mouseup', () => cursor.classList.remove('clicking'));

});

Click Ripple Effect

// Add click ripple visualization

await page.addStyleTag({

  content: `

    .click-ripple {

      position: fixed;

      width: 40px;

      height: 40px;

      border-radius: 50%;

      background: rgba(234, 88, 12, 0.4);

      pointer-events: none;

      z-index: 999998;

      transform: translate(-50%, -50%) scale(0);

      animation: ripple 0.4s ease-out forwards;

    }

    @keyframes ripple {

      to {

        transform: translate(-50%, -50%) scale(2);

        opacity: 0;

      }

    }

  `

});

// Custom click function with ripple

async function clickWithRipple(page, selector) {

  const element = await page.locator(selector);

  const box = await element.boundingBox();

  await page.evaluate(({ x, y }) => {

    const ripple = document.createElement('div');

    ripple.className = 'click-ripple';

    ripple.style.left = x + 'px';

    ripple.style.top = y + 'px';

    document.body.appendChild(ripple);

    setTimeout(() => ripple.remove(), 400);

  }, { x: box.x + box.width / 2, y: box.y + box.height / 2 });

  await element.click();

}

Output for Remotion

Move Recording to public/demos/

import { chromium } from 'playwright';

import * as fs from 'fs';

import * as path from 'path';

async function recordForRemotion(outputName: string) {

  const browser = await chromium.launch({ slowMo: 50 });

  const context = await browser.newContext({

    viewport: { width: 1920, height: 1080 },

    recordVideo: { dir: './temp-recordings', size: { width: 1920, height: 1080 } }

  });

  const page = await context.newPage();

  // ... recording actions ...

  await context.close();

  // Get the video path

  const video = page.video();

  const videoPath = await video?.path();

  if (videoPath) {

    const destPath = `./public/demos/${outputName}.webm`;

    fs.mkdirSync(path.dirname(destPath), { recursive: true });

    fs.renameSync(videoPath, destPath);

    console.log(`Recording saved to: ${destPath}`);

    // Get duration for config

    // Use ffprobe: ffprobe -v error -show_entries format=duration -of csv=p=0 file.webm

  }

  await browser.close();

}

Convert WebM to MP4

Playwright outputs WebM. Convert for better Remotion compatibility:

ffmpeg -i recording.webm -c:v libx264 -crf 20 -preset medium -movflags faststart public/demos/demo.mp4

Interactive Recording

For user-driven recordings where you manually perform actions:

// Inject ESC key listener to stop recording

async function injectStopListener(page: Page): Promise<void> {

  await page.evaluate(() => {

    if ((window as any).__escListenerAdded) return;

    (window as any).__escListenerAdded = true;

    (window as any).__stopRecording = false;

    document.addEventListener('keydown', (e) => {

      if (e.key === 'Escape') {

        e.preventDefault();

        (window as any).__stopRecording = true;

      }

    });

  });

}

// Poll for stop signal - handle navigation errors gracefully

while (!stopped) {

  try {

    const shouldStop = await page.evaluate(() => (window as any).__stopRecording === true);

    if (shouldStop) break;

  } catch {

    // Page navigating - continue recording

  }

  await new Promise(r => setTimeout(r, 200));

}

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:

const scale = 0.75; // 75% window size

const context = await browser.newContext({

  viewport: { width: 1920 * scale, height: 1080 * scale },

  deviceScaleFactor: 1 / scale,

  recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } },

});

Cookie Banner Dismissal

Comprehensive selector list for common consent platforms:

const COOKIE_SELECTORS = [

  '#onetrust-accept-btn-handler',           // OneTrust

  '#CybotCookiebotDialogBodyButtonAccept',  // Cookiebot

  '.cc-btn.cc-dismiss',                      // Cookie Consent by Insites

  '[class*="cookie"] button[class*="accept"]',

  '[class*="consent"] button[class*="accept"]',

  'button:has-text("Accept all")',

  'button:has-text("Accept cookies")',

  'button:has-text("Got it")',

];

async function dismissCookieBanners(page: Page): Promise<void> {

  await page.waitForTimeout(500);

  for (const selector of COOKIE_SELECTORS) {

    try {

      const btn = page.locator(selector).first();

      if (await btn.isVisible({ timeout: 100 })) {

        await btn.click({ timeout: 500 });

        return;

      }

    } catch { /* try next */ }

  }

}

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

Use slowMo - 50-100ms makes actions visible

Add waitForTimeout - Pause between actions for comprehension

Wait for animations - Use waitForLoadState('networkidle')

Match Remotion dimensions - 1920x1080 at 30fps typical

Test without recording first - Debug before final capture

Clear browser state - Use fresh context for clean demos

Dismiss cookie banners - Use comprehensive selector list above

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:

Update this skill with improvements

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