commit 633d3b3fa44c6182f3e3fbedc8283e59c86dd488 Author: zlei9 Date: Sun Mar 29 13:23:26 2026 +0800 Initial commit with translated description diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..f76be5c --- /dev/null +++ b/SKILL.md @@ -0,0 +1,165 @@ +--- +name: playwright-mcp +description: "通过Playwright MCP服务器进行浏览器自动化。" +metadata: {"openclaw":{"emoji":"🎭","os":["linux","darwin","win32"],"requires":{"bins":["playwright-mcp","npx"]},"install":[{"id":"npm-playwright-mcp","kind":"npm","package":"@playwright/mcp","bins":["playwright-mcp"],"label":"Install Playwright MCP"}]}} +--- + +# Playwright MCP Skill + +Browser automation powered by Playwright MCP server. Control Chrome, Firefox, or WebKit programmatically. + +## Installation + +```bash +npm install -g @playwright/mcp +# Or +npx @playwright/mcp +``` + +Install browsers (first time): +```bash +npx playwright install chromium +``` + +## Quick Start + +### Start MCP Server (STDIO mode) +```bash +npx @playwright/mcp +``` + +### Start with Options +```bash +# Headless mode +npx @playwright/mcp --headless + +# Specific browser +npx @playwright/mcp --browser firefox + +# With viewport +npx @playwright/mcp --viewport-size 1280x720 + +# Ignore HTTPS errors +npx @playwright/mcp --ignore-https-errors +``` + +## Common Use Cases + +### 1. Navigate and Extract Data +```python +# MCP tools available: +# - browser_navigate: Open URL +# - browser_click: Click element +# - browser_type: Type text +# - browser_select_option: Select dropdown +# - browser_get_text: Extract text content +# - browser_evaluate: Run JavaScript +# - browser_snapshot: Get page structure +# - browser_close: Close browser +``` + +### 2. Form Interaction +``` +1. browser_navigate to form URL +2. browser_type into input fields +3. browser_click to submit +4. browser_get_text to verify result +``` + +### 3. Data Extraction +``` +1. browser_navigate to page +2. browser_evaluate to run extraction script +3. Parse returned JSON data +``` + +## 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 | + +## Configuration Options + +```bash +# Security +--allowed-hosts example.com,api.example.com +--blocked-origins malicious.com +--ignore-https-errors + +# Browser settings +--browser chromium|firefox|webkit +--headless +--viewport-size 1920x1080 +--user-agent "Custom Agent" + +# Timeouts +--timeout-action 10000 # Action timeout (ms) +--timeout-navigation 30000 # Navigation timeout (ms) + +# Output +--output-dir ./playwright-output +--save-trace +--save-video 1280x720 +``` + +## Examples + +### Login to Website +``` +browser_navigate: { url: "https://example.com/login" } +browser_type: { selector: "#username", text: "user" } +browser_type: { selector: "#password", text: "pass" } +browser_click: { selector: "#submit" } +browser_get_text: { selector: ".welcome-message" } +``` + +### Extract Table Data +``` +browser_navigate: { url: "https://example.com/data" } +browser_evaluate: { + script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" +} +``` + +### Screenshot +``` +browser_navigate: { url: "https://example.com" } +browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" } +# Screenshot saved via --output-dir or returned in response +``` + +## Security Notes + +- By default restricts file system access to workspace root +- Host validation prevents navigation to untrusted domains +- Sandboxing enabled by default (use `--no-sandbox` with caution) +- Service workers blocked by default + +## Troubleshooting + +```bash +# Update browsers +npx playwright install chromium + +# Debug mode +npx @playwright/mcp --headless=false --output-mode=stdout + +# Check installation +playwright-mcp --version +``` + +## Links + +- [Playwright Docs](https://playwright.dev) +- [MCP Protocol](https://modelcontextprotocol.io) +- [NPM Package](https://www.npmjs.com/package/@playwright/mcp) diff --git a/_meta.json b/_meta.json new file mode 100644 index 0000000..f69d8cb --- /dev/null +++ b/_meta.json @@ -0,0 +1,6 @@ +{ + "ownerId": "kn73rfyfbb2nt729a6f911fx2980czrm", + "slug": "playwright-mcp", + "version": "1.0.0", + "publishedAt": 1770565004575 +} \ No newline at end of file diff --git a/examples.py b/examples.py new file mode 100644 index 0000000..33638b2 --- /dev/null +++ b/examples.py @@ -0,0 +1,114 @@ +#!/usr/bin/env python3 +"""Example script for using Playwright MCP server with OpenClaw. + +This script demonstrates how to programmatically interact with +the Playwright MCP server for browser automation. +""" + +import subprocess +import json +import sys + + +def run_mcp_command(tool_name: str, params: dict) -> dict: + """Run a single MCP tool command via playwright-mcp. + + Note: In real usage with OpenClaw, the MCP server runs continuously + and tools are called via the MCP protocol. This script shows the + conceptual flow. + """ + # Build MCP request + request = { + "jsonrpc": "2.0", + "method": "tools/call", + "params": { + "name": tool_name, + "arguments": params + }, + "id": 1 + } + + # In real implementation, this would be sent to running MCP server + # For now, we just print what would happen + print(f"MCP Call: {tool_name}") + print(f"Params: {json.dumps(params, indent=2)}") + return {"status": "example", "tool": tool_name} + + +def example_navigate_and_click(): + """Example: Navigate to a page and click a button.""" + print("=== Example: Navigate and Click ===\n") + + # Step 1: Navigate + run_mcp_command("browser_navigate", { + "url": "https://example.com", + "waitUntil": "networkidle" + }) + + # Step 2: Click element + run_mcp_command("browser_click", { + "selector": "button#submit", + "timeout": 5000 + }) + + # Step 3: Get text to verify + run_mcp_command("browser_get_text", { + "selector": ".result-message" + }) + + +def example_fill_form(): + """Example: Fill and submit a form.""" + print("\n=== Example: Fill Form ===\n") + + steps = [ + ("browser_navigate", {"url": "https://example.com/login"}), + ("browser_type", {"selector": "#username", "text": "myuser"}), + ("browser_type", {"selector": "#password", "text": "mypass"}), + ("browser_click", {"selector": "button[type=submit]"}), + ] + + for tool, params in steps: + run_mcp_command(tool, params) + + +def example_extract_data(): + """Example: Extract data using JavaScript.""" + print("\n=== Example: Extract Data ===\n") + + run_mcp_command("browser_navigate", { + "url": "https://example.com/products" + }) + + # Extract product data + run_mcp_command("browser_evaluate", { + "script": """ + () => { + return Array.from(document.querySelectorAll('.product')).map(p => ({ + name: p.querySelector('.name')?.textContent, + price: p.querySelector('.price')?.textContent + })); + } + """ + }) + + +def main(): + """Run examples.""" + print("Playwright MCP Usage Examples") + print("=" * 50) + print() + print("Note: These are conceptual examples showing MCP tool calls.") + print("In practice, OpenClaw manages the MCP server lifecycle.") + print() + + example_navigate_and_click() + example_fill_form() + example_extract_data() + + print("\n" + "=" * 50) + print("For actual usage, configure MCP server in OpenClaw config.") + + +if __name__ == "__main__": + main()