So verwenden Sie Claude Code mit Playwright MCP: Ein vollständiger Einrichtungsleitfaden

Was ist Playwright MCP?

Der Playwright MCP-Server gibt jedem Model Context Protocol-Client Browser-Automatisierungs-Superkräfte. Statt dass ein KI-Modell Pixel „betrachtet", gibt der Server strukturierte Barrierefreiheits-Snapshots der Seite zurück, und das Modell interagiert mit Elementen anhand von Referenz-IDs. Das macht die Schleife schnell, deterministisch und frei von Vision-Modell-Overhead. Es funktioniert mit VS Code, Cursor, Windsurf, Claude Desktop, Claude Code und jedem anderen MCP-Client.

Für Claude Code insbesondere bedeutet dies, dass der Agent in Ihrem Terminal jetzt einen Browser öffnen, herumklicken, Formulare ausfüllen, Netzwerkanforderungen mocken, Screenshots aufnehmen und sogar benutzerdefinierte Playwright-Skripte ausführen kann – alles gesteuert durch natürlichsprachige Eingabeaufforderungen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie haben:

• Node.js 18 oder neuer installiert
• Claude Code installiert und angemeldet (führen Sie claude in Ihrem Terminal aus, um zu überprüfen)
• Ein Terminal, mit dem Sie sich wohl fühlen

Das ist alles – Playwright MCP lädt seine eigenen Browser-Binärdateien beim ersten Ausführen herunter.

Bereit, Ihr Geschäft zu erweitern?

Starten Sie heute Ihre kostenlose Testversion und sehen Sie innerhalb weniger Tage Ergebnisse.

Demo anfragen Anmelden

Einrichten der Playwright MCP-Integration

Das Verbinden von Playwright MCP mit Claude Code ist ein einzelner Befehl. Folgen Sie diesen Schritten, um es einzurichten:

Fügen Sie den Playwright MCP-Server hinzu

Öffnen Sie Ihr Terminal und führen Sie aus:

claude mcp add playwright npx @playwright/mcp@latest

Dies registriert einen neuen MCP-Server namens playwright, den Claude Code über npx startet, wenn er Browser-Tools benötigt. Der erste Aufruf lädt das Paket und die erforderlichen Browser-Binärdateien herunter, also geben Sie das erste Mal eine Minute Zeit.

Überprüfen Sie die Verbindung

Starten Sie eine neue Claude Code-Sitzung und führen Sie den Befehl /mcp aus:

claude

/mcp

Sie sollten playwright als verbundenen Server aufgelistet sehen, zusammen mit den Tools, die er bereitstellt (Navigation, Klicken, Eingeben, Screenshots, Netzwerk-Mocking und mehr).

Optional: Verwenden Sie stattdessen eine JSON-Konfiguration

Wenn Sie Konfigurationsdateien lieber direkt bearbeiten möchten, kann derselbe Server zu ~/.claude.json (oder einer projektgebundenen .mcp.json) mit dem Standard-MCP-Format hinzugefügt werden:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Starten Sie Claude Code nach dem Bearbeiten der Datei neu und der Server wird in /mcp angezeigt.

Ihre erste Browser-Automatisierung in Claude Code

Mit dem verbundenen Server können Ihre Eingabeaufforderungen jetzt einen echten Browser steuern. Versuchen Sie die kanonische erste Interaktion aus der Playwright-Dokumentation:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

Claude Code öffnet den Browser, fordert einen Barrierefreiheits-Snapshot der Seite an, lokalisiert die Eingabe anhand ihrer Element-Referenz, gibt jedes Todo ein und bestätigt das Ergebnis in Ihrem Terminal zurück.

Hinweis, welcher Browser sich öffnet: Standardmäßig wird Chromium im Headed-Modus gestartet. Um dies zu ändern, fügen Sie Flags zu den args in Ihrer MCP-Konfiguration hinzu und starten Sie Claude Code neu: --headless, um das Fenster auszublenden, oder --browser=firefox|webkit|msedge, um die Engine zu wechseln.

Wie Barrierefreiheits-Snapshots funktionieren

Wenn ein Playwright MCP-Tool ausgeführt wird, gibt es einen strukturierten Snapshot der Seite zurück – Element-Rollen, Textinhalte und Referenz-IDs – anstelle von Pixeln. Claude liest den Snapshot und verwendet Referenzen wie ref=e5, um in das Textfeld zu schreiben, oder ref=e10, um das Kontrollkästchen umzuschalten. Kein Pixel-Schieben, keine spröden CSS-Selektoren – nur strukturierter Seitenzustand, den das Modell verstehen kann.

Abonnieren Sie unseren Newsletter

Erhalten Sie die neuesten Tipps, Trends und Angebote kostenlos.

E-Mail-Adresse

Abonnieren

Kernfunktionen, die Sie von Claude Code aus verwenden können

Sobald Playwright MCP verbunden ist, funktionieren dieselben Eingabeaufforderungen, die Sie einem Kollegen geben würden, in Claude Code:

• Navigation: „Gehen Sie zu example.com", „gehen Sie zurück", „laden Sie die Seite neu".
• Klicken und Eingeben: „Klicken Sie auf die Schaltfläche Absenden", „füllen Sie das E-Mail-Feld mit test@example.com ".
• Screenshots: „Machen Sie einen Screenshot des Preisbereichs".
• Tastatur und Maus: Drücken Sie Tasten, fahren Sie mit der Maus über, ziehen Sie Elemente.
• Registerkarten und Dialoge: Öffnen Sie neue Registerkarten, wechseln Sie zwischen ihnen, akzeptieren oder verwerfen Sie Popups.
• Netzwerk-Monitoring: „Listen Sie die Anforderungen auf, die seit dem Laden der Seite gestellt wurden".
• API-Mocking: „Mocken Sie den Endpunkt /api/users so, dass er ein leeres Array zurückgibt".
• Speicherzustand: Speichern Sie authentifizierte Sitzungen in einer Datei und laden Sie sie später erneut.

Für Workflows, die mehr als einen einzelnen Tool-Aufruf benötigen, können Sie Claude Code auffordern, browser_run_code aufzurufen und ein Playwright-Skript inline auszuführen – nützlich für Assertions, Datenextraktion oder alles, das von einigen Zeilen imperativem Code profitiert.

Nützliche Konfigurationsoptionen

Playwright MCP hat eine Handvoll Flags, die es wert sind, bekannt zu sein. Fügen Sie sie zum Array args in Ihrer Konfiguration hinzu (oder zum Befehl claude mcp add nach --).

Headless-Modus

Der Browser läuft standardmäßig im Headed-Modus, damit Sie sehen können, was passiert. Um Headless auszuführen – nützlich für CI oder Remote-Shells – übergeben Sie --headless:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

Wählen Sie einen Browser

Wechseln Sie die Engine mit dem Flag --browser. Unterstützte Werte sind chrome, firefox, webkit und msedge:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=firefox"
      ]
    }
  }
}

Profile-Modi

Playwright MCP unterstützt drei Profile-Modi:

• Persistent (Standard): Anmeldezustand und Cookies bleiben zwischen Sitzungen erhalten.
• Isolated: Übergeben Sie --isolated, um jede Sitzung neu zu starten, optional mit --storage-state vorgefüllt.
• Browser-Erweiterung: Übergeben Sie --extension, um sich an Ihre vorhandenen Browser-Registerkarten über die Playwright MCP Bridge-Erweiterung anzuhängen.

Standalone HTTP-Server

Wenn Sie einen Headed-Browser irgendwo ohne angehängte Anzeige ausführen müssen (oder von einem IDE-Worker aus), starten Sie den Server separat und verbinden Sie sich über HTTP.

Öffnen Sie ein zweites Terminal – lassen Sie es für die ganze Sitzung laufen – und starten Sie den Server dort:

npx @playwright/mcp@latest --port 8931

Halten Sie dieses Terminal offen. Dies ist das, was den Browser auf localhost:8931 verfügbar macht, damit Sie die Sitzung in Ihrem eigenen Browser anzeigen können und Claude Code etwas zum Verbinden hat. Das Schließen des Terminals beendet den Server.

Aktualisieren Sie dann in dem Terminal, in dem Sie Claude Code ausführen, Ihre Konfiguration, um auf den Endpunkt zu verweisen:

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

Praktische Workflows, die es wert sind, gestohlen zu werden

Sobald Playwright MCP verbunden ist, kann Claude Code End-to-End-Test-Gerüstbau, Bug-Reproduktionen, API-Mocking-Checks, Seiten-Audits und Release-Smoke-Tests verarbeiten – alles, das das Steuern eines Browsers und das Zurückberichten beinhaltet.

Zwei Dinge machen diese Eingabeaufforderungen in der Praxis tatsächlich funktionieren. Erstens eine CLAUDE.md im Root Ihres Projekts, die Ihre Staging-URL, Demo-Anmeldedaten und alle Konventionen dokumentiert, denen der Agent folgen sollte – ohne diese hat „melden Sie sich als Demo-Benutzer an" nichts zum Verankern. Zweitens, wenn Sie möchten, dass Claude Code Kontext aus Problemen oder Tickets abruft, verbinden Sie einen zweiten MCP-Server dafür – der GitHub MCP-Server ist die häufige Wahl. Überspringen Sie beides und Claude Code wird (vernünftigerweise) fragen, was Problem #482 ist.

Warum Claude Code mit Playwright MCP kombinieren?

Ein paar Gründe, warum diese Kombination schwer zu schlagen ist:

• Terminal-nativ: Alles passiert dort, wo Sie bereits arbeiten. Kein Kontextwechsel in einen separaten Test-Runner.
• Barrierefreiheit an erster Stelle: Snapshots schlagen Screenshots bei Geschwindigkeit und Zuverlässigkeit, und sie funktionieren ohne ein Vision-Modell.
• Echtes Playwright darunter: Alles, was Sie mit Playwright im Code tun können, können Sie hier tun – Multi-Browser, Netzwerk-Mocking, Speicherzustand und mehr.
• Kombinierbar mit anderen MCP-Servern: Stapeln Sie Playwright neben GitHub, Ihrer Datenbank oder Ihrem Monitoring-MCP-Server, und Claude Code kann Arbeit end-to-end über alle hinweg verschieben.
• Offener Standard: MCP ist portabel. Derselbe Playwright-Server funktioniert in Cursor, VS Code, Windsurf und Claude Desktop, wenn Sie Clients wechseln.

Fügen Sie den Server hinzu, führen Sie /mcp aus, um zu bestätigen, und Ihre nächste Eingabeaufforderung „gehen Sie, um die Anmeldeseite zu testen" wird zu einer echten Browser-Sitzung – gesteuert von Claude Code, beobachtet (oder nicht) im Headed-Modus und überprüfbar durch Barrierefreiheits-Snapshots.