Agent skill
Playwright (Automation + MCP + Scraper)
Browser automation and web scraping with Playwright. Forms, screenshots, data extraction. Works standalone or via MCP. Testing included.
Install this agent skill to your Project
npx add-skill https://github.com/LeoYeAI/openclaw-master-skills/tree/main/skills/playwright
SKILL.md
When to Use
Use this skill when you need to:
- Scrape a website (static or JavaScript-rendered)
- Automate form filling (login, checkout, data entry)
- Test a web application (E2E tests, visual regression)
- Take screenshots or PDFs of web pages
- Extract data from tables, lists, or dynamic content
Decision Matrix
| Scenario | Method | Speed |
|---|---|---|
| Static HTML | web_fetch tool |
⚡ Fastest |
| JavaScript-rendered | Playwright direct | 🚀 Fast |
| AI agent automation | MCP server | 🤖 Integrated |
| E2E testing | @playwright/test | ✅ Full framework |
Quick Reference
| Task | File |
|---|---|
| E2E testing patterns | testing.md |
| CI/CD integration | ci-cd.md |
| Debugging failures | debugging.md |
| Web scraping patterns | scraping.md |
| Selector strategies | selectors.md |
Core Rules
- Never use
waitForTimeout()- always wait for specific conditions (element, URL, network) - Always close the browser - call
browser.close()to prevent memory leaks - Prefer role selectors -
getByRole()survives UI changes better than CSS - Handle dynamic content - use
waitFor()before interacting with elements - Persist auth state - use
storageStateto save and reuse login sessions
Quick Start - Common Tasks
Scrape a Page
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const text = await page.locator('body').textContent();
await browser.close();
Fill a Form and Submit
await page.goto('https://example.com/login');
await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Sign in' }).click();
await page.waitForURL('**/dashboard');
Take a Screenshot
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
Extract Table Data
const rows = await page.locator('table tr').all();
const data = [];
for (const row of rows) {
const cells = await row.locator('td').allTextContents();
data.push(cells);
}
Selector Priority
| Priority | Method | Example |
|---|---|---|
| 1 | getByRole() |
getByRole('button', { name: 'Submit' }) |
| 2 | getByLabel() |
getByLabel('Email') |
| 3 | getByPlaceholder() |
getByPlaceholder('Search...') |
| 4 | getByTestId() |
getByTestId('submit-btn') |
| 5 | locator() |
locator('.class') - last resort |
Common Traps
| Trap | Fix |
|---|---|
| Element not found | Add await locator.waitFor() before interacting |
| Flaky clicks | Use click({ force: true }) or wait for state: 'visible' |
| Timeout in CI | Increase timeout, check viewport size matches local |
| Auth lost between tests | Use storageState to persist cookies |
| SPA never reaches networkidle | Wait for specific DOM element instead |
| 403 Forbidden | Check if site blocks headless; try headless: false |
| Blank page after load | Increase wait time or use waitUntil: 'networkidle' |
Handling Sessions
// Save session after login
await page.context().storageState({ path: 'auth.json' });
// Reuse session in new context
const context = await browser.newContext({ storageState: 'auth.json' });
MCP Integration
For AI agents using Model Context Protocol:
npm install -g @playwright/mcp
npx @playwright/mcp --headless
MCP Tools Reference
| Tool | Description |
|---|---|
browser_navigate |
Navigate to URL |
browser_click |
Click element by selector |
browser_type |
Type text into input |
browser_select_option |
Select dropdown option |
browser_get_text |
Get text content |
browser_evaluate |
Execute JavaScript |
browser_snapshot |
Get accessible page snapshot |
browser_close |
Close browser context |
browser_choose_file |
Upload file |
browser_press |
Press keyboard key |
MCP Server Options
--headless # Run without UI
--browser chromium # chromium|firefox|webkit
--viewport-size 1920x1080
--timeout-action 10000 # Action timeout (ms)
--timeout-navigation 30000
--allowed-hosts example.com,api.example.com
--save-trace # Save trace for debugging
--save-video 1280x720 # Record video
Installation
npm init playwright@latest
# Or add to existing project
npm install -D @playwright/test
npx playwright install chromium
Related Skills
Install with clawhub install <slug> if user confirms:
puppeteer- Alternative browser automation (Chrome-focused)scrape- General web scraping patterns and strategiesweb- Web development fundamentals and HTTP handling
Feedback
- If useful:
clawhub star playwright - Stay updated:
clawhub sync
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
audit-website
Audit websites for SEO, performance, security, technical, content, and 15 other issue cateories with 230+ rules using the squirrelscan CLI. Returns LLM-optimized reports with health scores, broken links, meta tag analysis, and actionable recommendations. Use to discover and asses website or webapp issues and health.
firecrawl
Web search and scraping via Firecrawl API. Use when you need to search the web, scrape websites (including JS-heavy pages), crawl entire sites, or extract structured data from web pages. Requires FIRECRAWL_API_KEY environment variable.
computer-use
Full desktop computer use for headless Linux servers. Xvfb + XFCE virtual desktop with xdotool automation. 17 actions (click, type, scroll, screenshot, drag, etc). Unlike OpenClaw's browser tool, operates at the X11 level so websites cannot detect automation. Includes VNC for live viewing.
social-media-analyzer
Social media campaign analysis and performance tracking. Calculates engagement rates, ROI, and benchmarks across platforms. Use for analyzing social media performance, calculating engagement rate, measuring campaign ROI, comparing platform metrics, or benchmarking against industry standards.
business-growth-skills
4 production-ready business and growth skills: customer success manager with health scoring and churn prediction, sales engineer with RFP analysis, revenue operations with pipeline and GTM metrics, and contract & proposal writer. Python tools included (all stdlib-only). Works with Claude Code, Codex CLI, and OpenClaw.
contract-and-proposal-writer
Contract & Proposal Writer
Didn't find tool you were looking for?