playwright-skill

Name: playwright-skill
Author: omnigentx

31stars13forks

How to install playwright-skill?

omnigentx/jarvis/playwright-skill

$npx -y skills add omnigentx/jarvis --skill playwright-skill

Installs into the current project.

Summary

Browser automation and E2E testing with Playwright (Node.js). Handles dev server detection, test script execution, responsive viewport testing, and form automation. Use when QE needs to test frontend UI, verify user flows, or take screenshots.

Files · 1

View on GitHub

SKILL.md

1	# Playwright Browser Automation
2
3	Write custom Playwright scripts, execute via universal executor. Scripts go to `/tmp` (works on macOS/Linux/Docker — all Jarvis target environments). Never write to skill or project directory.
4
5	## Setup (First Time Only)
6
7	```bash
8	cd $SKILL_DIR && npm run setup
9	```
10
11	## Critical Workflow
12
13	1. Detect dev servers (for localhost testing):
14	```bash
15	cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"
16	```
17	- 1 server → use it automatically
18	- Multiple → ask user which one
19	- None → ask for URL or help start server
20
21	2. Write script to /tmp — NEVER to skill directory or project:
22	```javascript
23	// /tmp/playwright-test-xxx.js
24	const { chromium } = require('playwright');
25	const TARGET_URL = 'http://localhost:3001'; // Auto-detected
26	(async () => {
27	const browser = await chromium.launch({ headless: false });
28	const page = await browser.newPage();
29	await page.goto(TARGET_URL);
30	console.log('Page loaded:', await page.title());
31	await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });
32	await browser.close();
33	})();
34	```
35
36	3. Execute from skill directory:
37	```bash
38	cd $SKILL_DIR && node run.js /tmp/playwright-test-xxx.js
39	```
40
41	## Defaults
42
43	\| Setting \| Default \| Override \|
44	\|---------\|---------\|----------\|
45	\| Browser \| Chromium \| `headless: false` by default \|
46	\| Viewport \| 1280×720 \| `page.setViewportSize(...)` \|
47	\| Scripts \| `/tmp/playwright-test-*.js` \| Never write to project dir \|
48	\| URLs \| Auto-detected via `detectDevServers()` \| `TARGET_URL` constant at top \|
49
50	## Anti-Patterns (from browser-automation best practices)
51
52	\| ❌ Don't \| ✅ Do \|
53	\|----------\|-------\|
54	\| `waitForTimeout(5000)` \| `waitForSelector('.element')` or `waitForURL(...)` \|
55	\| `page.locator('.btn-primary')` \| `page.getByRole('button', { name: 'Submit' })` \|
56	\| Single browser context for all tests \| Fresh context per test \|
57	\| CSS/XPath first \| User-facing locators: `text=`, `role=`, `data-testid=` \|
58
59	## Available Helpers (`lib/helpers.js`)
60
61	```javascript
62	const helpers = require('./lib/helpers');
63
64	await helpers.detectDevServers(); // Find running servers
65	await helpers.safeClick(page, 'button', { retries: 3 });
66	await helpers.safeType(page, '#input', 'text');
67	await helpers.takeScreenshot(page, 'name');
68	await helpers.handleCookieBanner(page);
69	await helpers.extractTableData(page, 'table');
70	const ctx = await helpers.createContext(browser); // With env headers
71	```
72
73	## Inline Execution (Quick Tasks)
74
75	```bash
76	cd $SKILL_DIR && node run.js "
77	const browser = await chromium.launch({ headless: false });
78	const page = await browser.newPage();
79	await page.goto('http://localhost:3001');
80	await page.screenshot({ path: '/tmp/quick.png', fullPage: true });
81	await browser.close();
82	"
83	```
84
85	Use inline for one-off tasks. Use files for complex/reusable tests.
86
87	## Custom HTTP Headers
88
89	```bash
90	PW_HEADER_NAME=X-Automated-By PW_HEADER_VALUE=playwright-skill \
91	cd $SKILL_DIR && node run.js /tmp/script.js
92	```
93
94	## Reference Files
95
96	- [API_REFERENCE.md](API_REFERENCE.md) — Full Playwright API: selectors, network interception, auth, visual testing, mobile emulation, POM pattern, CI/CD integration

People who liked this also viewed

6 picks

Type

playwright-skill

31stars13forks

View on GitHub

How to install playwright-skill?

omnigentx/jarvis/playwright-skill

$npx -y skills add omnigentx/jarvis --skill playwright-skill

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Playwright Browser Automation
2
3	Write custom Playwright scripts, execute via universal executor. Scripts go to `/tmp` (works on macOS/Linux/Docker — all Jarvis target environments). Never write to skill or project directory.
4
5	## Setup (First Time Only)
6
7	```bash
8	cd $SKILL_DIR && npm run setup
9	```
10
11	## Critical Workflow
12
13	1. Detect dev servers (for localhost testing):
14	```bash
15	cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"
16	```
17	- 1 server → use it automatically
18	- Multiple → ask user which one
19	- None → ask for URL or help start server
20
21	2. Write script to /tmp — NEVER to skill directory or project:
22	```javascript
23	// /tmp/playwright-test-xxx.js
24	const { chromium } = require('playwright');
25	const TARGET_URL = 'http://localhost:3001'; // Auto-detected
26	(async () => {
27	const browser = await chromium.launch({ headless: false });
28	const page = await browser.newPage();
29	await page.goto(TARGET_URL);
30	console.log('Page loaded:', await page.title());
31	await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });
32	await browser.close();
33	})();
34	```
35
36	3. Execute from skill directory:
37	```bash
38	cd $SKILL_DIR && node run.js /tmp/playwright-test-xxx.js
39	```
40
41	## Defaults
42
43	\| Setting \| Default \| Override \|
44	\|---------\|---------\|----------\|
45	\| Browser \| Chromium \| `headless: false` by default \|
46	\| Viewport \| 1280×720 \| `page.setViewportSize(...)` \|
47	\| Scripts \| `/tmp/playwright-test-*.js` \| Never write to project dir \|
48	\| URLs \| Auto-detected via `detectDevServers()` \| `TARGET_URL` constant at top \|
49
50	## Anti-Patterns (from browser-automation best practices)
51
52	\| ❌ Don't \| ✅ Do \|
53	\|----------\|-------\|
54	\| `waitForTimeout(5000)` \| `waitForSelector('.element')` or `waitForURL(...)` \|
55	\| `page.locator('.btn-primary')` \| `page.getByRole('button', { name: 'Submit' })` \|
56	\| Single browser context for all tests \| Fresh context per test \|
57	\| CSS/XPath first \| User-facing locators: `text=`, `role=`, `data-testid=` \|
58
59	## Available Helpers (`lib/helpers.js`)
60
61	```javascript
62	const helpers = require('./lib/helpers');
63
64	await helpers.detectDevServers(); // Find running servers
65	await helpers.safeClick(page, 'button', { retries: 3 });
66	await helpers.safeType(page, '#input', 'text');
67	await helpers.takeScreenshot(page, 'name');
68	await helpers.handleCookieBanner(page);
69	await helpers.extractTableData(page, 'table');
70	const ctx = await helpers.createContext(browser); // With env headers
71	```
72
73	## Inline Execution (Quick Tasks)
74
75	```bash
76	cd $SKILL_DIR && node run.js "
77	const browser = await chromium.launch({ headless: false });
78	const page = await browser.newPage();
79	await page.goto('http://localhost:3001');
80	await page.screenshot({ path: '/tmp/quick.png', fullPage: true });
81	await browser.close();
82	"
83	```
84
85	Use inline for one-off tasks. Use files for complex/reusable tests.
86
87	## Custom HTTP Headers
88
89	```bash
90	PW_HEADER_NAME=X-Automated-By PW_HEADER_VALUE=playwright-skill \
91	cd $SKILL_DIR && node run.js /tmp/script.js
92	```
93
94	## Reference Files
95
96	- [API_REFERENCE.md](API_REFERENCE.md) — Full Playwright API: selectors, network interception, auth, visual testing, mobile emulation, POM pattern, CI/CD integration

People who liked this also viewed

6 picks

Type