Playwright MCP Server 🎭

Ein Model Context Protocol Server, der Browser-Automatisierungsfunktionen mit Playwright bereitstellt. Dieser Server ermöglicht es LLMs, mit Webseiten zu interagieren, Screenshots aufzunehmen, Testcode zu generieren, die Webseite zu scrapen und JavaScript in einer echten Browserumgebung auszuführen.

✨ Neuerungen in v1.0.10

🎯 Geräteemulation mit 143 echten Geräteprofilen!

Testen Sie Ihre Webanwendungen auf echten Geräteprofilen mit einem einfachen Befehl:

// Test on iPhone 13 with automatic user-agent, touch support, and device pixel ratio
await playwright_resize({ device: "iPhone 13" });

// Switch to iPad with landscape orientation
await playwright_resize({ device: "iPad Pro 11", orientation: "landscape" });

// Test desktop view
await playwright_resize({ device: "Desktop Chrome" });

Natürliche Sprachunterstützung für KI-Assistenten:

• „Auf iPhone 13 testen"

• „Zur iPad-Ansicht wechseln"

• „Ins Querformat drehen"

Unterstützt 143 Geräte: iPhone, iPad, Pixel, Galaxy und Desktop-Browser mit korrekter Emulation von Viewport, User-Agent, Touch-Ereignissen und Geräte-Pixel-Verhältnissen.

📚 Geräte-Kurzreferenz ansehen | Prompt-Anleitung

Related MCP server: Cloudflare Playwright MCP

Screenshot

Dokumentation | API-Referenz

Installation

Sie können das Paket entweder mit npm, mcp-get oder Smithery installieren:

Mit npm:

npm install -g @executeautomation/playwright-mcp-server

Mit mcp-get:

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Mit Smithery

Um Playwright MCP für Claude Desktop automatisch über Smithery zu installieren:

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

Mit Claude Code:

claude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-server

Installation in VS Code

Installieren Sie den Playwright MCP-Server in VS Code mit einer dieser Schaltflächen:

Alternativ können Sie den Playwright MCP-Server über die VS Code-CLI installieren:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

Nach der Installation steht Ihnen der ExecuteAutomation Playwright MCP-Server für die Verwendung mit Ihrem GitHub Copilot-Agenten in VS Code zur Verfügung.

Browser-Installation

Automatische Installation (Empfohlen)

Der Playwright MCP-Server installiert Browser-Binärdateien automatisch bei der ersten Verwendung. Wenn der Server erkennt, dass ein Browser fehlt, wird er:

1. Den erforderlichen Browser (Chromium, Firefox oder WebKit) automatisch herunterladen und installieren

2. Den Installationsfortschritt in der Konsole anzeigen

3. Ihre Anfrage nach Abschluss der Installation erneut ausführen

Keine manuelle Einrichtung erforderlich! Starten Sie einfach den Server, und er übernimmt die Browserinstallation für Sie.

Manuelle Installation (Optional)

Wenn Sie Browser manuell installieren möchten oder Probleme mit der automatischen Installation auftreten:

# Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Speicherort der Browser

Die Browser werden installiert unter:

• Windows: %USERPROFILE%\AppData\Local\ms-playwright

• macOS: ~/Library/Caches/ms-playwright

• Linux: ~/.cache/ms-playwright

Konfiguration für die Verwendung des Playwright-Servers

Standardmodus (stdio)

Dies ist der empfohlene Modus für Claude Desktop.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

Notiz: Im stdio-Modus wird die Protokollierung automatisch nur in Dateien umgeleitet (nicht in die Konsole), um eine saubere JSON-RPC-Kommunikation zu gewährleisten. Die Protokolle werden in ~/playwright-mcp-server.log geschrieben.

HTTP-Modus (eigenständiger Server)

Wenn Sie einen Browser mit grafischer Oberfläche auf Systemen ohne Anzeige oder aus Worker-Prozessen von IDEs heraus ausführen, können Sie den MCP-Server als eigenständigen HTTP-Server ausführen:

Hinweis für Claude-Desktop-Benutzer: Claude Desktop erfordert derzeit den stdio-Modus (Befehls-/Argumenten-Konfiguration). Der HTTP-Modus wird für VS Code, benutzerdefinierte Clients und Remote-Bereitstellungen empfohlen. Einzelheiten finden Sie in CLAUDE_DESKTOP_CONFIG.md.

Starten des HTTP-Servers

# Using npx
npx @executeautomation/playwright-mcp-server --port 8931

# Or after global installation
playwright-mcp-server --port 8931

Der Server startet und zeigt die verfügbaren Endpunkte an:

==============================================
Playwright MCP Server (HTTP Mode)
==============================================
Port: 8931

ENDPOINTS:
- SSE Stream:     GET  http://localhost:8931/sse
- Messages:       POST http://localhost:8931/messages?sessionId=<id>
- MCP (unified):  GET  http://localhost:8931/mcp
- MCP (unified):  POST http://localhost:8931/mcp?sessionId=<id>
- Health Check:   GET  http://localhost:8931/health
==============================================

Client-Konfiguration für den HTTP-Modus

⚠️ WICHTIG: Das Feld "type": "http" ist ERFORDERLICH für den HTTP/SSE-Transport!

Für VS Code GitHub Copilot:

{
  "github.copilot.chat.mcp.servers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Für benutzerdefinierte MCP-Clients:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

Wichtig: Ohne "type": "http" schlägt die Verbindung fehl.

Für Claude Desktop: Verwenden Sie stattdessen den stdio-Modus (siehe Standardmodus oben).

Anwendungsfälle für den HTTP-Modus

• Ausführen von Browsern mit grafischer Oberfläche auf Systemen ohne Anzeige (z. B. Remote-Server)

• Integration mit VS Code GitHub Copilot

• Ausführen des Servers als Hintergrunddienst

• Zugriff auf den Server von mehreren Clients aus

• Debugging mit dem /health-Endpunkt

• Benutzerdefinierte MCP-Client-Integrationen

H2 Überwachung: Der Server enthält ein Überwachungssystem, das auf einem dynamisch zugewiesenen Port startet (Vermeidung von Konflikten). Den tatsächlichen Port entnehmen Sie der Konsolenausgabe.

Hinweis: Für Claude Desktop verwenden Sie weiterhin den stdio-Modus (siehe Standard-Modus oben).

Fehlerbehebung

„No transport found for sessionId"-Fehler

Symptom: 400-Fehler mit der Meldung „Bad Request: No transport found for sessionId"

Lösung:

1. Prüfen, ob die Konfiguration "type": "http" enthält

   {
     "url": "http://localhost:8931/mcp",
     "type": "http"  // ← This is REQUIRED!
   }

2. Vergewissern Sie sich, dass die Server-Logs eine Verbindung anzeigen:

   # Should see these in order:
   # 1. "Incoming request" - GET /mcp
   # 2. "Transport registered" - with sessionId
   # 3. "POST message received" - with same sessionId

3. Starten Sie sowohl den Server als auch den Client neu

Verbindungsprobleme

• Server startet nicht: Prüfen Sie, ob Port 8931 verfügbar ist

• Externer Zugriff blockiert: Dies ist beabsichtigt (Sicherheit). Der Server bindet nur an localhost

• Für den Remote-Zugriff: SSH-Tunneling verwenden:

  ssh -L 8931:localhost:8931 user@remote-server

Tests

Dieses Projekt verwendet Jest für die Tests. Die Tests befinden sich im Verzeichnis src/__tests__.

Tests ausführen

Sie können die Tests mit einem der folgenden Befehle ausführen:

# Run tests using the custom script (with coverage)
node run-tests.cjs

# Run tests using npm scripts
npm test           # Run tests without coverage
npm run test:coverage  # Run tests with coverage
npm run test:custom    # Run tests with custom script (same as node run-tests.cjs)

Der Testabdeckungsbericht wird im Verzeichnis coverage erstellt.

Evals ausführen

Das evals-Paket lädt einen MCP-Client, der dann die index.ts-Datei ausführt, sodass kein Rebuild zwischen den Tests erforderlich ist. Sie können Umgebungsvariablen laden, indem Sie sie dem npx-Befehl voranstellen. Die vollständige Dokumentation finden Sie hier.

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

MIT

Rechte

Achten Sie beim Hinzufügen neuer Tools auf die Länge des Tool-Namens. Einige Clients wie Cursor haben eine Beschränkung von 60 Zeichen für die Kombination aus Server- und Tool- Namen (server_name:tool_name).

Unser Server heißt playwright-mcp. Bitte stellen Sie sicher, dass Ihre Tool-Namen kurz genug sind, um dieses Limit nicht zu überschreiten.

Star History