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:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}Sie können den Playwright MCP-Server auch mithilfe der VS Code CLI installieren:
# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'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.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}Befolgen Sie die Windsuff MCP- Dokumentation . Verwenden Sie die folgende Konfiguration:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}Folgen Sie der MCP- Installationsanleitung und verwenden Sie die folgende Konfiguration:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}Konfiguration
Der Playwright MCP-Server unterstützt folgende Argumente. Sie können in der obigen JSON-Konfiguration als Teil der "args" -Liste angegeben werden:
> npx @playwright/mcp@latest --help
--allowed-origins <origins> semicolon-separated list of origins to allow the
browser to request. Default is to allow all.
--blocked-origins <origins> semicolon-separated list of origins to block the
browser from requesting. Blocklist is evaluated
before allowlist. If used without the allowlist,
requests not matching the blocklist are still
allowed.
--block-service-workers block service workers
--browser <browser> browser or chrome channel to use, possible
values: chrome, firefox, webkit, msedge.
--caps <caps> comma-separated list of capabilities to enable,
possible values: tabs, pdf, history, wait, files,
install. Default is all.
--cdp-endpoint <endpoint> CDP endpoint to connect to.
--config <path> path to the configuration file.
--device <device> device to emulate, for example: "iPhone 15"
--executable-path <path> path to the browser executable.
--headless run browser in headless mode, headed by default
--host <host> host to bind server to. Default is localhost. Use
0.0.0.0 to bind to all interfaces.
--ignore-https-errors ignore https errors
--isolated keep the browser profile in memory, do not save
it to disk.
--no-image-responses do not send image responses to the client.
--no-sandbox disable the sandbox for all process types that
are normally sandboxed.
--output-dir <path> path to the directory for output files.
--port <port> port to listen on for SSE transport.
--proxy-bypass <bypass> comma-separated domains to bypass proxy, for
example ".com,chromium.org,.domain.com"
--proxy-server <proxy> specify proxy server, for example
"http://myproxy:3128" or "socks5://myproxy:8080"
--save-trace Whether to save the Playwright Trace of the
session into the output directory.
--storage-state <path> path to the storage state file for isolated
sessions.
--user-agent <ua string> specify user agent string
--user-data-dir <path> path to the user data directory. If not
specified, a temporary directory will be created.
--viewport-size <size> specify browser viewport size in pixels, for
example "1280, 720"
--vision Run server that uses screenshots (Aria snapshots
are used by default)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.
# Windows
%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile
# macOS
- ~/Library/Caches/ms-playwright/mcp-{channel}-profile
# Linux
- ~/.cache/ms-playwright/mcp-{channel}-profileIsoliert
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 .
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--isolated",
"--storage-state={path/to/storage.json}
]
}
}
}Konfigurationsdatei
Der Playwright MCP-Server kann mithilfe einer JSON-Konfigurationsdatei konfiguriert werden. Sie können die Konfigurationsdatei mit der Befehlszeilenoption --config angeben:
npx @playwright/mcp@latest --config path/to/config.json{
// Browser configuration
browser?: {
// Browser type to use (chromium, firefox, or webkit)
browserName?: 'chromium' | 'firefox' | 'webkit';
// Keep the browser profile in memory, do not save it to disk.
isolated?: boolean;
// Path to user data directory for browser profile persistence
userDataDir?: string;
// Browser launch options (see Playwright docs)
// @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
launchOptions?: {
channel?: string; // Browser channel (e.g. 'chrome')
headless?: boolean; // Run in headless mode
executablePath?: string; // Path to browser executable
// ... other Playwright launch options
};
// Browser context options
// @see https://playwright.dev/docs/api/class-browser#browser-new-context
contextOptions?: {
viewport?: { width: number, height: number };
// ... other Playwright context options
};
// CDP endpoint for connecting to existing browser
cdpEndpoint?: string;
// Remote Playwright server endpoint
remoteEndpoint?: string;
},
// Server configuration
server?: {
port?: number; // Port to listen on
host?: string; // Host to bind to (default: localhost)
},
// List of enabled capabilities
capabilities?: Array<
'core' | // Core browser automation
'tabs' | // Tab management
'pdf' | // PDF generation
'history' | // Browser history
'wait' | // Wait utilities
'files' | // File handling
'install' | // Browser installation
'testing' // Testing
>;
// Enable vision mode (screenshots instead of accessibility snapshots)
vision?: boolean;
// Directory for output files
outputDir?: string;
// Network configuration
network?: {
// List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
allowedOrigins?: string[];
// List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
blockedOrigins?: string[];
};
/**
* Do not send image responses to the client.
*/
noImageResponses?: boolean;
}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.
npx @playwright/mcp@latest --port 8931Und dann legen Sie in der MCP-Clientkonfiguration die url zum SSE-Endpunkt fest:
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/sse"
}
}
}HINWEIS: Die Docker-Implementierung unterstützt derzeit nur Headless-Chromium.
{
"mcpServers": {
"playwright": {
"command": "docker",
"args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"]
}
}
}Sie können das Docker-Image selbst erstellen.
docker build -t mcr.microsoft.com/playwright/mcp .import http from 'http';
import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';
http.createServer(async (req, res) => {
// ...
// Creates a headless Playwright MCP server with SSE transport
const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
const transport = new SSEServerTransport('/messages', res);
await connection.connect(transport);
// ...
});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:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--vision"
]
}
}
}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 etwaArrowLeftodera
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}.pdfwenn 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 etwaArrowLeftodera
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