Playwright MCP — Anwendungsfälle, Installieren & Live-Demo

Name: Playwright MCP Server
Author: microsoft

Warum nutzen

Hauptfunktionen

Offizielle Version — veröffentlicht und gepflegt vom Microsoft Playwright Team
Auf Accessibility Tree basierend — viel zuverlässiger als pixelbasierte Browser-Agenten
Unterstützt Chromium, Firefox, WebKit, im headed- oder headless-Modus
Multi-Tab, Datei-Uploads/Downloads, Netzwerk-Abfangen, Videoaufzeichnung

Live-Demo

In der Praxis

playwright.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add playwright -- npx -y @playwright/mcp@latest

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Playwright

Produktiv-Deployment in 60 Sekunden überprüfen

👤 DevOps-Ingenieure, Release-Manager ⏱ ~5 min intermediate

Wann einsetzen: Sie haben gerade ein Deployment veröffentlicht und möchten schnell überprüfen, ob die kritischen Benutzerflows noch funktionieren, bevor Sie den Erfolg bestätigen.

Voraussetzungen

Test-Konto-Anmeldedaten (verwenden Sie ein dediziertes QA-Konto, kein echtes Benutzerkonto) — Speichern Sie sie in Umgebungsvariablen oder direkt in Ihrem Prompt

Ablauf

Öffnen Sie die Startseite und überprüfen Sie, ob sie geladen wird

Öffnen Sie https://app.example.com. Überprüfen Sie, ob die Seite 200 zurückgibt, die H1 'Willkommen' sagt und die Login-Schaltfläche sichtbar ist.✓ Kopiert

→ Bestanden/Fehlgeschlagen mit Screenshot bei Fehler
Führen Sie den Login → Kernbearbeitung → Logout-Flow durch

Melden Sie sich als [email protected] / [password] an. Erstellen Sie dann ein neues Projekt namens 'smoke-test-<timestamp>'. Löschen Sie es dann. Melden Sie sich dann ab.✓ Kopiert

→ Jeder Schritt gelingt; wenn einer fehlschlägt, Screenshot + DOM-Dump
Diagnostizieren Sie alle Fehler

Falls ein Schritt fehlgeschlagen ist, erfassen Sie den Seiten-Snapshot und teilen Sie mir mit, was sich von einem funktionierenden Baseline unterscheidet.✓ Kopiert

→ Spezifisches Element oder Netzwerkanfrage, das/die unterbrochen ist

Ergebnis: Sicherheit (oder schnelle Panik) über Ihr Deployment in unter einer Minute, ohne dass eine vollständige E2E-Suite erforderlich ist.

Fallstricke

Fest kodierte Testdaten sammeln sich an und verschmutzen die Produktion — Verwenden Sie immer eindeutige Zeitstempel in Testdaten und bereinigen Sie am Ende des Flows
Die Browser-Sitzung bleibt über Durchläufe bestehen und verdeckt Fehler, die einen sauberen Status erfordern — Führen Sie mit --browser-context: incognito aus oder löschen Sie Cookies zwischen Durchläufen

Kombinieren mit: sentry

Überprüfen Sie Ihre Website bei 5 Viewport-Breiten und melden Sie Fehler

👤 Frontend-Ingenieure, Designer ⏱ ~15 min intermediate

Wann einsetzen: Bevor Sie eine Marketing-Website oder Produktseite veröffentlichen, möchten Sie überprüfen, dass sie bei gängigen Breiten nicht bricht.

Ablauf

Öffnen Sie die Seite bei 5 Viewport-Breiten (320, 375, 768, 1024, 1440)

Öffnen Sie https://example.com bei Viewports 320×568, 375×812, 768×1024, 1024×768, 1440×900. Erstellen Sie einen vollseitigen Screenshot von jedem.✓ Kopiert

→ 5 Screenshots gespeichert
Erkennen Sie horizontalen Überlauf bei jeder Breite

Listet für jeden Viewport alle Elemente auf, bei denen scrollWidth > viewportWidth. Diese verursachen horizontales Scrollen und wirken kaputt.✓ Kopiert

→ Pro-Viewport-Liste von fehlerhaften CSS-Selektoren
Schlagen Sie Lösungen vor

Rufen Sie für jedes übergelaufene Element sein berechnetes CSS ab und schlagen Sie die kleinste Lösung vor (wahrscheinlich max-width, overflow-wrap oder Breakpoint-Anpassung).✓ Kopiert

→ Handelbarer Diff pro Element

Ergebnis: Eine priorisierte Reparatur-Liste mit spezifischen Selektoren, die als einzelner PR eingereicht werden kann.

Fallstricke

Echte Benutzer haben Scrollbalken (15px unter Windows), die der headless Browser standardmäßig nicht simuliert — Testen Sie mit beiden --browser=chromium und --browser=webkit; Breiten sind wichtiger als Sie denken

Kombinieren mit: chrome-devtools · filesystem

Durchsuchen Sie Ihre Website und finden Sie jeden unterbrochenen internen Link

👤 Dokumentations-Betreuer, SEO-Manager ⏱ ~30 min intermediate

Wann einsetzen: Vor einem Marketing-Push oder einmal pro Quartal — stille 404er bei internen Links schaden SEO und Benutzervertrauen.

Ablauf

Durchsuchen Sie die Website und sammeln Sie alle internen Links

Beginnend bei https://docs.example.com, durchsuchen Sie alle Seiten in der gleichen Domain (max. Tiefe 3). Erfassen Sie jeden gefundenen href.✓ Kopiert

→ Vollständiges Link-Inventar
Testen Sie jeden Link

Senden Sie für jede eindeutige URL eine HEAD-Anfrage und erfassen Sie den Statuscode. Markieren Sie alles >= 400.✓ Kopiert

→ Liste defekter Links mit Statuscodes
Gruppieren Sie defekte Links nach Referrer

Listet für jeden defekten Link auf, welche Seite(n) darauf verweisen, damit Sie wissen, wo Sie reparieren müssen.✓ Kopiert

→ Pro-Broken-Link-Liste der Referrer, geordnet nach Referrer-Anzahl

Ergebnis: Ein Markdown-Bericht, den Sie dem Dokumentationsteam übergeben können, das jeden defekten Link nach Seite auflistet, die repariert werden muss.

Fallstricke

Einige Websites rate-limit aggressive Crawler — Fügen Sie Verzögerung zwischen Anfragen hinzu; wenn auf Produktion ausgeführt, führen Sie es während off-peak-Stunden aus

Kombinieren mit: filesystem · github

Scrapen Sie Daten, die Authentifizierung erfordern

👤 Datenanalysten, Forscher ⏱ ~20 min advanced

Wann einsetzen: Die Daten, die Sie benötigen, befinden sich hinter einer Anmeldung (Ihr eigenes Admin-Dashboard, interne Berichte usw.) und grundlegende Scraper können sie nicht erreichen.

Voraussetzungen

Gültige Anmeldedaten für das Ziel — Verwenden Sie ein Service-Konto, niemals Ihr persönliches

Ablauf

Anmelden

Öffnen Sie https://target.example.com/login. Füllen Sie das E-Mail-Feld mit [email] und das Kennwort mit [password] aus. Senden.✓ Kopiert

→ Bestätigte Sitzung — auf Dashboard-URL gelandet
Navigieren Sie zur Datenseite

Klicken Sie in den Berichtsbereich. Warten Sie, bis die Datentabelle dargestellt wird.✓ Kopiert

→ Tabelle im DOM sichtbar
Daten extrahieren

Lesen Sie jede Zeile der Berichtstabelle. Geben Sie als JSON mit jeder Spalte als Schlüssel zurück.✓ Kopiert

→ Vollständiger Datensatz als JSON

Ergebnis: Strukturierte Daten, die Sie mit einem einfachen HTTP-Scraper nicht hätten erhalten können, bereit zum Einfügen in eine Tabelle oder Datenbank.

Fallstricke

MFA ist aktiviert und bricht den Flow — Richten Sie ein app-spezifisches Kennwort ein, falls der Service dies unterstützt, oder verwenden Sie stattdessen ein langlebiges API-Token
Captchas erscheinen nach mehreren Anmeldungen — Verwenden Sie einen persistenten Browser-Kontext (--user-data-dir), damit Cookies wiederverwendet werden und Sie keine Captcha-Gates auslösen

Kombinieren mit: postgres · filesystem

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

playwright + filesystem

Scrapen Sie eine Website, speichern Sie den Inhalt jeder Seite auf der Festplatte für offline RAG

Durchsuchen Sie docs.stripe.com beginnend bei /api, speichern Sie jede Seite als Markdown-Datei unter ./knowledge/stripe/{path}.md.✓ Kopiert

playwright + chrome-devtools

Performance + Funktionstests in einem Flow — überprüfen Sie, dass die Seite korrekt UND schnell geladen wird

Öffnen Sie meine Startseite. Überprüfen Sie die H1, dann erfassen Sie eine Lighthouse-Trace und teilen Sie mir mit, ob LCP unter 2 Sekunden liegt.✓ Kopiert

playwright + sentry

Reproduzieren Sie einen in Sentry gemeldeten Produktionsfehler durch Wiedergabe von Benutzer-Breadcrumbs

Sentry-Problem WEB-3a91 besagt, dass der Benutzer X geklickt hat, dann Y, dann abgestürzt. Reproduzieren Sie diese genaue Sequenz in Playwright und bestätigen Sie.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
browser_navigate	url: str	Navigieren Sie zu einer URL — erste Aktion von jedem Flow	1 Seitenladevorgang
browser_snapshot		Erhalten Sie eine strukturierte Ansicht aller interaktiven Elemente (Links, Schaltflächen, Eingaben)	kostenlos
browser_click	ref: str (from snapshot) \| selector: str	Klicken Sie auf ein Element, das durch Snapshot-Ref oder CSS-Selektor identifiziert wird	kostenlos
browser_type	ref, text, submit?: bool	Füllen Sie ein Eingabefeld aus; mit submit:true wird auch die Eingabetaste gedrückt	kostenlos
browser_screenshot	fullPage?: bool, path?: str	Erfassen Sie visuelle Beweise — Debugging oder Audit	Speicherplatz
browser_evaluate	script: str	Führen Sie beliebiges JS im Seiten-Kontext aus — verwenden Sie sparsam, bevorzugen Sie spezifische Tools	kostenlos
browser_network_requests		Überprüfen Sie, was die Seite lädt; nützlich zum Auffinden versteckter API-Endpunkte	kostenlos

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Kostenlos — wird lokal ausgeführt, nur Ihre Maschinenressourcen
Tokens pro Aufruf: Snapshots sind 500-3000 Tokens je nach Seitenkomplexität
Kosten in €: Kostenlos. Browser-Binärdateien werden einmal heruntergeladen (~300MB Chromium).
Tipp: Verwenden Sie browser_snapshot statt Screenshots — es ist 100 × billiger in Tokens und zuverlässiger für Claude zum Handeln.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Übergeben Sie über Umgebungsvariablen; geben Sie niemals echte Produktionsdaten in Prompts ein

Datenabfluss: Browser verbinden sich mit allen URLs, zu denen Sie navigieren. Keine Telemetrie an Microsoft.

Browser-Sitzungen bleiben bestehen — löschen Sie Cookies zwischen Durchläufen, wenn Sie Auth testen.
Headed-Modus öffnet ein echtes Fenster auf Ihrem Computer; verwenden Sie headless für CI.

Fehlerbehebung

Häufige Fehler und Lösungen

Element not found / TimeoutError

Die Seite hat nicht fertig gerendert. Fügen Sie eine explizite Wartezeit hinzu: browser_wait_for(selector) oder browser_wait_for(text='...') vor der Aktion.

Prüfen: Erstellen Sie zunächst einen Snapshot, um zu sehen, was sich tatsächlich auf der Seite befindet

Browser fails to launch on Linux

Installieren Sie OS-Abhängigkeiten: npx playwright install-deps. Häufig in Docker — verwenden Sie das offizielle Playwright-Image als Basis.

Prüfen: playwright --version

All navigations fail with net::ERR_*

Problem mit Netzwerk-Sandboxing. Führen Sie mit --no-sandbox aus, wenn in Docker, oder überprüfen Sie Ihre Firewall / Ihren Proxy.

Site detects automation and shows captcha

Verwenden Sie --browser-type=firefox (weniger erkannt als headless Chromium), oder führen Sie headed aus, falls angemessen. Einige Websites sind absichtlich bot-resistent — respektieren Sie das.

Alternativen

Playwright vs. andere

Alternative	Wann stattdessen	Kompromiss
puppeteer MCP	Sie benötigen nur Chromium und möchten eine etwas einfachere API	Nur Chromium; kein Firefox/WebKit; kleinere Community jetzt
Firecrawl MCP	Sie müssen nur Inhalte extrahieren, nicht mit der Seite interagieren	Gehostet (kostet Credits), aber keine Infrastruktur; kann keine Flows durchklicken
Browserbase MCP	Sie müssen Browser-Automatisierung aus einem serverless-Kontext ausführen (kein lokaler Browser)	Gehosteter Service mit Pro-Minute-Preisgestaltung; großartig für Produktions-Agenten

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen