playwright-recording

Record browser interactions into video files using Playwright and FFmpeg.

21|9|Updated Jun 22, 2026
One-click install
npx skills add https://github.com/47thtechcorner/RayCodes_OpenMontage --skill playwright-recording-47thtechcorner
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/47thtechcorner/RayCodes_OpenMontage/tree/main/openmontage_engine/.agents/skills/playwright-recording
Command: npx skills add https://github.com/47thtechcorner/RayCodes_OpenMontage --skill playwright-recording-47thtechcorner

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, @playwright/test, ts-node, tsx, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill solves the challenge of creating high-quality, consistent, and reproducible video walkthroughs of web applications without manual screen recording.

Core Features & Use Cases

  • Automated Video Capture: Programmatically record browser sessions, including navigation, form submissions, and scrolling.
  • Visual Enhancements: Inject custom CSS for cursor highlighting, click ripples, and cookie banner dismissal to ensure professional-looking output.
  • Use Case: Developers can use this to automatically generate updated product demo videos for every release, ensuring documentation always matches the current UI state.

Quick Start

Use the playwright-recording skill to capture a video walkthrough of the login flow on the target website.

Frequently Asked Questions about playwright-recording

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate video recording of browser interactions for UI walkthroughs?

You can automate video recording of browser interactions by using Playwright to programmatically capture navigation, form submissions, and scrolling into reproducible video files without manual screen recording.

Do I need FFmpeg to convert Playwright recordings into production-ready video formats?

Yes, you need FFmpeg to process and convert the recorded webm files generated by Playwright into production-ready video formats suitable for software demos and automated testing visual logs.

Can I inject custom CSS for cursor highlighting and cookie banner dismissal during browser recording?

Yes, you can inject custom CSS during browser recording to apply visual enhancements like cursor highlighting, click ripples, and cookie banner dismissal to ensure a professional-looking output.

What's the best way to generate updated product demo videos for every web application release?

The best way to generate updated product demo videos for every release is to automate browser session capture with Playwright, ensuring your documentation always matches the current UI state automatically.

Does Playwright recording require Node.js and specific testing dependencies to function?

Yes, Playwright recording requires Node.js along with specific dependencies including Playwright, @playwright/test, ts-node, and tsx to execute the automated browser interaction capture scripts.