Ga naar hoofdinhoud

Playwright MCP Browser Setup

Each project workspace configures its own Playwright MCP browser sessions in a .mcp.json file at the project root. The Nextcloud workspace uses 7 browsers; other workspaces may use fewer depending on the parallelism their tests demand. An example .mcp.json with the 7-browser configuration is available as a starting point.

Browser Pool (Nextcloud workspace)​

ServerModePurpose
browser-1HeadlessMain agent (default)
browser-2HeadlessSub-agent / parallel
browser-3HeadlessSub-agent / parallel
browser-4HeadlessSub-agent / parallel
browser-5HeadlessSub-agent / parallel
browser-6HeadedUser observation (visible window)
browser-7HeadlessSub-agent / parallel

VS Code Extension Setup​

The VS Code extension loads MCP servers from .mcp.json in the project root (this file lives in each project repo, not in the .github documentation repo). The file defines 7 browser instances. Browsers 1–5 and 7 are headless; browser-6 is headed (omits --headless) so the browser window is visible when you want to watch:

{
"mcpServers": {
"browser-1": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
},
"browser-2": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
},
"browser-3": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
},
"browser-4": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
},
"browser-5": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
},
"browser-6": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--isolated"
]
},
"browser-7": {
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--headless",
"--isolated"
]
}
}
}

The project's shared .claude/settings.json has two pre-approval entries:

  • "enableAllProjectMcpServers": true — auto-approves all servers from .mcp.json without prompting on each reload.
  • All mcp__browser-* tool calls — pre-approved for all 7 browsers so that parallel sub-agents (used by /test-app Full mode and /test-counsel) can use their assigned browser without needing an interactive permission prompt. Without this, background agents are silently denied and no testing occurs.

Then reload the VS Code window: Ctrl+Shift+P → type reload window → Enter.

Verification​

After reload, open the MCP servers panel to verify all 7 browsers show Connected. You can do this two ways:

  • Type /MCP servers in the Claude Code chat input
  • Or Ctrl+Shift+P → search "MCP servers"

MCP servers panel showing all 7 browser instances connected

If any server shows an error, check the output panel: Ctrl+Shift+P → "Output: Focus on Output" → select "Claude VSCode" from the dropdown.

CLI Alternative (terminal only)​

For the Claude Code CLI (claude terminal command, not VS Code), you can start servers as HTTP endpoints on fixed ports and reference them via URL:

# Start headless browsers
for port in 9221 9222 9223 9224 9225 9227; do
npx -y @playwright/mcp@latest --headless --isolated --port $port &
done

# Start headed browser
npx -y @playwright/mcp@latest --isolated --port 9226 &

This is not needed for VS Code — the extension manages server processes automatically via .mcp.json. Only use this approach if you're running claude from the terminal without VS Code.

Usage Rules​

  1. Default: Use browser-1 for normal work
  2. Parallel agents: Assign sub-agents browser-2 through browser-5 and browser-7
  3. User watching: Switch to browser-6 when the user wants to observe
  4. Fallback: If a browser errors, try the next numbered browser
  5. Keep browser-6 reserved: Only for explicit user observation