Was ist Playwright MCP? Einrichtung und Proxy-Einstellungen

Wenn Sie Claude Code oder Cursor sagen „Öffne diese Seite und lies die Preise der ersten drei Produkte“, holt der Assistent meist das rohe HTML der Seite. Wird der Preis per JavaScript nachgeladen, bleibt ihm nur ein leeres Gerüst. Playwright MCP schließt diese Lücke: Es stellt einen echten Browser hinter den Assistenten und bietet Klicken und Tippen als Tool-Aufrufe an. Die Einrichtung ist eine Zeile. Die Fragen kommen danach: Über welche IP geht der Browser hinaus, wohin gehören Benutzername und Passwort des Proxys, und darf der Agent jede beliebige Website ansteuern?

In diesem Beitrag erklären wir, was Playwright MCP ist und wie es arbeitet, worin sich der Accessibility Tree vom Screenshot unterscheidet, wie die Einrichtung in vier verbreiteten Clients aussieht, welche Flags sich lohnen, wie der Proxy eingestellt wird (auch mit Authentifizierung), wie --allowed-origins die erreichbaren Origins einschränkt und warum diese Einschränkung nicht als Sicherheitsgrenze gilt. Die Flags haben wir am Tag des Schreibens mit der offiziellen README und der Ausgabe von --help abgeglichen. Die Beispiele liefen mit @playwright/mcp 0.0.82 über einen lokalen Test-Proxy.

Was ist Playwright MCP?#

Playwright MCP ist nach der Beschreibung im offiziellen Repository ein Model-Context-Protocol-Server, der Browser-Automatisierung mit Playwright bereitstellt. Er besteht aus zwei Teilen. Playwright ist die Bibliothek, die Chromium, Firefox und WebKit aus dem Code heraus steuert; die Einzelheiten stehen in unserem Beitrag Was ist Playwright und wie nutzt man es mit Proxy?. MCP ist das Protokoll, das KI-Anwendungen auf standardisierte Weise mit externen Tools verbindet.

Das Protokoll selbst erklären wir hier nicht noch einmal. Wissen müssen Sie nur so viel: Die Assistenten-Anwendung (der Host) startet den MCP-Server als lokalen Prozess, der Server meldet die Liste seiner Tools samt Schemas, und das Modell ruft diese Tools bei Bedarf auf. Die Trennung von Host, Client und Server, die Transportwege und die Risiken auf Protokollebene finden Sie in Was ist MCP (Model Context Protocol)? Der Leitfaden.

Die Tools von Playwright MCP sind Browser-Aktionen: browser_navigate, browser_click, browser_type, browser_fill_form, browser_snapshot, browser_take_screenshot, browser_tabs und ähnliche. In Version 0.0.82 meldete die Standardinstallation 25 Tools. Mit --caps=vision,pdf kamen das Klicken per Koordinaten und die PDF-Erzeugung hinzu, die Zahl stieg auf 32. Der Unterschied zu einem selbst geschriebenen Browser-Skript: Über die Schritte entscheidet das Modell. Sie nennen das Ziel, und das Modell wählt anhand der Seite, welcher Link angeklickt wird. Wie die Agentenschleife allgemein abläuft, steht in Wie funktionieren KI-Agenten? Planung, Tools und Gedächtnis.

Wie funktioniert Playwright MCP?#

Eine Anfrage durchläuft von Anfang bis Ende diese Schritte:

1. Die Host-Anwendung führt den Befehl aus der Konfiguration aus: npx @playwright/mcp@latest. Der Server verbindet sich über stdio und meldet seine Tool-Liste.
2. Sie formulieren eine Aufgabe in natürlicher Sprache. Das Modell ruft das Tool browser_navigate mit der Adresse auf.
3. Der Server startet den Browser beim ersten Tool-Aufruf. Ohne --browser öffnete sich in unserem Test das auf dem System installierte Google Chrome; das Fenster ist standardmäßig sichtbar und wird mit --headless ausgeblendet.
4. Ist die Seite geladen, erzeugt der Server die Adresse, den Titel und einen Snapshot des Accessibility Tree. In 0.0.82 speicherte die Antwort von browser_navigate diesen Snapshot als YAML-Datei im Verzeichnis .playwright-mcp des Arbeitsordners und gab den Pfad zurück, während browser_snapshot den Baum direkt in der Antwort lieferte.
5. Jedes Element im Baum hat eine Referenz: link "Travel" [ref=e21]. Das Modell benennt das Element, das es anklicken will, über diese Referenz: browser_click, target: e21.
6. Der Server führt die Aktion mit Playwright aus und zeigt in der Antwort auch den Code, den er ausgeführt hat: await page.getByRole('link', { name: 'Travel' }).click();. Danach kommt der Snapshot der neuen Seite zurück, und die Schleife läuft weiter.

Dank dieser Codezeile können Sie die Erkundung des Agenten später in ein gewöhnliches Playwright-Skript überführen. Das Flag --codegen legt die Sprache dieser Ausgabe fest (typescript, python, java, csharp oder none).

Warum ist der Accessibility Tree nützlicher als ein Screenshot?#

Der Accessibility Tree ist die Struktur, die der Browser für Screenreader erzeugt. Nach der Definition von MDN trägt er für jedes Element vier Angaben: Name, Beschreibung, Rolle und Zustand. Playwright gibt diesen Baum als YAML aus; die Einzelheiten des Formats stehen in der Dokumentation zu Aria Snapshots. Der Snapshot unserer Testseite (books.toscrape.com) begann so:

- generic [active] [ref=e1]:
  - banner [ref=e2]:
    - generic [ref=e5]:
      - link "Books to Scrape" [ref=e6] [cursor=pointer]:
        - /url: index.html
      - text: We love being scraped!
  # ... (gekürzt)
            - list [ref=e19]:
              - listitem [ref=e20]:
                - link "Travel" [ref=e21] [cursor=pointer]:
                  - /url: catalogue/category/books/travel_2/index.html

In diesem Text liest das Modell unmittelbar, was ein Link, was eine Schaltfläche und was ein Textfeld ist. Beim Screenshot muss es dieselbe Information aus Pixeln gewinnen und anschließend die Koordinaten des Klickpunkts schätzen.

Die Beschreibung des Tools sagt dasselbe: Anhand des Screenshots lassen sich keine Aktionen ausführen, für Aktionen dient der Snapshot. Halten Sie den Text trotzdem nicht für kostenlos. In unserem Test erzeugte die Startseite der Bücherliste einen Baum von rund 32.000 Zeichen, und die Schemas der 25 Tools kamen auf knapp 20.000 Zeichen. Das sind Zeichenzahlen; der Gegenwert in Tokens hängt vom Modell ab, und wir haben ihn nicht gemessen. Die README ist in diesem Punkt offen: Für Coding-Agenten, die mit einer großen Codebasis arbeiten, empfiehlt sie den Weg über die Playwright CLI, die Tool-Schemas und Baum nicht in den Kontext lädt, und ordnet MCP Aufgaben zu, die einen dauerhaften Browser-Zustand und schrittweises Schlussfolgern über die Seite verlangen. --snapshot-mode=none schaltet den automatischen Snapshot in den Antworten ab, --mobile lässt die leichteren mobilen Seiten öffnen.

Wie wird Playwright MCP eingerichtet?#

Sie brauchen nur Node.js 18 oder neuer und einen Client, der MCP unterstützt. Das Paket installieren Sie nicht von Hand; der Client führt es bei jedem Start mit npx aus. Der Eintrag, den die README „Standardkonfiguration“ nennt, ist in den meisten Clients gleich:

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

Wo dieser Eintrag steht, hängt vom Client ab:

Wenn Sie dem Server in Claude Code Flags mitgeben, setzen Sie -- dazwischen. Laut der MCP-Dokumentation von Claude Code wird alles nach dem doppelten Bindestrich unverändert an den Server-Befehl weitergereicht:

claude mcp add --scope project playwright -- npx @playwright/mcp@latest --headless --isolated

--scope project schreibt den Eintrag in die Datei .mcp.json im Projektstamm; nehmen Sie die Datei ins Repository auf, nutzt das Team dieselbe Einstellung. Als wir den Befehl ausprobierten, entstand in der Datei die Variante des obigen Standardeintrags mit Flags. Die Verbindung prüfen Sie mit claude mcp list oder innerhalb einer Sitzung mit /mcp. Die Einzelheiten zu VS Code stehen in der MCP-Dokumentation von VS Code.

Das Tag @latest zieht bei jedem Start die aktuelle Version. Das Paket ändert sich schnell: Die Flag-Namen in diesem Beitrag gehören zu 0.0.82. Wenn im Team dasselbe Verhalten gelten soll, fixieren Sie die Version (@playwright/mcp@0.0.82) und sehen Sie sich vor einem Upgrade die Ausgabe von npx @playwright/mcp@latest --help an.

Welche Flags sind am nützlichsten?#

Die Hilfeausgabe von 0.0.82 listet rund fünfzig Optionen auf. Im Alltag begegnen Ihnen vor allem diese:

Zu jedem Flag gibt es eine passende Umgebungsvariable (etwa PLAYWRIGHT_MCP_PROXY_SERVER oder PLAYWRIGHT_MCP_ALLOWED_ORIGINS). Die Proxy-Variable haben wir ausprobiert, sie lieferte dasselbe Ergebnis wie das Flag.

Wie wird in Playwright MCP ein Proxy eingestellt?#

Für einen Proxy, der keine Zugangsdaten verlangt, bei dem Ihre ausgehende IP also im Dashboard auf der IP-Whitelist steht, genügt ein einziges Flag:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--isolated",
        "--proxy-server=http://pr.proxynet.io:8000",
        "--proxy-bypass=localhost,127.0.0.1"
      ]
    }
  }
}

Diese Konfiguration haben wir mit unserem lokalen Test-Proxy ausgeführt: Jede Seite, die der Agent öffnete, erschien im Proxy-Log als CONNECT-Zeile. Die Domain, die wir in die Liste von --proxy-bypass eingetragen hatten, tauchte im Log dagegen nie auf, sie wurde also direkt verbunden. Wenn Sie Ihren lokalen Entwicklungsserver testen, vergessen Sie den Eintrag localhost nicht; sonst versucht der Agent, die Seite auf Ihrem eigenen Rechner über den Proxy zu erreichen.

SOCKS5 funktioniert ebenfalls: --proxy-server=socks5://pr.proxynet.io:1080. In unserem Versuch öffnete sich die Seite, und beim SOCKS5-Server kam der Domainname an, die DNS-Auflösung blieb also auf der Proxy-Seite. Benutzername und Passwort werden bei SOCKS5 nicht unterstützt; der Grund ist Chromium, und die Einzelheiten stehen im oben erwähnten Beitrag zum Playwright-Proxy. Die Produktseite dazu ist SOCKS5-Proxy.

Ob der Proxy wirklich aktiv ist, prüfen Sie, indem Sie den Agenten fragen: „Öffne https://httpbin.org/ip und schreibe die IP auf, die du siehst.“ Ist die zurückgegebene Adresse nicht Ihre eigene IP, läuft der Traffic über den Proxy.

Wie wird ein Proxy mit Benutzername und Passwort definiert?#

Der naheliegende Weg ist, die Zugangsdaten in die Adresse einzubetten: --proxy-server=http://user:pass@pr.proxynet.io:8000. Das funktioniert nicht. Bei unserem Versuch startete der Server, doch die erste Navigation endete mit diesem Fehler:

Error: browserBackend.callTool: net::ERR_INVALID_AUTH_CREDENTIALS at https://httpbin.org/ip

Im Proxy-Log sahen wir, dass die Anfrage ohne Zugangsdaten ankam und ein 407 erhielt. Der Fehler war derselbe, als wir gar keine Zugangsdaten angaben. Das Flag transportiert also nur Schema, Host und Port.

Die Lösung ist die Konfigurationsdatei. Das Feld browser.launchOptions im JSON, das mit --config übergeben wird, geht an die Startoptionen von Playwright selbst; dort liegt auch das Objekt proxy:

{
  "browser": {
    "isolated": true,
    "launchOptions": {
      "headless": true,
      "proxy": {
        "server": "http://pr.proxynet.io:8000",
        "username": "user",
        "password": "pass"
      }
    }
  },
  "network": {
    "allowedOrigins": ["https://books.toscrape.com", "https://httpbin.org"]
  }
}

Der Eintrag auf der Client-Seite verweist nur auf die Datei:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--config=playwright-mcp.json"]
    }
  }
}

Dieses Paar haben wir mit unserem lokalen Proxy getestet, der Benutzername und Passwort verlangt: Der Browser erhielt zuerst ein 407, schickte die Zugangsdaten, und die Seite öffnete sich. Den Dateipfad absolut anzugeben ist sicherer, denn in welchem Verzeichnis der Client den Server startet, hängt von der Anwendung ab.

Weil das Passwort als Klartext in einer Datei liegt, treffen Sie zwei Vorkehrungen: Nehmen Sie die Datei nicht ins Repository auf und legen Sie für diese Aufgabe nach Möglichkeit einen eigenen Proxy-Benutzer an. Wenn Sie das Passwort gar nicht aufschreiben wollen, kehren Sie mit der IP-Whitelist zur Einrichtung mit einem einzigen Flag aus dem vorigen Abschnitt zurück. Den Vergleich der beiden Verfahren finden Sie in Proxy-Authentifizierung: User:Pass oder IP-Whitelist.

Wie werden die Origins eingeschränkt, die der Agent besuchen darf?#

Einem Modell einen Browser zu geben heißt, dass ihm jede gelesene Seite Anweisungen zuflüstern kann. Wie indirekte Prompt Injection abläuft und warum eine Erlaubnisliste robuster ist als eine Sperrliste, haben wir in Sicherer Webzugriff für LLMs: Rate-Limits und Berechtigungen erklärt. Playwright MCP bietet eine fertige Umsetzung dieser Idee:

"args": [
  "@playwright/mcp@latest",
  "--allowed-origins=https://books.toscrape.com;https://httpbin.org"
]

Ein Origin besteht aus Schema, Domain und Port; die Liste wird durch Semikolons getrennt. Die Entsprechung in der Konfigurationsdatei ist das Array network.allowedOrigins, das in der Form http://localhost:* einen Platzhalter für den Port akzeptiert. --blocked-origins bewirkt das Gegenteil und wird zuerst ausgewertet; ohne Erlaubnisliste bleibt jede Adresse offen, die nicht auf der Sperrliste steht.

In unserem Test erhielt ein Agent, der eine Adresse außerhalb der Liste ansteuern wollte, diese Antwort: net::ERR_BLOCKED_BY_CLIENT. Auch ein Bild von außerhalb der Liste, das wir in eine erlaubte Seite eingebaut hatten, wurde nicht geladen. Die Regel erfasst also neben der Navigation auch Unterressourcen.

Was diese Warnung in der Praxis bedeutet, zeigen drei Beobachtungen:

• Weiterleitungen umgehen die Liste. Als eine lokale Adresse auf der Erlaubnisliste per 302 auf eine Website außerhalb der Liste weiterleitete, öffnete sich die Seite, und der Agent las ihren Inhalt.
• Zu einer gesperrten Adresse kann trotzdem eine Verbindung entstehen. Für die gesperrte Domain sahen wir im Proxy-Log eine CONNECT-Zeile. Die Seite wurde nicht geladen, aber der Browser baute eine Verbindung zu diesem Server auf.
• Der Hintergrund-Traffic des Browsers unterliegt der Regel nicht. Die Anfragen von Chrome an seine Update- und Kontodienste liefen unabhängig von der Liste über den Proxy. Wenn Sie den Traffic pro GB bezahlen, zählen auch diese Anfragen mit.

Zu den Standard-Tools gehören auch browser_evaluate und browser_run_code_unsafe. Die Beschreibung des zweiten ist deutlich: Es führt beliebiges JavaScript im Server-Prozess aus und kommt einer Remote-Code-Ausführung gleich. Der Zugriff auf das Dateisystem ist standardmäßig auf den Arbeitsordner begrenzt, und file://-Adressen sind gesperrt; --allow-unrestricted-file-access hebt diese Grenze auf, verwenden Sie es nur, wenn es nötig ist.

Die eigentliche Grenze ziehen Sie außerhalb: Lassen Sie den Agenten unter einem eigenen Benutzerkonto oder in einem Container laufen, trennen Sie ihn mit --isolated von Ihren persönlichen Sitzungen, schalten Sie den Bestätigungsschritt bei Tool-Aufrufen nicht ab und führen Sie nach Möglichkeit am ausgehenden Proxy eine zweite Domain-Prüfung durch. Die Flags ersetzen diese Schichten nicht, sie kommen hinzu.

Profil und Sitzung: dauerhaft oder isoliert?#

Der Standardmodus ist das dauerhafte Profil: Cookies und Anmeldedaten liegen auf der Festplatte, und in der nächsten Sitzung macht der Agent dort weiter, wo er aufgehört hat. Das Profilverzeichnis wird aus dem Arbeitsordner des Clients abgeleitet, verschiedene Projekte bekommen also getrennte Profile. Die README warnt: Ein dauerhaftes Profil kann immer nur von einem Browser gleichzeitig genutzt werden. Wenn Sie im selben Projekt zwei Clients öffnen, geben Sie dem zweiten --isolated oder ein eigenes --user-data-dir.

--isolated startet jede Sitzung sauber und löscht alles, sobald der Browser schließt. Für Aufgaben, bei denen Daten gelesen werden, ist das der richtige Standard. Müssen Sie Ihre eigene Anwendung im angemeldeten Zustand testen, exportieren Sie die Cookies einmal und laden sie mit --storage-state; das Format steht in der Dokumentation zur Authentifizierung von Playwright. Diese Datei enthält Ihre Sitzungsschlüssel, schützen Sie sie wie ein Passwort. Der dritte Modus ist die Verbindung zu Ihrem bereits geöffneten Chrome mit --extension. Der Agent kann dann auf alle Ihre angemeldeten Tabs zugreifen; wählen Sie diesen Weg nur, wenn Sie genau wissen, was Sie tun.

Einsatzbereiche#

• Lokalisierungsprüfung: Der Agent geht durch, wie Ihre Website aus einem bestimmten Land aussieht. Sie stellen den Proxy auf den Ausgangspunkt dieses Landes ein und lassen den Agenten Elemente wie Sprache, Währung und Cookie-Hinweis berichten. Einzelheiten stehen auf der Seite zur Lokalisierungslösung; für Prüfungen, die das Bild eines echten Privatanschlusses brauchen, kommt Residential-Proxy zum Einsatz.
• Exploratives Testen: Der Agent durchläuft einen Ablauf in Ihrer eigenen Anwendung, und den erzeugten Playwright-Code überführen Sie in einen dauerhaften Test. Testaufbauten aus verschiedenen Ländern finden Sie auf der Seite App-Tests.
• Einmaliges Lesen von Daten aus einer dynamischen Seite: Einige Werte aus einer öffentlich zugänglichen Seite holen, die per JavaScript lädt. Für regelmäßige Arbeit mit großem Volumen ist ein Agent teuer; der dauerhafte Aufbau steht auf der Seite zur Data-Scraping-Lösung, und ob überhaupt ein Browser nötig ist, klärt der Beitrag Statische und dynamische Seiten beim Web Scraping.
• Fehlersuche: Mit den Tools browser_console_messages und browser_network_requests liest der Agent die Konsolenfehler und Netzwerkanfragen der Seite und fasst sie für Sie zusammen.

Auch wenn ein Agent steuert, ist das, was surft, ein Browser, und es gelten dieselben Regeln: Halten Sie sich an die Datei robots.txt und an die Nutzungsbedingungen der Website, ziehen Sie eine offizielle API vor, wenn es eine gibt, und halten Sie die Anfragerate niedrig. Plugins zur Umgehung von Erkennung empfehlen wir nicht. Warum Websites automatisierte Besucher zu unterscheiden versuchen, erklären wir in Warum werden KI-Shopping-Agenten auf Websites blockiert?.

Häufige Fehler#

Daneben gibt es Gewohnheitsfehler, die nicht in die Tabelle passen:

• Die Erlaubnisliste als Sicherheitsmaßnahme ansehen. Eine Weiterleitung umgeht die Liste; bauen Sie die Isolation auf Prozess- und Netzwerkebene auf.
• Dem Agenten das persönliche Chrome-Profil öffnen. Das Profil mit Ihren E-Mail- und Banking-Sitzungen gehört nicht in die Hände eines Modells, das fremde Inhalte liest.
• Für jede Aufgabe einen Screenshot verlangen. Aktionen laufen ohnehin über den Snapshot; das Bild dient nur der visuellen Prüfung.
• Teamarbeit mit @latest. Flag-Namen können sich von Version zu Version ändern; fixieren Sie die Version.
• Regelmäßiges Crawling dem Agenten überlassen. Jeder Schritt kostet einen Modellaufruf. Erkunden Sie mit dem Agenten, überführen Sie den erzeugten Code in ein Skript und lassen Sie dieses laufen.

Entscheidungshilfe#

Häufige Fragen#

Ist Playwright MCP kostenlos?#

Ja. Das Paket steht unter der Apache-2.0-Lizenz und läuft mit npx kostenlos. Kosten entstehen an zwei Stellen: durch die Tool-Schemas und Seiten-Snapshots, die das Modell verarbeitet, und durch den Proxy-Traffic, den Sie verbrauchen.

Worin unterscheiden sich Playwright MCP und die Playwright-Bibliothek?#

Bei der Bibliothek programmieren Sie die Schritte selbst, und das Skript nimmt bei jedem Lauf denselben Weg. Beim MCP-Server entscheidet das Modell über die Schritte; Sie nennen nur das Ziel. Das Erste ist für wiederkehrende Aufgaben günstig und vorhersehbar, das Zweite für Erkundung und einmalige Aufgaben schnell. Die Proxy-Details auf der Seite der Bibliothek (Proxy pro Context, Rotation, Fehlertabelle) stehen in unserem Beitrag zum Playwright-Proxy.

Welchen Browser nutzt es, und muss Chrome installiert sein?#

Ohne --browser öffnete sich in unserem Test das Google Chrome des Systems. Mit --browser firefox, webkit oder msedge ändern Sie das, und mit --executable-path verweisen Sie auf eine bestimmte Browser-Datei.

Ist das dasselbe wie Browser Use?#

Das Ziel ist dasselbe: einem Modell einen Browser in die Hand geben. Browser Use ist eine eigenständige Python-Agentenbibliothek und führt die Schleife selbst aus. Playwright MCP stellt nur die Tools bereit; die Schleife führt der Assistent aus, den Sie ohnehin nutzen (Claude Code, Cursor, VS Code).

Lässt es sich mit einem rotierenden Proxy verwenden?#

Ja, aber ein Browser öffnet für eine Seite viele Verbindungen, und an einem Gateway, das bei jeder Verbindung die IP wechselt, können diese Verbindungen von unterschiedlichen Adressen ausgehen. Beim Lesen unabhängiger Seiten stört das nicht. Wenn sich die IP mitten in einem mehrstufigen Ablauf nicht ändern soll, wählen Sie Sticky-Proxy. Wie die Rotation funktioniert, steht in unserem Beitrag zur IP-Rotation.

Lässt ein Proxy Verifizierungsbildschirme verschwinden?#

Nein. Ein Proxy ändert nur, von welcher IP die Anfrage ausgeht. Die Signale, die ein automatisiert gesteuerter Browser hinterlässt, und die Anfragerate bleiben gleich. Der dauerhafte Weg sind eine maßvolle Rate, erlaubte Seiten und, wo vorhanden, die offizielle API.

Fazit#

Playwright MCP gibt Ihrem Assistenten einen echten Browser und lässt ihn die Seite als Accessibility Tree lesen. Die Einrichtung ist eine Zeile: npx @playwright/mcp@latest. Für den Proxy genügt --proxy-server; sind Benutzername und Passwort nötig, endet das Einbetten in die Adresse mit ERR_INVALID_AUTH_CREDENTIALS, der richtige Ort ist das Objekt launchOptions.proxy in der Konfigurationsdatei. --allowed-origins engt das Gebiet des Agenten ein, erfasst aber keine Weiterleitungen und ist nach den Worten der Dokumentation selbst keine Sicherheitsgrenze; bauen Sie die Isolation auf Prozess- und Netzwerkebene auf. Fixieren Sie die Version, erkunden Sie mit dem Agenten und übergeben Sie die wiederkehrende Arbeit an ein Skript. Die passenden Proxy-Typen für den Ausgangspunkt Ihres Agenten finden Sie in unseren Proxy-Diensten.