playwright-browser
Use when automating browsers, testing pages, or taking screenshots
When & Why to Use This Skill
The playwright-browser skill enables Claude to perform advanced browser automation and end-to-end testing using the Playwright framework. It provides a robust environment for interacting with web applications, allowing for automated UI checks, responsive design verification, and the execution of complex user flows across multiple browser engines like Chromium, Firefox, and WebKit.
Use Cases
- Automated UI & Regression Testing: Verify that web elements, layouts, and functionalities remain intact after code changes across different browser environments.
- User Flow Validation: Automate and test critical path sequences such as user registration, multi-factor authentication login flows, and e-commerce checkout processes.
- Visual Auditing and Screenshots: Programmatically capture high-resolution screenshots of web pages for visual documentation, UI reviews, or monitoring site changes.
- Responsive Design Testing: Check how websites behave and render across various viewports and device emulations to ensure mobile-friendliness.
- Dynamic Content Interaction: Navigate and extract data from modern, JavaScript-heavy web applications that require full browser rendering and user-like interactions.
| name | playwright-browser |
|---|---|
| description | "Use when automating browsers, testing pages, taking screenshots, checking UI, verifying login flows, or testing responsive behavior" |
| version | 1.1.0 |
| category | testing |
Browser automation via Playwright. Write scripts, execute via run.js.
Write Playwright code to /tmp, execute from skill directory:
node $SKILL_DIR/run.js /tmp/playwright-task.js
For inline code (variables are auto-injected, see below):
node $SKILL_DIR/run.js "const b = await chromium.launch(); const p = await b.newPage(); await p.goto('http://localhost:3000'); console.log(await p.title()); await b.close();"
$SKILL_DIR is where you loaded this file from.
Default: headless (invisible, less intrusive).Use { headless: false } when user wants to see the browser. You know when that is.
BASE_URL- from PLAYWRIGHT_BASE_URL env varCI_ARGS- browser args for CI (['--no-sandbox', '--disable-setuid-sandbox'])EXTRA_HEADERS- from PW_HEADER_NAME/VALUE or PW_EXTRA_HEADERSchromium,firefox,webkit,devices- from playwright
Example:
node $SKILL_DIR/run.js "
const browser = await chromium.launch({ args: CI_ARGS });
const page = await browser.newPage();
await page.goto(BASE_URL || 'http://localhost:3000');
console.log(await page.title());
await browser.close();
"