Playwright MCP — Addons & Integrationen

Playwright MCP

✓ Offiziell★ 34.987

Microsofts offizieller MCP-Server für Browser-Automatisierung — über den Accessibility-Tree, ohne Screenshots oder Vision-Modell.

Playwright MCP steuert einen echten Browser — aber anders als Screenshot-basierte Ansätze: Der Server arbeitet auf Playwrights Accessibility-Tree, also der strukturierten Beschreibung einer Seite (welche Buttons, Links, Formularfelder es gibt, mit Namen und Zustand). Die README fasst die Vorteile so zusammen: „Fast and lightweight", „LLM-friendly — no vision models needed, operates purely on structured data" und „deterministic tool application" — es gibt keine Mehrdeutigkeit, welches Pixel gemeint war, weil der Agent Elemente direkt anspricht statt auf Koordinaten zu klicken.

Der Agent bekommt dafür einen Satz Browser-Tools: browser_navigate öffnet Seiten, browser_snapshot liefert den aktuellen Accessibility-Snapshot als Text, browser_click und verwandte Tools interagieren mit Elementen, browser_tabs verwaltet mehrere Tabs. Zusatzfähigkeiten sind opt-in: PDF-Export (browser_pdf_save via --caps=pdf) und koordinatenbasierte Maus-Aktionen für Sonderfälle (--caps=vision). Auch Netzwerk-Routing sowie Cookies/LocalStorage lassen sich steuern.

Unterstützt werden Chrome, Firefox, WebKit und Microsoft Edge; standardmäßig läuft der Browser sichtbar (headed), mit --headless auch unsichtbar. Voraussetzung ist nur Node.js 18 oder neuer — der Server startet direkt per npx @playwright/mcp@latest, ohne dauerhafte Installation. Damit kann ein Agent wie Claude Code Webseiten bedienen, Formulare ausfüllen und das eigene Frontend Ende-zu-Ende durchklicken, während jeder Schritt als nachvollziehbare Tool-Aktion protokolliert wird.

🔧 SETUP

Voraussetzung prüfen: Node.js 18 oder neuer
In Claude Code registrieren: `claude mcp add playwright npx @playwright/mcp@latest`
Für andere MCP-Clients die Standard-Config eintragen: `{"mcpServers": {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}}`
Optional Fähigkeiten freischalten: `--caps=pdf` (PDF-Export) oder `--caps=vision` (Koordinaten-Klicks), Browser unsichtbar mit `--headless`
Testen: den Agenten bitten, eine Seite zu öffnen und zu beschreiben — er nutzt dann browser_navigate und browser_snapshot

✅ WANN EINSETZEN?

Das eigene Frontend Ende-zu-Ende testen

Nach einer Änderung am Login-Formular: „Öffne localhost:3000, melde dich mit den Testdaten an und prüfe, ob die Fehlermeldung bei falschem Passwort erscheint" — der Agent klickt sich per Accessibility-Tree durch.

Strukturierte Web-Interaktion ohne Vision-Modell

Ein mehrstufiges Formular automatisiert ausfüllen: Der Agent sieht Felder mit Namen und Rollen als Text-Snapshot und füllt sie deterministisch aus — schneller und günstiger als Screenshot-Analyse.

⛔ WANN EHER NICHT?

Pixelgenaue visuelle Prüfungen

Der Accessibility-Tree beschreibt Struktur und Zustand, aber nicht das Aussehen — ob ein Layout verrutscht ist oder Farben stimmen, sieht der Standard-Modus nicht.

Besser: Für visuelle Checks den opt-in Vision-Modus (`--caps=vision`) zuschalten oder klassische Screenshot-basierte Tests nutzen.

Interaktion mit dem eigenen, bereits eingeloggten Browser

Playwright MCP startet eigene Browser-Instanzen — bestehende Logins und Sessions des Alltags-Browsers stehen dort nicht automatisch zur Verfügung.

Besser: Für Aufgaben im eigenen eingeloggten Browser eher Claude in Chrome verwenden.