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.

Localization (EN/RU)

The extension localizes its UI based on the VS Code display language (vscode.env.language):

• Russian (ru, ru-RU, …) → tool display names, descriptions, invocation messages, and the activity bar view are shown in Russian.

• Any other language → English (default fallback).

• package.nls.json / package.nls.ru.json — static UI strings (displayName, userDescription, view titles, welcome content). modelDescription (LLM prompt) intentionally stays English for model stability.

• src/i18n/ — runtime dictionaries for invocation messages (tool.<action>.running).

After adding/changing NLS keys, run npm run generate — it fails with a list of missing keys if package.json references a key absent from either dictionary.

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 + NLS integrity check
npm run compile    # Compile extension
npm run test:i18n  # Run i18n dictionary tests

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

Build

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