zhaog100 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
📄 许可证与版权声明
MIT License
Copyright (c) 2026 思捷娅科技 (SJYKJ)
免费使用、修改和重新分发时，需注明出处。
出处：
- GitHub: https://github.com/example-user/openclaw-skills
- ClawHub: https://clawhub.com
- 创建者：小米粒 (miliger)
商业使用授权：
- 小微企业（<10 人）：¥999/年
- 中型企业（10-50 人）：¥4,999/年
- 大型企业（>50 人）：¥19,999/年
- 企业定制版：¥99,999 一次性（源码买断）