Playwright MCP Tools for VS Code

This extension provides 33 Playwright browser automation tools for GitHub Copilot Chat, automatically generated from the upstream @playwright/mcp package.

Features

• 🤖 Auto-generated Tools: All 33 tools from Playwright MCP are automatically wrapped as VS Code Language Model tools
• 🔄 Always Up-to-Date: Run npm run generate to sync with the latest Playwright MCP tools
• 🎯 Categorized: Tools organized by category (core, vision, pdf, testing, tracing)
• 🔧 Configurable: Customize browser type and headless mode via VS Code settings
• 📦 Self-Contained: No external Node.js or MCP server needed

Available Tools

Core Browser Tools (23 tools)

• Navigation: browser_navigate, browser_close
• Interaction: browser_click, browser_fill, browser_fill_form
• Inspection: browser_snapshot, browser_get_network_request
• Dialog handling: browser_handle_dialog
• And more...

Vision Tools (3 tools)

• browser_screenshot, browser_screenshot_element, browser_performance_insights

PDF Tools (1 tool)

• browser_pdf

Testing Tools (4 tools)

• browser_test_get_all_tests, browser_test_run_tests

Tracing Tools (2 tools)

• browser_trace_start, browser_trace_stop

See all tools in VS Code: Copilot Chat > Configure Tools

Usage

1. Install the extension
2. Open Copilot Chat
3. Reference tools in your prompts:

   @workspace #browser_navigate Navigate to https://example.com
   @workspace #browser_click Click the login button
   

Configuration

• playwrightMcpEmbedded.browser: Browser to use (chrome, firefox, msedge)
• playwrightMcpEmbedded.headless: Run browser in headless mode (default: false)

Debugging & Logging

The extension provides detailed logging in the VS Code Output panel:

1. Open Output panel: Press Ctrl+Shift+U (or Cmd+Shift+U on Mac)
2. Select "Playwright MCP" from the dropdown in the top-right

The logs show:

• ✅ Tool registration and activation
• 🔧 Browser initialization (config, browser type, headless mode)
• 📊 Each tool invocation with parameters and results
• ❌ Detailed error messages with stack traces

See LOGGING.md for detailed debugging guide.

Development

Architecture

This extension uses automated code generation to stay synchronized with upstream Playwright MCP:

1. scripts/generate-tools.js: Extracts tool metadata from @playwright/mcp
2. scripts/update-package-json.js: Injects tool contributions into package.json
3. src/PlaywrightMCPAdapter.ts: Bridges VS Code tool calls to Playwright MCP server
4. src/generated/tools/*.ts: Auto-generated TypeScript wrapper classes

Regenerate Tools

After updating @playwright/mcp dependency:

npm run generate  # Regenerate all tool wrappers
npm run compile   # Compile extension (runs generate automatically)

Tools are regenerated automatically before every compilation via the precompile npm script.

Build

npm install
npm run compile
npm run package  # Creates .vsix file