playwright-recording
playwright-recording lets you automatically capture browser sessions and user interactions as video files, perfect for building demo content and technical documentation. Works seamlessly with Claude Code to record complex workflows and generate visual artifacts from your automation scripts.
playwright-recording captures browser sessions by recording video during your Playwright automation scripts. Simply enable video recording in your Playwright configuration, run your test or automation flow, and playwright-recording will output the session as a video file. The skill works seamlessly with Claude Code to let you script complex browser interactions and automatically generate video artifacts from those interactions—ideal for creating demo content and technical documentation without manual screen recording.
AI-generated summary based on this skill's SKILL.md
Install
digitalsamba/claude-code-video-toolkit/playwright-recording · repository language: Python
git clone https://github.com/digitalsamba/claude-code-video-toolkit
cp -r claude-code-video-toolkit/.claude/skills/playwright-recording ~/.claude/skills/playwright-recordingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I record browser video with playwright-recording?
playwright-recording captures browser sessions by recording video during your Playwright automation scripts. Simply enable video recording in your Playwright configuration, run your test or automation flow, and playwright-recording will output the session as a video file. The skill works seamlessly with Claude Code to let you script complex browser interactions and automatically generate video artifacts from those interactions—ideal for creating demo content and technical documentation without manual screen recording.
What video formats does playwright-recording support for output?
playwright-recording supports multiple video output formats including WebM and MP4, allowing you to convert and optimize browser recordings for different platforms and use cases. You can configure the recording format based on your distribution needs, whether you're embedding videos in documentation, sharing on social media, or using them in Remotion compositions for multimedia projects.
Can playwright-recording automate video capture of web application UI walkthroughs?
Yes, playwright-recording is designed to automate video capture of web application UI walkthroughs and feature demonstrations. You can script user flows—such as form submissions, login sequences, and clickthrough tutorials—and playwright-recording will capture the entire interaction as video. This eliminates the need for manual screen recording and makes it easy to generate consistent, repeatable demo footage programmatically.
How do I configure viewport sizes and quality settings in playwright-recording?
playwright-recording allows you to configure viewport sizes, quality settings, and visual enhancements for professional demo recordings. You can customize resolution, frame rate, and other parameters in your Playwright configuration to match your documentation or demo requirements, ensuring your recorded videos meet professional standards for different platforms and audiences.
Can I use playwright-recording to generate video content for Remotion compositions?
Yes, playwright-recording can generate video content for Remotion compositions and multimedia projects. By automating browser recording and exporting in compatible formats, you can capture dynamic web content and integrate it into your Remotion-based video projects, enabling programmatic generation of complex multimedia assets from your web applications.
How does playwright-recording help with capturing browser interactions as video?
playwright-recording captures browser interactions by recording video output during Playwright automation, turning user flows and automated actions into viewable video files. Whether you're recording login flows, form submissions, or complex multi-step workflows, playwright-recording automatically generates video documentation of those interactions—perfect for building demo videos, tutorials, and technical walkthroughs without manual intervention.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```typescript // 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);
//
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.claude/skills/playwright-recording/SKILL.md
.claude/skills/playwright-recording/reference.md