Agent skill
playwriter
Tool for controlling browser via Playwriter extension.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/playwriter
SKILL.md
Setup
- Install Playwriter extension
- Click extension icon on target tab (icon turns green)
Usage
bash
bun {base dir}/scripts/cmd.ts "<code>"
Examples
bash
# Get page URL
bun {base dir}/scripts/cmd.ts "console.log(page.url())"
# Click button
bun {base dir}/scripts/cmd.ts "await page.getByRole('button', { name: 'Submit' }).click()"
# Get page title
bun {base dir}/scripts/cmd.ts "await page.title()"
# Fill form
bun {base dir}/scripts/cmd.ts "await page.getByLabel('Email').fill('test@example.com')"
# Stop daemon
bun {base dir}/scripts/cmd.ts "daemon.stop()"
Context
Variables available in code:
page- Current Playwright pagecontext- Browser contextstate- Persistent object across callsdaemon- Daemon control object ({ stop: () => void })
Output
The script returns logs and the final result. If the result is an object, it's formatted as JSON.
bash
bun {base dir}/scripts/cmd.ts "console.log('fetching...'); return { title: await page.title() }"
Output:
[log] fetching...
{
"title": "Page Title"
}
Debugging
js
// Enable debugger
const cdp = await page.context().newCDPSession(page);
await cdp.send('Debugger.enable');
await cdp.send('Debugger.setPauseOnExceptions', { state: 'uncaught' });
// Set breakpoint
await cdp.send('Debugger.setBreakpointByUrl', { lineNumber: 42, urlRegex: '.*app\\.js$' });
Network
js
// Wait for API response
const res = await page.waitForResponse(r => r.url().includes('/api/data'));
console.log(await res.json());
// Monitor requests
page.on('request', r => console.log('REQ:', r.url()));
await page.reload();
page.removeAllListeners('request');
Didn't find tool you were looking for?