Dramatiker MCP
Ein Model Context Protocol (MCP)-Server, der Browser-Automatisierungsfunktionen mit Playwright bereitstellt. Dieser Server ermöglicht LLMs die Interaktion mit Webseiten über strukturierte Zugänglichkeits-Snapshots, sodass keine Screenshots oder visuell optimierten Modelle erforderlich sind.
Hauptmerkmale
- Schnell und leicht . Verwendet den Barrierefreiheitsbaum von Playwright, keine pixelbasierte Eingabe.
- LLM-freundlich . Keine Vision-Modelle erforderlich, arbeitet ausschließlich mit strukturierten Daten.
- Deterministische Toolanwendung . Vermeidet Mehrdeutigkeiten, die bei Screenshot-basierten Ansätzen häufig auftreten.
Anforderungen
- Node.js 18 oder neuer
- VS Code, Cursor, Windsurf, Claude Desktop oder jeder andere MCP-Client
Erste Schritte
Installieren Sie zunächst den Playwright MCP-Server mit Ihrem Client. Eine typische Konfiguration sieht wie folgt aus:
Sie können den Playwright MCP-Server auch mithilfe der VS Code CLI installieren:
Nach der Installation steht der Playwright MCP-Server zur Verwendung mit Ihrem GitHub Copilot-Agent in VS Code zur Verfügung.
Gehen Sie zu Cursor Settings
-> MCP
-> Add new MCP Server
. Benennen Sie den Server nach Ihren Wünschen und verwenden Sie den command
mit dem Befehl npx @playwright/mcp
. Sie können die Konfiguration auch überprüfen oder befehlsähnliche Argumente hinzufügen, indem Sie auf Edit
klicken.
Befolgen Sie die Windsuff MCP- Dokumentation . Verwenden Sie die folgende Konfiguration:
Folgen Sie der MCP- Installationsanleitung und verwenden Sie die folgende Konfiguration:
Konfiguration
Der Playwright MCP-Server unterstützt folgende Argumente. Sie können in der obigen JSON-Konfiguration als Teil der "args"
-Liste angegeben werden:
Benutzerprofil
Sie können Playwright MCP mit einem persistenten Profil wie einen normalen Browser (Standard) oder in isolierten Kontexten für die Testsitzungen ausführen.
Persistentes Profil
Alle Anmeldeinformationen werden im persistenten Profil gespeichert. Sie können es zwischen den Sitzungen löschen, wenn Sie den Offline-Status aufheben möchten. Das persistente Profil befindet sich an den folgenden Speicherorten und kann mit dem Argument --user-data-dir
überschrieben werden.
Isoliert
Im isolierten Modus wird jede Sitzung im isolierten Profil gestartet. Jedes Mal, wenn Sie MCP auffordern, den Browser zu schließen, wird die Sitzung beendet und der gesamte Speicherstatus für diese Sitzung geht verloren. Sie können dem Browser den anfänglichen Speicherstatus über die contextOptions
der Konfiguration oder über das Argument --storage-state
bereitstellen. Weitere Informationen zum Speicherstatus finden Sie hier .
Konfigurationsdatei
Der Playwright MCP-Server kann mithilfe einer JSON-Konfigurationsdatei konfiguriert werden. Sie können die Konfigurationsdatei mit der Befehlszeilenoption --config
angeben:
Eigenständiger MCP-Server
Wenn Sie einen Headed Browser auf einem System ohne Anzeige oder aus Arbeitsprozessen der IDEs ausführen, führen Sie den MCP-Server aus der Umgebung mit DISPLAY aus und übergeben Sie das Flag --port
um den SSE-Transport zu aktivieren.
Und dann legen Sie in der MCP-Clientkonfiguration die url
zum SSE-Endpunkt fest:
HINWEIS: Die Docker-Implementierung unterstützt derzeit nur Headless-Chromium.
Sie können das Docker-Image selbst erstellen.
Werkzeuge
Die Tools sind in zwei Modi verfügbar:
- Snapshot-Modus (Standard): Verwendet Zugänglichkeits-Snapshots für bessere Leistung und Zuverlässigkeit
- Vision-Modus : Verwendet Screenshots für visuell basierte Interaktionen
Um den Vision-Modus zu verwenden, fügen Sie beim Starten des Servers das Flag --vision
hinzu:
Der Vision-Modus funktioniert am besten mit Computermodellen, die in der Lage sind, mit Elementen im XY-Koordinatenraum zu interagieren, basierend auf dem bereitgestellten Screenshot.
- Browser-Schnappschuss
- Titel: Seiten-Schnappschuss
- Beschreibung: Erfassen Sie einen Barrierefreiheits-Schnappschuss der aktuellen Seite. Dies ist besser als ein Screenshot.
- Parameter: Keine
- Schreibgeschützt: true
- Browserklick
- Titel: Klick
- Beschreibung: Klicken Sie auf einer Webseite
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenref
(Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshot
- Schreibgeschützt: false
- browser_drag
- Titel: Maus ziehen
- Beschreibung: Drag & Drop zwischen zwei Elementen durchführen
- Parameter:
startElement
(Zeichenfolge): Für Menschen lesbare Beschreibung des Quellelements, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenstartRef
(Zeichenfolge): Genaue Quellelementreferenz aus dem Seiten-SnapshotendElement
(Zeichenfolge): Für Menschen lesbare Zielelementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenendRef
(Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshot
- Schreibgeschützt: false
- browser_hover
- Titel: Maus darüber schweben
- Beschreibung: Bewegen Sie den Mauszeiger über das Element auf der Seite
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenref
(Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshot
- Schreibgeschützt: true
- Browsertyp
- Titel: Text eingeben
- Beschreibung: Geben Sie Text in ein bearbeitbares Element ein
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenref
(Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshottext
(Zeichenfolge): Text, der in das Element eingegeben werden sollsubmit
(Boolesch, optional): Ob eingegebener Text abgesendet werden soll (nachher die Eingabetaste drücken)slowly
(Boolesch, optional): Gibt an, ob jeweils ein Zeichen eingegeben werden soll. Nützlich zum Auslösen von Tastenhandlern auf der Seite. Standardmäßig wird der gesamte Text auf einmal ausgefüllt.
- Schreibgeschützt: false
- Browserauswahloption
- Titel: Option auswählen
- Beschreibung: Wählen Sie eine Option in einer Dropdown-Liste aus
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenref
(Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshotvalues
(Array): Array von Werten, die in der Dropdown-Liste ausgewählt werden sollen. Dies kann ein einzelner oder mehrere Werte sein.
- Schreibgeschützt: false
- Browser_Press_Key
- Titel: Drücken Sie eine Taste
- Beschreibung: Drücken Sie eine Taste auf der Tastatur
- Parameter:
key
(string): Name der zu drückenden Taste oder eines zu generierenden Zeichens, wie etwaArrowLeft
odera
- Schreibgeschützt: false
- Browser_wait_for
- Titel: Warten auf
- Beschreibung: Warten Sie, bis Text erscheint oder verschwindet oder eine bestimmte Zeit vergeht
- Parameter:
time
(Zahl, optional): Die Wartezeit in Sekundentext
(Zeichenfolge, optional): Der Text, auf den gewartet werden solltextGone
(Zeichenfolge, optional): Der Text, auf dessen Verschwinden gewartet werden soll
- Schreibgeschützt: true
- Browser-Datei-Upload
- Titel: Dateien hochladen
- Beschreibung: Eine oder mehrere Dateien hochladen
- Parameter:
paths
(Array): Die absoluten Pfade zu den hochzuladenden Dateien. Kann eine einzelne oder mehrere Dateien sein.
- Schreibgeschützt: false
- Browser-Handle-Dialog
- Titel: Einen Dialog führen
- Beschreibung: Behandeln eines Dialogs
- Parameter:
accept
(Boolesch): Ob der Dialog akzeptiert werden soll.promptText
(Zeichenfolge, optional): Der Text der Eingabeaufforderung im Falle eines Eingabeaufforderungsdialogs.
- Schreibgeschützt: false
- browser_navigate
- Titel: Navigieren Sie zu einer URL
- Beschreibung: Navigieren Sie zu einer URL
- Parameter:
url
(Zeichenfolge): Die URL, zu der navigiert werden soll
- Schreibgeschützt: false
- browser_navigate_back
- Titel: Zurück
- Beschreibung: Zurück zur vorherigen Seite
- Parameter: Keine
- Schreibgeschützt: true
- Browser_Navigate_Forward
- Titel: Weiter geht's
- Beschreibung: Weiter zur nächsten Seite
- Parameter: Keine
- Schreibgeschützt: true
- Browser_Machen_Screenshot
- Titel: Machen Sie einen Screenshot
- Beschreibung: Erstellen Sie einen Screenshot der aktuellen Seite. Sie können keine Aktionen basierend auf dem Screenshot ausführen. Verwenden Sie für Aktionen browser_snapshot.
- Parameter:
raw
(Boolesch, optional): Gibt an, ob ohne Komprimierung (im PNG-Format) zurückgegeben werden soll. Der Standardwert ist „false“, wodurch ein JPEG-Bild zurückgegeben wird.filename
(Zeichenfolge, optional): Dateiname, in dem der Screenshot gespeichert werden soll. Standardmäßig wirdpage-{timestamp}.{png|jpeg}
verwendet, falls nicht anders angegeben.element
(Zeichenfolge, optional): Lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zum Erstellen eines Screenshots des Elements zu erhalten. Falls nicht angegeben, wird der Screenshot vom Ansichtsfenster erstellt. Falls ein Element angegeben ist, muss auch die Referenz angegeben werden.ref
(Zeichenfolge, optional): Genaue Zielelementreferenz aus dem Seiten-Snapshot. Falls nicht angegeben, wird der Screenshot des Ansichtsfensters erstellt. Wenn ref angegeben ist, muss auch das Element angegeben werden.
- Schreibgeschützt: true
- browser_pdf_save
- Titel: Als PDF speichern
- Beschreibung: Seite als PDF speichern
- Parameter:
filename
(Zeichenfolge, optional): Dateiname, in dem die PDF-Datei gespeichert werden soll. Der Standardwert istpage-{timestamp}.pdf
wenn nicht anders angegeben.
- Schreibgeschützt: true
- Browser-Netzwerkanforderungen
- Titel: Netzwerkanfragen auflisten
- Beschreibung: Gibt alle Netzwerkanfragen seit dem Laden der Seite zurück
- Parameter: Keine
- Schreibgeschützt: true
- Browser-Konsolennachrichten
- Titel: Konsolenmeldungen abrufen
- Beschreibung: Gibt alle Konsolenmeldungen zurück
- Parameter: Keine
- Schreibgeschützt: true
- Browserinstallation
- Titel: Installieren Sie den in der Konfiguration angegebenen Browser
- Beschreibung: Installiert den in der Konfiguration angegebenen Browser. Rufen Sie diese Option auf, wenn eine Fehlermeldung angezeigt wird, dass der Browser nicht installiert ist.
- Parameter: Keine
- Schreibgeschützt: false
- browser_close
- Titel: Browser schließen
- Beschreibung: Seite schließen
- Parameter: Keine
- Schreibgeschützt: true
- Browsergröße ändern
- Titel: Browserfenstergröße ändern
- Beschreibung: Größe des Browserfensters ändern
- Parameter:
width
(Zahl): Breite des Browserfenstersheight
(Zahl): Höhe des Browserfensters
- Schreibgeschützt: true
- Browser-Tab-Liste
- Titel: Listenregisterkarten
- Beschreibung: Browser-Tabs auflisten
- Parameter: Keine
- Schreibgeschützt: true
- Browser-Tab neu
- Titel: Einen neuen Tab öffnen
- Beschreibung: Neue Registerkarte öffnen
- Parameter:
url
(Zeichenfolge, optional): Die URL, zu der im neuen Tab navigiert werden soll. Wenn keine URL angegeben wird, ist der neue Tab leer.
- Schreibgeschützt: true
- Browser-Tab-Auswahl
- Titel: Wählen Sie eine Registerkarte
- Beschreibung: Wählen Sie eine Registerkarte nach Index aus
- Parameter:
index
(Zahl): Der Index der auszuwählenden Registerkarte
- Schreibgeschützt: true
- Browser-Tab schließen
- Titel: Einen Tab schließen
- Beschreibung: Schließen Sie einen Tab
- Parameter:
index
(Zahl, optional): Der Index der zu schließenden Registerkarte. Schließt die aktuelle Registerkarte, falls nicht angegeben.
- Schreibgeschützt: false
- Browser_Generieren_Playwright_Test
- Titel: Generieren Sie einen Playwright-Test
- Beschreibung: Generieren Sie einen Playwright-Test für ein bestimmtes Szenario
- Parameter:
name
(Zeichenfolge): Der Name des Testsdescription
(Zeichenfolge): Die Beschreibung des Testssteps
(Array): Die Schritte des Tests
- Schreibgeschützt: true
- Browser-Bildschirmaufnahme
- Titel: Machen Sie einen Screenshot
- Beschreibung: Machen Sie einen Screenshot der aktuellen Seite
- Parameter: Keine
- Schreibgeschützt: true
- Browser-Bildschirm_Maus bewegen
- Titel: Maus bewegen
- Beschreibung: Maus an eine bestimmte Position bewegen
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenx
(Zahl): X-Koordinatey
(Zahl): Y-Koordinate
- Schreibgeschützt: true
- Browser-Bildschirmklick
- Titel: Klick
- Beschreibung: Klicken Sie mit der linken Maustaste
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenx
(Zahl): X-Koordinatey
(Zahl): Y-Koordinate
- Schreibgeschützt: false
- Browser-Bildschirm ziehen
- Titel: Maus ziehen
- Beschreibung: Linke Maustaste ziehen
- Parameter:
element
(Zeichenfolge): Für Menschen lesbare Elementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhaltenstartX
(Zahl): Start-X-KoordinatestartY
(Zahl): Start-Y-KoordinateendX
(Zahl): End-X-KoordinateendY
(Zahl): Y-Endkoordinate
- Schreibgeschützt: false
- Browser-Bildschirmtyp
- Titel: Text eingeben
- Beschreibung: Geben Sie Text ein
- Parameter:
text
(Zeichenfolge): Text, der in das Element eingegeben werden sollsubmit
(Boolesch, optional): Ob eingegebener Text abgesendet werden soll (nachher die Eingabetaste drücken)
- Schreibgeschützt: false
- Browser_Press_Key
- Titel: Drücken Sie eine Taste
- Beschreibung: Drücken Sie eine Taste auf der Tastatur
- Parameter:
key
(string): Name der zu drückenden Taste oder eines zu generierenden Zeichens, wie etwaArrowLeft
odera
- Schreibgeschützt: false
- Browser_wait_for
- Titel: Warten auf
- Beschreibung: Warten Sie, bis Text erscheint oder verschwindet oder eine bestimmte Zeit vergeht
- Parameter:
time
(Zahl, optional): Die Wartezeit in Sekundentext
(Zeichenfolge, optional): Der Text, auf den gewartet werden solltextGone
(Zeichenfolge, optional): Der Text, auf dessen Verschwinden gewartet werden soll
- Schreibgeschützt: true
- Browser-Datei-Upload
- Titel: Dateien hochladen
- Beschreibung: Eine oder mehrere Dateien hochladen
- Parameter:
paths
(Array): Die absoluten Pfade zu den hochzuladenden Dateien. Kann eine einzelne oder mehrere Dateien sein.
- Schreibgeschützt: false
- Browser-Handle-Dialog
- Titel: Einen Dialog führen
- Beschreibung: Behandeln eines Dialogs
- Parameter:
accept
(Boolesch): Ob der Dialog akzeptiert werden soll.promptText
(Zeichenfolge, optional): Der Text der Eingabeaufforderung im Falle eines Eingabeaufforderungsdialogs.
- Schreibgeschützt: false
local-only server
The server can only run on the client's local machine because it depends on local resources.
Ein Model Context Protocol-Server, der es LLMs ermöglicht, über strukturierte Zugänglichkeits-Snapshots mit Webseiten zu interagieren, ohne dass Vision-Modelle oder Screenshots erforderlich sind.
Related MCP Servers
- -securityAlicense-qualityA Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.Last updated -PythonMIT License
- -securityFlicense-qualityA Model Context Protocol server that enables LLMs to fetch and process web content in multiple formats (HTML, JSON, Markdown, text) with automatic format detection.Last updated -TypeScript
- AsecurityAlicenseAqualityA Model Context Protocol server that enables LLMs to interact with web pages, take screenshots, generate test code, scrape web pages, and execute JavaScript in a real browser environment.Last updated -29101TypeScriptMIT License
- AsecurityAlicenseAqualityA Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or vision models.Last updated -2170,036TypeScriptApache 2.0