playwright-recording

Name: playwright-recording
Author: calesthio

41kstars4.9kforks

How to install playwright-recording?

calesthio/openmontage/playwright-recording

$npx -y skills add calesthio/OpenMontage --skill playwright-recording

Installs into the current project.

Summary

Record browser interactions as video using Playwright. Use for capturing demo videos, app walkthroughs, and UI flows for Remotion videos. Triggers include recording a demo, capturing browser video, screen recording a website, or creating walkthrough footage.

Files · 1

View on GitHub

SKILL.md

1	# Playwright Video Recording
2
3	Playwright can record browser interactions as video - perfect for demo footage in Remotion compositions.
4
5	## Quick Start
6
7	### Installation
8
9	```bash
10	# In your video project
11	npm init -y
12	npm install -D playwright @playwright/test
13	npx playwright install chromium
14	```
15
16	### Basic Recording Script
17
18	```typescript
19	// scripts/record-demo.ts
20	import { chromium } from 'playwright';
21
22	async function recordDemo() {
23	const browser = await chromium.launch();
24	const context = await browser.newContext({
25	viewport: { width: 1920, height: 1080 },
26	recordVideo: {
27	dir: './recordings',
28	size: { width: 1920, height: 1080 }
29	}
30	});
31
32	const page = await context.newPage();
33
34	// Your recording actions
35	await page.goto('https://example.com');
36	await page.waitForTimeout(2000);
37	await page.click('button.demo');
38	await page.waitForTimeout(3000);
39
40	// Close to save video
41	await context.close();
42	await browser.close();
43
44	console.log('Recording saved to ./recordings/');
45	}
46
47	recordDemo();
48	```
49
50	Run with:
51	```bash
52	npx ts-node scripts/record-demo.ts
53	# or
54	npx tsx scripts/record-demo.ts
55	```
56
57	## Recording Configuration
58
59	### Viewport Sizes
60
61	```typescript
62	// Standard 1080p (recommended for Remotion)
63	viewport: { width: 1920, height: 1080 }
64
65	// 720p (smaller files)
66	viewport: { width: 1280, height: 720 }
67
68	// Square (social media)
69	viewport: { width: 1080, height: 1080 }
70
71	// Mobile
72	viewport: { width: 390, height: 844 } // iPhone 14
73	```
74
75	### Video Quality Settings
76
77	```typescript
78	const context = await browser.newContext({
79	viewport: { width: 1920, height: 1080 },
80	recordVideo: {
81	dir: './recordings',
82	size: { width: 1920, height: 1080 } // Match viewport for crisp output
83	},
84	// Slow down for visibility
85	// Note: slowMo is on browser launch, not context
86	});
87
88	// For slow motion, launch browser with slowMo
89	const browser = await chromium.launch({
90	slowMo: 100 // 100ms delay between actions
91	});
92	```
93
94	## Recording Patterns
95
96	### Form Submission Demo
97
98	```typescript
99	import { chromium } from 'playwright';
100
101	async function recordFormDemo() {
102	const browser = await chromium.launch({ slowMo: 50 });
103	const context = await browser.newContext({
104	viewport: { width: 1920, height: 1080 },
105	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
106	});
107	const page = await context.newPage();
108
109	await page.goto('https://myapp.com/form');
110	await page.waitForTimeout(1000);
111
112	// Type with realistic speed
113	await page.fill('#name', 'John Smith', { timeout: 5000 });
114	await page.waitForTimeout(500);
115
116	await page.fill('#email', 'john@example.com');
117	await page.waitForTimeout(500);
118
119	// Click submit
120	await page.click('button[type="submit"]');
121
122	// Wait for result
123	await page.waitForSelector('.success-message');
124	await page.waitForTimeout(2000);
125
126	await context.close();
127	await browser.close();
128	}
129	```
130
131	### Multi-Page Navigation
132
133	```typescript
134	async function recordNavDemo() {
135	const browser = await chromium.launch({ slowMo: 100 });
136	const context = await browser.newContext({
137	viewport: { width: 1920, height: 1080 },
138	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
139	});
140	const page = await context.newPage();
141
142	// Page 1
143	await page.goto('https://myapp.com');
144	await page.waitForTimeout(2000);
145
146	// Navigate to page 2
147	await page.click('nav a[href="/features"]');
148	await page.waitForLoadState('networkidle');
149	await page.waitForTimeout(2000);
150
151	// Navigate to page 3
152	await page.click('nav a[href="/pricing"]');
153	await page.waitForLoadState('networkidle');
154	await page.waitForTimeout(2000);
155
156	await context.close();
157	await browser.close();
158	}
159	```
160
161	### Scroll Demo
162
163	```typescript
164	async function recordScrollDemo() {
165	const browser = await chromium.launch();
166	const context = await browser.newContext({
167	viewport: { width: 1920, height: 1080 },
168	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
169	});
170	const page = await context.newPage();
171
172	await page.goto('https://myapp.com/long-page');
173	await page.waitForTimeout(1000);
174
175	// Smooth scroll
176	await page.evaluate(async () => {
177	const delay = (ms: number) => new Promise(r => setTimeout(r, ms));
178	for (let i = 0; i < 10; i++) {
179	window.scrollBy({ top: 200, behavior: 'smooth' });
180	await delay(300);
181	}
182	});
183
184	await page.waitForTimeout(1000);
185	await context.close();
186	await browser.close();
187	}
188	```
189
190	### Login Flow
191
192	```typescript
193	async function recordLoginDemo() {
194	const browser = await chromium.launch({ slowMo: 75 });
195	const context = await browser.newContext({
196	viewport: { width: 1920, height: 1080 },
197	recordVideo: { dir: './recordings', size: {

People who liked this also viewed

6 picks

Type

playwright-recording

41kstars4.9kforks

View on GitHub

How to install playwright-recording?

calesthio/openmontage/playwright-recording

$npx -y skills add calesthio/OpenMontage --skill playwright-recording

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Playwright Video Recording
2
3	Playwright can record browser interactions as video - perfect for demo footage in Remotion compositions.
4
5	## Quick Start
6
7	### Installation
8
9	```bash
10	# In your video project
11	npm init -y
12	npm install -D playwright @playwright/test
13	npx playwright install chromium
14	```
15
16	### Basic Recording Script
17
18	```typescript
19	// scripts/record-demo.ts
20	import { chromium } from 'playwright';
21
22	async function recordDemo() {
23	const browser = await chromium.launch();
24	const context = await browser.newContext({
25	viewport: { width: 1920, height: 1080 },
26	recordVideo: {
27	dir: './recordings',
28	size: { width: 1920, height: 1080 }
29	}
30	});
31
32	const page = await context.newPage();
33
34	// Your recording actions
35	await page.goto('https://example.com');
36	await page.waitForTimeout(2000);
37	await page.click('button.demo');
38	await page.waitForTimeout(3000);
39
40	// Close to save video
41	await context.close();
42	await browser.close();
43
44	console.log('Recording saved to ./recordings/');
45	}
46
47	recordDemo();
48	```
49
50	Run with:
51	```bash
52	npx ts-node scripts/record-demo.ts
53	# or
54	npx tsx scripts/record-demo.ts
55	```
56
57	## Recording Configuration
58
59	### Viewport Sizes
60
61	```typescript
62	// Standard 1080p (recommended for Remotion)
63	viewport: { width: 1920, height: 1080 }
64
65	// 720p (smaller files)
66	viewport: { width: 1280, height: 720 }
67
68	// Square (social media)
69	viewport: { width: 1080, height: 1080 }
70
71	// Mobile
72	viewport: { width: 390, height: 844 } // iPhone 14
73	```
74
75	### Video Quality Settings
76
77	```typescript
78	const context = await browser.newContext({
79	viewport: { width: 1920, height: 1080 },
80	recordVideo: {
81	dir: './recordings',
82	size: { width: 1920, height: 1080 } // Match viewport for crisp output
83	},
84	// Slow down for visibility
85	// Note: slowMo is on browser launch, not context
86	});
87
88	// For slow motion, launch browser with slowMo
89	const browser = await chromium.launch({
90	slowMo: 100 // 100ms delay between actions
91	});
92	```
93
94	## Recording Patterns
95
96	### Form Submission Demo
97
98	```typescript
99	import { chromium } from 'playwright';
100
101	async function recordFormDemo() {
102	const browser = await chromium.launch({ slowMo: 50 });
103	const context = await browser.newContext({
104	viewport: { width: 1920, height: 1080 },
105	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
106	});
107	const page = await context.newPage();
108
109	await page.goto('https://myapp.com/form');
110	await page.waitForTimeout(1000);
111
112	// Type with realistic speed
113	await page.fill('#name', 'John Smith', { timeout: 5000 });
114	await page.waitForTimeout(500);
115
116	await page.fill('#email', 'john@example.com');
117	await page.waitForTimeout(500);
118
119	// Click submit
120	await page.click('button[type="submit"]');
121
122	// Wait for result
123	await page.waitForSelector('.success-message');
124	await page.waitForTimeout(2000);
125
126	await context.close();
127	await browser.close();
128	}
129	```
130
131	### Multi-Page Navigation
132
133	```typescript
134	async function recordNavDemo() {
135	const browser = await chromium.launch({ slowMo: 100 });
136	const context = await browser.newContext({
137	viewport: { width: 1920, height: 1080 },
138	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
139	});
140	const page = await context.newPage();
141
142	// Page 1
143	await page.goto('https://myapp.com');
144	await page.waitForTimeout(2000);
145
146	// Navigate to page 2
147	await page.click('nav a[href="/features"]');
148	await page.waitForLoadState('networkidle');
149	await page.waitForTimeout(2000);
150
151	// Navigate to page 3
152	await page.click('nav a[href="/pricing"]');
153	await page.waitForLoadState('networkidle');
154	await page.waitForTimeout(2000);
155
156	await context.close();
157	await browser.close();
158	}
159	```
160
161	### Scroll Demo
162
163	```typescript
164	async function recordScrollDemo() {
165	const browser = await chromium.launch();
166	const context = await browser.newContext({
167	viewport: { width: 1920, height: 1080 },
168	recordVideo: { dir: './recordings', size: { width: 1920, height: 1080 } }
169	});
170	const page = await context.newPage();
171
172	await page.goto('https://myapp.com/long-page');
173	await page.waitForTimeout(1000);
174
175	// Smooth scroll
176	await page.evaluate(async () => {
177	const delay = (ms: number) => new Promise(r => setTimeout(r, ms));
178	for (let i = 0; i < 10; i++) {
179	window.scrollBy({ top: 200, behavior: 'smooth' });
180	await delay(300);
181	}
182	});
183
184	await page.waitForTimeout(1000);
185	await context.close();
186	await browser.close();
187	}
188	```
189
190	### Login Flow
191
192	```typescript
193	async function recordLoginDemo() {
194	const browser = await chromium.launch({ slowMo: 75 });
195	const context = await browser.newContext({
196	viewport: { width: 1920, height: 1080 },
197	recordVideo: { dir: './recordings', size: {

People who liked this also viewed

6 picks

Type