playwright-demo-videoslisted

# Playwright Demo Videos Playwright's `recordVideo` context option captures WebM video, but raw automation looks robotic: no visible cursor, instant fills, teleporting clicks. These helpers fix that. ## Recording Setup ```javascript const context = await browser.newContext({ recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } }, viewport: { width: 1280, height: 720 }, }); ``` Playwright writes the video to a random filename inside `dir`; copy it to a stable name after `context.close()`: ```javascript await context.close(); const video = page.video(); if (video) { fs.copyFileSync(await video.path(), path.join(VIDEO_DIR, 'demo-feature.webm')); } ``` Popup windows record to separate video files; capture popup pages explicitly and merge afterwards if needed. ## Cursor Overlay Headless recordings have no visible cursor. Inject an SVG arrow that follows `mousemove`: ```javascript async function injectCursor(page) { await page.evaluate(() => { if (document.getElementById('demo-cursor')) return; const cursor = document.createElement('div'); cursor.id = 'demo-cursor'; cursor.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 3L19 12L12 13L9 20L5 3Z" fill="white" stroke="black" stroke-width="1.5" stroke-linejoin="round"/> </svg>`; cursor.style.cssText = ` position: fixed; z-index: 999999; pointer-events: none; width: 24px; height: 24px; tr