Playwright MCP Server: Ein Assistent steuert einen echten Browser
Playwright MCP Server: Anleitung und Config-Builder
Playwright MCP Server: Einrichtung, Optionen und Tools | We.Inc
Was der Playwright MCP Server tut, wie Accessibility-Snapshots funktionieren, wichtige Optionen, seine Kern-Tools und ein Builder, der die Config schreibt.
Playwright MCP ist der Open-Source-MCP-Server von Microsoft, der einem KI-Assistenten einen echten Browser gibt, um zu klicken, zu tippen, Formulare auszufüllen und Seiten zu lesen. Statt Screenshots anzusehen, liest er den Accessibility-Baum der Seite, eine strukturierte Liste von Buttons, Links und Text. Er braucht Node.js 18 oder neuer und wird mit einer npx-Zeile installiert.
Playwright MCP auf einen Blick
Punkt
Wert
npm-Paket
@playwright/mcp
Voraussetzung
Node.js 18 oder neuer
Wie er Seiten sieht
Accessibility-Snapshots, keine Pixel
Browser
chrome, firefox, webkit, msedge
Standardfenster
Sichtbar (headed), mit --headless ausblenden
Wenn du eine Website oder einen Shop betreibst, ist Playwright MCP ein praktischer Weg, einen Assistenten deine eigenen Seiten wie ein Kunde durchgehen zu lassen: Menü öffnen, etwas in den Warenkorb legen, Kontaktformular absenden und melden, was kaputt ist. Er basiert auf Playwright, einer weit verbreiteten Bibliothek für Browsertests. Wähle unten deine Optionen, kopiere eine Config und lies die Sicherheitshinweise, bevor du ihn auf etwas mit Login loslässt.
Wähle einen Browser und ob das Fenster sichtbar oder headless sein soll.
Aktiviere den isolierten Modus, wenn jede Sitzung sauber starten soll, ohne dass etwas auf die Festplatte geschrieben wird.
Füge zusätzliche Funktionsgruppen hinzu, die du brauchst, etwa PDF-Speichern oder Test-Assertions.
Kopiere das JSON in die Config deiner MCP-App und starte sie neu. Beim ersten Start wird das Paket heruntergeladen.
Teste gegen eine Staging-Kopie oder ein Testkonto, nicht mit deinem echten Admin-Login.
Nutze --isolated für Testläufe, damit Cookies einer Sitzung nie in die nächste gelangen.
Fordere einen Snapshot an, bevor du Klicks anforderst: Der Assistent wählt Elemente aus dieser Liste.
Gib genaue Schritte vor ("öffne /pricing, klicke auf den zweiten Plan, nenne die Summe") statt vager Ziele.
Denk an browser_run_code_unsafe: Es führt beliebigen Playwright-Code aus, nutze es also nur mit Prompts, denen du vertraust.
Häufige Fragen
Was ist ein Accessibility-Snapshot?
Browser führen einen Accessibility-Baum, dieselbe strukturierte Ansicht, die Screenreader nutzen: jeder Button, Link, jede Überschrift und jedes Feld mit Name und Rolle. Playwright MCP gibt dem Assistenten diesen Baum, sodass er "klicke auf den Button In den Warenkorb" sagen kann, ohne aus einem Bild zu raten.
Ist Playwright MCP eine Sicherheitsgrenze?
Nein, und das README sagt das fett gedruckt. Auch Optionen wie --allowed-origins und --blocked-origins werden ausdrücklich nicht als Sicherheitsgrenze beschrieben. Behandle ihn als Tool, das du beaufsichtigst, und betreibe ihn dort, wo ein Fehler keine echten Kundendaten erreicht.
Merkt er sich Logins zwischen Sitzungen?
Standardmäßig nutzt er ein dauerhaftes Profil, Logins werden also wie bei einem normalen Browser auf der Festplatte gespeichert. Mit --isolated liegt das Profil im Arbeitsspeicher und geht verloren, wenn der Browser schließt. Mit --storage-state kannst du Cookies in eine isolierte Sitzung vorladen.
Kann er Screenshots machen oder PDFs speichern?
browser_take_screenshot ist ein Kern-Tool. PDF-Speichern (browser_pdf_save) wird mit --caps=pdf zugeschaltet, und Tools zum Klicken per Koordinaten brauchen --caps=vision.
Soll ich Playwright MCP oder die Playwright CLI nutzen?
Das README meint, Coding-Agenten fahren mit der separaten Playwright CLI eventuell besser, da sie weniger Tokens verbraucht. MCP empfiehlt es für längere explorative Sitzungen, bei denen es diese Kosten wert ist, den Browserzustand offen zu halten.
Dauerhaft, isoliert oder dein eigener Browser
Playwright MCP kann auf drei Arten laufen. Das standardmäßige dauerhafte Profil speichert Cookies und Logins in einem Ordner pro Projekt. Der isolierte Modus hält alles im Arbeitsspeicher, was zu wiederholbaren Tests passt. Der Modus mit Browsererweiterung verbindet sich mit einem bereits geöffneten Chrome- oder Edge-Fenster, das ist bequem, bedeutet aber, dass der Assistent mit deinen echten Logins handelt.
Ein dauerhaftes Profil kann jeweils nur ein Browser nutzen. Wenn du zwei Assistenten-Sitzungen im selben Projekt laufen lässt, starte die zweite mit --isolated oder einem anderen --user-data-dir.
Gute Aufgaben für ihn auf deiner eigenen Website
Prüfen, ob jeder Link im Hauptmenü eine Seite öffnet, die lädt. Das Kontaktformular mit Testdaten ausfüllen und bestätigen, dass die Dankesnachricht erscheint. Die Konsolenmeldungen einer Seite lesen, die langsam wirkt. Auf Handybreite verkleinern und alles auflisten, was überläuft.
Halte die Ergebnisse als Checkliste fest, die du nach jeder Änderung wiederholen kannst, dann wird der Lauf des Assistenten zu deinem Regressionstest.
Wissenswerte Optionen
Jede Option gibt es auch als Umgebungsvariable, aufgeführt im README.
Ausgewählte Optionen von Playwright MCP
Option
Was sie tut
--browser <browser>
chrome, firefox, webkit oder msedge
--headless
Läuft ohne sichtbares Fenster, sichtbar ist der Standard
--isolated
Hält das Browserprofil im Arbeitsspeicher statt auf der Festplatte
--storage-state <path>
Lädt Cookies und Local Storage in eine isolierte Sitzung
--device <device>
Emuliert ein Gerät, zum Beispiel "iPhone 15"
--viewport-size <size>
Setzt den Viewport in Pixeln, zum Beispiel "1280x720"
--caps <caps>
Schaltet zusätzliche Tool-Gruppen ein, etwa pdf oder vision
--allowed-origins / --blocked-origins
Erlaubt oder blockiert Request-Origins, keine Sicherheitsgrenze
--timeout-action / --timeout-navigation
Standardwerte 5000 ms und 60000 ms
--port <port>
Stellt den Server über HTTP bereit, damit sich ein Client per URL verbindet
Kern-Tools
Kern-Tools von Playwright MCP
Tool
Zweck
Nur lesend
Eine URL öffnen
Nein
Den Accessibility-Snapshot der Seite erfassen
Ja
Auf ein Element klicken
Nein
In ein Feld tippen
Nein
Mehrere Felder auf einmal ausfüllen
Nein
Einen Screenshot speichern
Ja
Konsolenmeldungen lesen
Ja
Netzwerk-Requests auflisten
Ja
Die Fenstergröße ändern
Nein
Playwright-Code ausführen
Nein
Config-Beispiele
Standard-Config
Die minimale Einrichtung, die das README für die meisten MCP-Apps angibt.
Als HTTP-Server laufen lassen und per URL verbinden
Nützlich, wenn die App selbst kein Fenster öffnen kann. Der Client zeigt dann auf http://localhost:8931/mcp.
Playwright MCP Config-Builder
Wähle Optionen und kopiere das JSON. Diese Seite schreibt nur Text, sie startet keinen Browser.
Browser
Headless (kein sichtbares Fenster)
Isoliertes Profil (nichts wird auf der Festplatte gespeichert)
Viewport-Größe, zum Beispiel 1280x720 (optional)
Zusätzliche Funktionsgruppen
Config-JSON
Der Viewport muss wie 1280x720 aussehen (Breite x Höhe in Pixeln). Er wurde weggelassen.