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.
Tools
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 -1MIT License
- AsecurityFlicenseAqualityA 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 -54
- 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 -291212MIT License
- -securityAlicense-qualityA Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots, providing browser automation capabilities without requiring screenshots or visually-tuned models.Last updated -2Apache 2.0