[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C2ZJZP5KX31DF762FFX3T0":3,"skill-same:01M6C2ZJZP5KX31DF762FFX3T0":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":14,"categories":15,"keywords":24,"publishedAt":31,"linkOnly":32,"markdownContent":33,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":6,"ownerHtmlUrl":40,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":41,"install":42,"resources":55},"01M6C2ZJZP5KX31DF762FFX3T0","playwright-mcp-manual-interaction",null,"jleechanorg\u002Fjleechan-skills","jleechanorg","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F221404966?v=4","01M6C1VJ99XG950X1DWPEBCBGX","01M6C1VJDK5YVDNT3362RT5WSB",6,"MIT","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills_archive\u002Flegacy-pre-2026-08-27\u002Fpackages\u002Fplaywright-mcp-manual-interaction\u002FSKILL.md",[16,21],{"categoryNo":17,"categoryName":18,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":22,"categoryName":23,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000023","Skill与智能体开发",[25,26,27,28,29,30],"MCP","playwright","playwright mcp manual interaction","interaction","manual","playwright mcp","2026-11-10 10:12:30",false,"# Playwright MCP - Manual Interaction Guide\n\n## Status\nPlaywright MCP is **DISABLED BY DEFAULT** in Claude Code CLI and Codex CLI for context optimization.\n\n**Location**: Can be run locally but not installed to CLI by default\n\n## Why Disabled by Default\n- **Context Optimization**: Reduces token usage during normal operations\n- **Manual Control**: Available when explicitly needed for browser automation tasks\n- **Local Availability**: Server can still be started manually for testing\n\n## Enabling Playwright MCP\n\n### Option 1: Enable in mcp_common.sh (Global)\n```bash\n# Set environment variable before running MCP setup\nexport PLAYWRIGHT_ENABLED=true\nbash scripts\u002Fmcp_common.sh\n```\n\n### Option 2: Manual Server Installation\n```bash\n# Install Playwright MCP server globally\nnpm install -g @playwright\u002Fmcp\n\n# Verify installation\nnpx -y @playwright\u002Fmcp --help\n```\n\n## Manual Interaction via Bash Commands\n\n### Starting the Playwright MCP Server Manually\n\n**Direct Node Execution**:\n```bash\n# Start the server (stdio mode - for manual testing)\nnode \"$(npm root -g)\u002F@playwright\u002Fmcp\u002Fdist\u002Findex.js\"\n```\n\n**Using npx**:\n```bash\n# Run directly with npx\nnpx -y @playwright\u002Fmcp\n```\n\n### Server Communication Protocol\n\nThe Playwright MCP server uses **JSON-RPC over stdio**. Here's how to interact manually:\n\n**⚠️ Note on Protocol Version**: The examples use protocol version \"2024-11-05\" which is current as of this writing. To verify the latest supported protocol version, consult the [MCP specification](https:\u002F\u002Fmodelcontextprotocol.io\u002Fdocs) or check the server's initialization response.\n\n**⚠️ Note on One-Shot Commands**: The examples below use piped echo commands for demonstration. Each `npx -y @playwright\u002Fmcp` invocation starts a **new server instance** that exits after processing one message. For **persistent sessions** with multiple commands, use the Interactive Testing Script or Node.js REPL approaches shown later in this document.\n\n**1. Initialize the Server** (one-shot example):\n```bash\n# Send initialization request (starts new server instance)\necho '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"manual-test\",\"version\":\"1.0.0\"}}}' | npx -y @playwright\u002Fmcp\n```\n\n**2. List Available Tools** (one-shot example):\n```bash\n# Request tools list (starts new server instance)\necho '{\"jsonrpc\":\"2.0\",\"id\":2,\"method\":\"tools\u002Flist\",\"params\":{}}' | npx -y @playwright\u002Fmcp\n```\n\n**3. Execute Browser Actions** (one-shot examples):\n```bash\n# Navigate to URL\necho '{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 3,\n  \"method\": \"tools\u002Fcall\",\n  \"params\": {\n    \"name\": \"browser_navigate\",\n    \"arguments\": {\n      \"url\": \"https:\u002F\u002Fexample.com\"\n    }\n  }\n}' | npx -y @playwright\u002Fmcp\n\n# Click element\necho '{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 4,\n  \"method\": \"tools\u002Fcall\",\n  \"params\": {\n    \"name\": \"browser_click\",\n    \"arguments\": {\n      \"selector\": \"button#submit\"\n    }\n  }\n}' | npx -y @playwright\u002Fmcp\n\n# Take screenshot\necho '{\n  \"jsonrpc\": \"2.0\",\n  \"id\": 5,\n  \"method\": \"tools\u002Fcall\",\n  \"params\": {\n    \"name\": \"browser_screenshot\",\n    \"arguments\": {\n      \"path\": \"docs\u002Fscreenshot.png\"\n    }\n  }\n}' | npx -y @playwright\u002Fmcp\n```\n\n## Integration with Claude Code (When Enabled)\n\nIf you enable Playwright MCP in your CLI configuration, it will be available as:\n\n**MCP Tool Pattern**: `mcp__playwright__*`\n\n### Common Tools Available:\n- `browser_navigate` - Navigate to URL\n- `browser_click` - Click element by selector\n- `browser_screenshot` - Capture screenshot\n- `browser_evaluate` - Execute JavaScript in browser context\n- `browser_fill` - Fill form fields\n- `browser_press` - Press keyboard keys\n\n## Testing Locally Without CLI Installation\n\n### Interactive Testing Script\n```bash\n#!\u002Fbin\u002Fbash\n# Save as: scripts\u002Ftest_playwright_mcp.sh\n\n# Create named pipe for bidirectional communication\nPIPE_PATH=$(mktemp -u)\nmkfifo \"$PIPE_PATH\"\n\n# Start server reading from pipe, output to log\nnpx -y @playwright\u002Fmcp \u003C \"$PIPE_PATH\" > \u002Ftmp\u002Fmcp-output.log 2>&1 &\nSERVER_PID=$!\n\n# Open pipe for writing\nexec 3> \"$PIPE_PATH\"\n\n# Wait for server to start\nsleep 2\n\n# Send test commands\necho \"Initializing...\"\necho '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{\"protocolVersion\":\"2024-11-05\",\"capabilities\":{},\"clientInfo\":{\"name\":\"test\",\"version\":\"1.0\"}}}' >&3\n\necho \"Listing tools...\"\necho '{\"jsonrpc\":\"2.0\",\"id\":2,\"method\":\"tools\u002Flist\",\"params\":{}}' >&3\n\n# Wait for responses\nsleep 2\n\n# Cleanup\nexec 3>&-\nkill $SERVER_PID 2>\u002Fdev\u002Fnull\nrm -f \"$PIPE_PATH\"\n\n# Show results\necho \"Server output:\"\ncat \u002Ftmp\u002Fmcp-output.log\n```\n\n### Using Node.js REPL\n```javascript\n\u002F\u002F Start Node.js REPL\nconst { spawn } = require('child_process');\n\n\u002F\u002F Spawn Playwright MCP server\nconst mcp = spawn('npx', ['-y', '@playwright\u002Fmcp']);\n\n\u002F\u002F Send JSON-RPC request\nfunction sendRequest(method, params = {}, id = 1) {\n  const request = JSON.stringify({\n    jsonrpc: '2.0',\n    id: id,\n    method: method,\n    params: params\n  });\n  mcp.stdin.write(request + '\\n');\n}\n\n\u002F\u002F Listen for responses\nmcp.stdout.on('data', (data) => {\n  console.log('Response:', data.toString());\n});\n\n\u002F\u002F Initialize\nsendRequest('initialize', {\n  protocolVersion: '2024-11-05',\n  capabilities: {},\n  clientInfo: { name: 'node-test', version: '1.0.0' }\n});\n\n\u002F\u002F List tools\nsendRequest('tools\u002Flist', {}, 2);\n```\n\n## Configuration Files\n\n### Where Playwright MCP Would Be Registered (If Enabled)\n```json\n\u002F\u002F ~\u002F.claude\u002Fconfig.json (Claude Code CLI)\n{\n  \"mcpServers\": {\n    \"playwright-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@playwright\u002Fmcp\"]\n    }\n  }\n}\n```\n\n```json\n\u002F\u002F ~\u002F.codex\u002Fconfig.json (Codex CLI)\n{\n  \"mcpServers\": {\n    \"playwright-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@playwright\u002Fmcp\"]\n    }\n  }\n}\n```\n\n## Use Cases for Manual Interaction\n\n1. **Testing Browser Automation**: Test Playwright scripts without full CLI integration\n2. **Debugging**: Manually send commands to debug browser automation issues\n3. **CI\u002FCD Integration**: Run Playwright MCP in headless mode for automated testing\n4. **Development**: Develop and test new browser automation workflows\n\n## Re-enabling for Specific Projects\n\nIf you need Playwright MCP for a specific project:\n\n```bash\n# Project-specific enable\ncd \u002Fpath\u002Fto\u002Fproject\nexport PLAYWRIGHT_ENABLED=true\nbash scripts\u002Fmcp_common.sh\n\n# This will add Playwright MCP to your CLI configs\n```\n\n## Troubleshooting\n\n### Server Not Starting\n```bash\n# Verify installation\nnpm list -g @playwright\u002Fmcp\n\n# Reinstall if needed\nnpm install -g @playwright\u002Fmcp\n\n# Check Node.js version (requires Node 18+)\nnode --version\n```\n\n### Communication Issues\n```bash\n# Test stdio communication\necho '{\"jsonrpc\":\"2.0\",\"id\":1,\"method\":\"initialize\",\"params\":{}}' | npx -y @playwright\u002Fmcp\n\n# Should see JSON-RPC response\n```\n\n### Browser Launch Failures\n```bash\n# Install Playwright browsers\nnpx playwright install\n\n# Install system dependencies (Ubuntu\u002FDebian)\nnpx playwright install-deps\n```\n\n## Alternative: Use Chrome Superpowers MCP\n\nFor simple browser automation needs, consider using Chrome Superpowers MCP which is enabled by default:\n\n**Tool**: `mcp__chrome-superpower__use_browser`\n\nSee: `.claude\u002Fskills\u002Fchrome-superpowers-reference.md`\n\n## Related Files\n- **Installation Script**: `scripts\u002Fmcp_common.sh` (PLAYWRIGHT_ENABLED flag)\n- **Chrome Alternative**: `.claude\u002Fskills\u002Fchrome-superpowers-reference.md`\n- **Browser Testing**: `.claude\u002Fskills\u002Fbrowser-testing-ocr-validation.md`\n\n## Notes\n- Playwright MCP is a **system-level MCP server**, not a user-created skill\n- Disabled by default to optimize context usage in normal operations\n- Can be manually started and controlled via bash commands and JSON-RPC\n- Full CLI integration available by setting `PLAYWRIGHT_ENABLED=true`\n",{},"main","42ccd02cbf5e8e47839dc3eab6fc754dc6b339cf",".claude\u002Fskills_archive\u002Flegacy-pre-2026-08-27\u002Fpackages\u002Fplaywright-mcp-manual-interaction",0,"https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills","https:\u002F\u002Fgithub.com\u002Fjleechanorg","2026-11-11 09:18:40",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add jleechanorg\u002Fjleechan-skills --skill playwright-mcp-manual-interaction",{"tool":48,"command":49},"bunx","bunx skills add jleechanorg\u002Fjleechan-skills --skill playwright-mcp-manual-interaction",{"tool":51,"command":52},"pnpm","pnpm dlx skills add jleechanorg\u002Fjleechan-skills --skill playwright-mcp-manual-interaction","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills_archive\u002Flegacy-pre-2026-08-27\u002Fpackages\u002Fplaywright-mcp-manual-interaction\u002FSKILL.md",true,[],[57,75,97,111,125,141],{"skillNo":58,"name":59,"nameZh":6,"description":60,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":63,"publishedAt":31},"01M716Y5MTJ6GYJZ2ATXCJK8G4","instinct","Use when the user invokes \u002Finstinct or \u002Fin, or asks to \"message Instinct\", \"ask Instinct\", \"tell Instinct\", \"check Instinct\", or read replies from the configured peer assistant. iMessage first, WhatsApp Web as fallback.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Finstinct\u002FSKILL.md",[],[59,64,65,66,67,68,69,70,71,72,73,74],"user","when","replies","check","use","identity","whatsapp","gmail","read","message","ask",{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":86,"publishedAt":31},"01M716Y4HF7FVVMJSA2CCVN5VF","hr","Compatibility alias for history-resume; produce the same fresh-state, provenance-aware resume briefing.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fhr\u002FSKILL.md",[81],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000038","人力资源","PROFESSION","适用职业",[77,87,88,89,90,91,92,93,94,95,96],"resume","compatibility","provenance","for","history","produce","alias","briefing","state","fresh",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":104,"publishedAt":31},"01M716Y1FFNFKFJYYKF8HQA6T8","history-resume","Resume briefing for the current repository branch or worktree using fresh state and admitted history sources.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fhistory-resume\u002FSKILL.md",[103],{"categoryNo":82,"categoryName":83,"taxonomyType":84,"taxonomyTypeDesc":85},[91,87,105,106,64,107,94,108,90,109,110,95,96],"history resume","branch","analysis","repository","worktree","sources",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":31},"01M716XWXJ8EPHK4RH9T14TR85","grok","Alias for the canonical grokbot browser conversation workflow; \u002Fgrok talks to the Grok bot the same way \u002Fdot talks to Dot.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fgrok\u002FSKILL.md",[],[113,118,119,120,90,121,93,122,123,124],"dot","bot","workflow","canonical","conversation","browser","grokbot",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":31},"01M70N9Q07DTE0EW5KFXMMMSJ0","codexa-bench","Compare `codexa` and normal `codex` on a fair split of comparable work by default; use `--strict` for duplicate runs of the exact same task.","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcodexa-bench\u002FSKILL.md",[],[132,133,134,68,135,90,136,137,138,139,140],"codexa bench","work","split","default","duplicate","task","compare","normal","codex",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":145,"licenseFileUrl":146,"sourceHtmlUrl":147,"categories":148,"keywords":158,"publishedAt":31},"01M6C24S2X60SP8BBFGAEKPEGW","frontend-design","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Ffrontend-design\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fjleechanorg\u002Fjleechan-skills\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Ffrontend-design\u002FSKILL.md",[149,152,155],{"categoryNo":150,"categoryName":151,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":153,"categoryName":154,"taxonomyType":19,"taxonomyTypeDesc":20},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":156,"categoryName":157,"taxonomyType":84,"taxonomyTypeDesc":85},"01JBSEEDCAT000000000000032","设计师",[159,160,161,68,162,163,164,64,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,65,183],"frontend","design","frontend design","generic","ui design","react","html","components","code","artifacts","ui","aesthetics","Production","web components","landing","applications","quality","web","css","create","examples","with","react components","web ui","pages"]