OpenSkillIndex← back to search
openclawclaude-codeautomation

Openclaw-master-skills Playwright (Automation + MCP + Scraper)

Browser automation and web scraping with Playwright. Forms, screenshots, data extraction. Works standalone or via MCP. Testing included.

install
source · Clone the upstream repo
git clone https://github.com/LeoYeAI/openclaw-master-skills
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/LeoYeAI/openclaw-master-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/playwright" ~/.claude/skills/leoyeai-openclaw-master-skills-playwright-automation-mcp-scraper && rm -rf "$T"
OpenClaw · Install into ~/.openclaw/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/LeoYeAI/openclaw-master-skills "$T" && mkdir -p ~/.openclaw/skills && cp -r "$T/skills/playwright" ~/.openclaw/skills/leoyeai-openclaw-master-skills-playwright-automation-mcp-scraper && rm -rf "$T"
manifest: skills/playwright/SKILL.md
tags
#browser-automation#web-scraping#e2e-testing#form-filling#screenshot-take#data-extraction
safety · automated scan (low risk)
This is a pattern-based risk scan, not a security review. Our crawler flagged:
  • global npm install
Always read a skill's source content before installing. Patterns alone don't mean the skill is malicious — but they warrant attention.
source content

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

ScenarioMethodSpeed
Static HTML
web_fetch
tool		⚡ Fastest
JavaScript-renderedPlaywright direct🚀 Fast
AI agent automationMCP server🤖 Integrated
E2E testing@playwright/test✅ Full framework

Quick Reference

TaskFile
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('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

PriorityMethodExample
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

TrapFix
Element not foundAdd 
await locator.waitFor()
before interacting
Flaky clicksUse 
click({ force: true })
or wait for 
state: 'visible'
Timeout in CIIncrease timeout, check viewport size matches local
Auth lost between testsUse 
storageState
to persist cookies
SPA never reaches networkidleWait for specific DOM element instead
403 ForbiddenCheck if site blocks headless; try 
headless: false
Blank page after loadIncrease 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

ToolDescription
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