pr-e/Playwright (Automation + MCP + Scraper)

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

1. Never use waitForTimeout() - always wait for specific conditions (element, URL, network)
2. Always close the browser - call browser.close() to prevent memory leaks
3. Prefer role selectors - getByRole() survives UI changes better than CSS
4. Handle dynamic content - use waitFor() before interacting with elements
5. Persist auth state - use storageState to 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('[email protected]');
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 strategies
• web - Web development fundamentals and HTTP handling

Feedback

• If useful: clawhub star playwright
• Stay updated: clawhub sync