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
Decision gist · record as of 2026-07-06
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.
Use it when
- playwright-recording supports multiple video output formats including WebM and MP4.
- Yes, playwright-recording is designed to automate video capture of web application UI walkthroughs and feature demonstrations.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
digitalsamba/claude-code-video-toolkit/playwright-recording · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
.claude/skills/playwright-recording/SKILL.md
.claude/skills/playwright-recording/reference.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Record browser interactions and user flows as video files for demo and documentation purposes”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill transforms manual browser navigation into automated Playwright test code by recording your interactions in real time. Watch as clicks, form inputs, and page transitions become production-ready test scripts without writing a single line of code. Perfect for teams building robust browser automation workflows.
ui-demo lets you create polished demonstration videos of web applications by recording user interactions with a visible cursor and natural pacing. Ideal for building compelling product walkthroughs, tutorial content, and UI showcases that feel authentic and engaging to viewers.
Turn any webpage into a static image file with this screenshot tool. Perfect for documenting web content, creating visual records, or sharing page layouts without needing browser extensions. Works seamlessly with Claude Code to automate capture workflows.
claude-real-video bridges Claude's text-only interface with video content by automatically extracting scene-aware keyframes and speech-to-text transcripts. Pass a video URL or file path, and the skill generates contact sheets and a transcript that Claude can then read to answer your questions, summarize the content, or perform detailed analysis. Local processing keeps your source video private.
Promo Video empowers you to produce polished marketing content without the complexity of traditional video editing. Designed for creators who need fast turnaround on promotional material, this skill automates the heavy lifting so you can focus on your message and audience impact.
Playwright enables you to script and automate browser-based workflows with precision. Use it to build reliable end-to-end tests, validate web applications, and handle complex user interactions across Chromium, Firefox, and WebKit engines.
More skills Browser Automation Framework (unlicensed) · playwright-skill (MIT) · Playwright Skill (NOASSERTION) · Playwright (MIT) · playwright (MIT)