Playwright MCP steuert einen echten Browser. Direkt aus Claude Code heraus, ohne dass du ein Skript schreibst oder eine extra Terminal-Sitzung öffnest.
Das klingt simpel, verändert aber deinen Frontend-Workflow grundlegend. Du beschreibst, was du brauchst. Claude öffnet den Browser, klickt, scrollt, macht Screenshots und liefert dir das Ergebnis zurück.
Was ist der Playwright MCP Server?
Microsoft hat Playwright als Open-Source-Testframework für Browser gebaut. Das Framework automatisiert Chromium, Firefox und WebKit. Es ist professioneller Code, dem Entwicklungsteams bei größeren Projekten vertrauen.
Der Playwright MCP Server ist Microsofts offizielle Brücke zwischen diesem Framework und dem Model Context Protocol. Wenn du ihn in Claude Code einbindest, bekommt die KI Zugriff auf einen vollständigen Chromium-Browser. Claude kann Seiten öffnen, Formulare ausfüllen, Buttons klicken, Text lesen und Screenshots erstellen. Alles über natürlichsprachliche Anweisungen.
Das unterscheidet ihn von anderen Browser-MCPs: Hier steckt echte Microsoft-Ingenieursarbeit dahinter. Kein Community-Experiment, sondern ein gepflegtes offizielles Paket.
Wenn du noch nicht weißt, was MCP-Server grundsätzlich leisten, lies zuerst MCP Server einfach erklärt: Was bringt das Model Context Protocol?. Das legt die Grundlage.
Wie richtest du ihn ein?
Der Einstieg ist schnell erledigt. Du brauchst Node.js und Claude Code. Den Server trägst du in deine MCP-Konfiguration ein:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Das wars. Beim nächsten Start von Claude Code steht dir der Server zur Verfügung. Playwright lädt Chromium automatisch nach, falls es noch nicht auf deinem System liegt.
Du kannst auch "headless": false als Option ergänzen. Dann öffnet sich ein sichtbares Browserfenster, während Claude arbeitet. Praktisch, wenn du beim Debugging genau sehen willst, was die KI gerade tut.
Praxis: Was bringt dir das konkret?
UI-Tests ohne Skript-Tippen. Du sagst Claude: "Teste die Login-Maske auf localhost:3000. Gib falsche Zugangsdaten ein und prüf, ob die Fehlermeldung erscheint." Claude öffnet den Browser, führt den Test durch und meldet das Ergebnis. Du bekommst direktes Feedback, ob dein Frontend wie erwartet reagiert.
Visual Verification nach Code-Änderungen. Wenn du CSS anpasst oder Komponenten umbaust, kann Claude Screenshots vorher und nachher machen. Die KI beschreibt, was sich verändert hat. Du musst nicht mehr zwischen Editor und Browser wechseln.
Klickpfade automatisieren. Du hast einen mehrstufigen Checkout-Prozess und willst prüfen, ob er nach einer Änderung noch funktioniert. Statt selbst zu klicken, sagst du Claude, welche Schritte es ausführen soll. Claude führt sie aus und meldet dir, ob alles geklappt hat.
Webinhalte extrahieren. Manchmal brauchst du Daten von einer Seite, die kein API anbietet. Claude kann die Seite laden, Selektoren identifizieren und den gesuchten Text oder eine Tabelle direkt ausgeben.
Wenn du zusätzlich auf Konsole, Netzwerk und DOM zugreifen willst, schau dir den Chrome DevTools MCP an. Die beiden Server ergänzen sich gut.
Wann lohnt sich Playwright MCP?
Nicht jeder braucht diesen Server sofort. Er macht am meisten Sinn, wenn du regelmäßig Frontend-Code schreibst und Claude nicht nur Code vorschlagen, sondern das Ergebnis auch prüfen lassen willst.
Besonders nützlich ist er in diesen Situationen:
- Du baust neue Komponenten und willst schnelles visuelles Feedback, ohne ständig den Browser zu wechseln.
- Dein Projekt hat noch keine E2E-Tests und du willst Claude beim Testen zuschauen lassen, ob der Code korrekt funktioniert.
- Du scrapst gelegentlich Webseiten für interne Daten, zum Beispiel öffentliche Preislisten oder Tabellen.
- Du reviewst Pull Requests und willst sicherstellen, dass neue UI-Elemente korrekt rendern.
Für rein backend-lastige Projekte ohne nennenswerten UI-Anteil ist der Nutzen eher gering. In dem Fall sparst du dir die Installation.
Ein Hinweis zur Sicherheit: Claude agiert mit deinen Browser-Berechtigungen. Gib der KI in Produktivumgebungen keine echten Zugangsdaten. Das gilt für jeden MCP-Server, der Aktionen ausführt, nicht nur für diesen.
FAQ
Funktioniert Playwright MCP mit allen Claude-Versionen?
Du brauchst Claude Code, also die Kommandozeilen-Version. Die Chat-Oberfläche auf claude.ai unterstützt MCPs aktuell nicht. Jede aktuelle Version von Claude Code mit MCP-Unterstützung reicht aus.
Läuft der Browser sichtbar oder im Hintergrund?
Standardmäßig läuft Playwright headless, also unsichtbar. Mit "headless": false in der Konfiguration öffnet sich ein sichtbares Fenster. Das hilft beim Debugging und zeigt dir live, was Claude gerade im Browser macht.
Brauche ich Playwright schon installiert haben?
Nein. Das npx-Kommando lädt alles automatisch. Du musst Playwright nicht manuell installieren. Node.js und Claude Code reichen als Voraussetzung.
Playwright MCP ist eines der nützlichsten Werkzeuge für Frontend-Entwickler, die Claude Code produktiv einsetzen. Die Integration ist unkompliziert, der Zeitgewinn beim UI-Testing ist spürbar.
Wenn du Claude und Browser-Automation noch weiter vertiefen willst: In der kostenlosen Claude Business Community bei Skool tauschst du dich mit Entwicklern aus, die genau das tun. Themen sind Claude, Automatisierung, Co-Work, Claude Code, App-Building und Agent-Coding. Lernst, wie du Zeit sparst, Kosten senkst und dein Business skalierst. Komm rein: skool.com/unternehmernetzwerk-2071
Marcel Porcher, newways.ai