Initial commit with translated description

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)

_meta.json

@@ -0,0 +1,6 @@
+{
+  "ownerId": "kn73rfyfbb2nt729a6f911fx2980czrm",
+  "slug": "playwright-mcp",
+  "version": "1.0.0",
+  "publishedAt": 1770565004575
+}

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()