playwright-recording

Capture browser interactions as video with Playwright.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill playwright-recording-gyalamanch001a
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: playwright-recording
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/playwright-recording
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill playwright-recording-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the friction of capturing clean, repeatable browser demos, walkthroughs, and UI flow footage for product showcases, training materials, and video editing workflows.

Core Features & Use Cases

  • Browser video recording: Capture interactions in a Playwright-controlled browser with consistent viewport sizing and quality settings.
  • Demo flow scripting: Record realistic navigation, form submissions, scrolling, and multi-page walkthroughs for polished presentations.
  • Remotion-ready output: Save recordings for reuse in video production pipelines, including conversion-friendly demo assets.
  • Use case: Record an onboarding journey or feature tour once, then reuse the footage across documentation, sales demos, or internal training videos.

Quick Start

Use the playwright-recording skill to capture a 1920x1080 browser walkthrough of the target site and save the finished video for later editing.

Frequently Asked Questions about playwright-recording

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

FAQPage Schema
How do I record a browser walkthrough video using Playwright?

Playwright video capture records browser interactions by configuring a browser context with specific video settings, viewport sizing, and timing delays to ensure clean, repeatable demo footage of multi-page UI flows.

What is the best way to capture UI automation flows for demo videos?

The best way to capture UI automation flows is by scripting realistic navigation, scrolling, and form submissions in a controlled browser context with viewport sizing and timing delays to generate presentation-ready website walkthroughs.

Does Playwright video output work with Remotion video production pipelines?

Playwright video output works with Remotion by saving browser recordings as conversion-friendly demo assets that can be imported and reused within Remotion-oriented video production and editing workflows.

Can I control viewport sizing and timing delays during browser video recording?

You can control viewport sizing and timing delays during browser video recording by configuring the Playwright browser context settings, ensuring consistent video quality for multi-page UI flow capture and product showcases.

When do I need to use stop-listeners or post-processing handling for browser recordings?

Stop-listeners or post-processing handling for browser recordings are needed when you require custom termination logic or specific formatting adjustments after capturing multi-page UI flows to ensure the final demo video meets editing requirements.

Why use Playwright for website walkthroughs instead of manual screen recording?

Using Playwright for website walkthroughs removes the friction of manual screen recording by capturing clean, repeatable browser demos through scripted interactions, ensuring consistent viewport sizing and quality across multiple takes for training materials.