Playwright MCP-Server

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.

Anwendungsfälle

Webnavigation und Formularausfüllen
Datenextraktion aus strukturierten Inhalten
Automatisiertes Testen durch LLMs
Allgemeine Browserinteraktion für Agenten

Beispielkonfiguration

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

Installation in VS Code

Sie können den Playwright MCP-Server 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.

Befehlszeile

Der Playwright MCP-Server unterstützt die folgenden Befehlszeilenoptionen:

--browser <browser> : Zu verwendender Browser- oder Chrome-Kanal. Mögliche Werte:
- chrome , firefox , webkit , msedge
- Chrome-Kanäle: chrome-beta , chrome-canary , chrome-dev
- Edge-Kanäle: msedge-beta , msedge-canary , msedge-dev
- Standard: chrome
--caps <caps> : Kommagetrennte Liste der zu aktivierenden Funktionen. Mögliche Werte: tabs, pdf, history, wait, files, install. Standardmäßig ist „alles“ eingestellt.
--cdp-endpoint <endpoint> : CDP-Endpunkt, mit dem eine Verbindung hergestellt werden soll
--executable-path <path> : Pfad zur ausführbaren Datei des Browsers
--headless : Browser im Headless-Modus ausführen (standardmäßig mit Headless-Modus)
--device : Mobiles Gerät emulieren
--user-data-dir <path> : Pfad zum Benutzerdatenverzeichnis
--port <port> : Port, auf dem auf SSE-Transport gewartet wird
--host <host> : Host, an den der Server gebunden werden soll. Standard ist localhost. Verwenden Sie 0.0.0.0 für die Bindung an alle Schnittstellen.
--allowed-origins <origins> : Semikolon-getrennte Liste der Ursprünge, die der Browser anfordern darf. Standardmäßig sind alle zulässig. Ursprünge, die sowohl --allowed-origins als auch --blocked-origins übereinstimmen, werden blockiert.
--blocked-origins <origins> : Durch Semikolon getrennte Liste von Ursprüngen, deren Anforderung vom Browser blockiert werden soll. Ursprünge, die sowohl --allowed-origins als auch --blocked-origins übereinstimmen, werden blockiert.
--vision : Server ausführen, der Screenshots verwendet (standardmäßig werden Aria-Snapshots verwendet)
--output-dir : Verzeichnis für Ausgabedateien
--config <path> : Pfad zur Konfigurationsdatei

Benutzerprofil

Playwright MCP startet den Browser mit dem neuen Profil unter

- `%USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile` on Windows
- `~/Library/Caches/ms-playwright/mcp-{channel}-profile` on macOS
- `~/.cache/ms-playwright/mcp-{channel}-profile` on Linux

Alle angemeldeten Informationen werden in diesem Profil gespeichert. Sie können sie zwischen den Sitzungen löschen, wenn Sie den Offline-Status aufheben möchten.

Konfigurationsdatei

Der Playwright MCP-Server kann mithilfe einer JSON-Konfigurationsdatei konfiguriert werden. Hier ist das vollständige Konfigurationsformat:

{
  // Browser configuration
  browser?: {
    // Browser type to use (chromium, firefox, or webkit)
    browserName?: 'chromium' | 'firefox' | 'webkit';

    // 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[];
  };

  // Tool-specific configurations
  tools?: {
    browser_take_screenshot?: {
      // Disable base64-encoded image responses
      omitBase64?: boolean;
    }
  }
}

Sie können die Konfigurationsdatei mit der Befehlszeilenoption --config angeben:

npx @playwright/mcp@latest --config path/to/config.json

Ausführung unter Linux

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 8931

Und dann legen Sie in der MCP-Clientkonfiguration die url zum SSE-Endpunkt fest:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

Docker

HINWEIS: Die Docker-Implementierung unterstützt derzeit nur Headless-Chromium.

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "mcp/playwright"]
    }
  }
}

Sie können das Docker-Image selbst erstellen.

docker build -t mcp/playwright .

Programmatische Nutzung

import http from 'http';

import { createServer } 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 mcpServer = await createServer({ headless: true });
  const transport = new SSEServerTransport('/messages', res);
  await mcpServer.connect(transport);

  // ...
});

Werkzeugmodi

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.

Snapshot-basierte Interaktionen

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 erhalten
  - ref (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 erhalten
  - startRef (Zeichenfolge): Genaue Quellelementreferenz aus dem Seiten-Snapshot
  - endElement (Zeichenfolge): Für Menschen lesbare Zielelementbeschreibung, die verwendet wird, um die Berechtigung zur Interaktion mit dem Element zu erhalten
  - endRef (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 erhalten
  - ref (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 erhalten
  - ref (Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshot
  - text (Zeichenfolge): Text, der in das Element eingegeben werden soll
  - submit (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 erhalten
  - ref (Zeichenfolge): Genaue Zielelementreferenz aus dem Seiten-Snapshot
  - values (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_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.
  - 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

Sichtbasierte Interaktionen

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 erhalten
  - x (Zahl): X-Koordinate
  - y (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 erhalten
  - x (Zahl): X-Koordinate
  - y (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 erhalten
  - startX (Zahl): Start-X-Koordinate
  - startY (Zahl): Start-Y-Koordinate
  - endX (Zahl): End-X-Koordinate
  - endY (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 soll
  - submit (Boolesch, optional): Ob eingegebener Text abgesendet werden soll (nachher die Eingabetaste drücken)
- Schreibgeschützt: false

Registerkartenverwaltung

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_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

Tastatur

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 etwa ArrowLeft oder a
- Schreibgeschützt: false

Konsole

Browser-Konsolennachrichten
- Titel: Konsolenmeldungen abrufen
- Beschreibung: Gibt alle Konsolenmeldungen zurück
- Parameter: Keine
- Schreibgeschützt: true

Dateien und Medien

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_pdf_save
- Titel: Als PDF speichern
- Beschreibung: Seite als PDF speichern
- Parameter: Keine
- Schreibgeschützt: true

Dienstprogramme

browser_close
- Titel: Browser schließen
- Beschreibung: Seite schließen
- Parameter: Keine
- Schreibgeschützt: true
Browser_wait
- Titel: Warten
- Beschreibung: Warten Sie eine angegebene Zeit in Sekunden
- Parameter:
  - time (Zahl): Die Wartezeit in Sekunden
- Schreibgeschützt: true
Browsergröße ändern
- Titel: Browserfenstergröße ändern
- Beschreibung: Größe des Browserfensters ändern
- Parameter:
  - width (Zahl): Breite des Browserfensters
  - height (Zahl): Höhe des Browserfensters
- 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-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-Netzwerkanforderungen
- Titel: Netzwerkanfragen auflisten
- Beschreibung: Gibt alle Netzwerkanfragen seit dem Laden der Seite zurück
- Parameter: Keine
- Schreibgeschützt: true

Testen

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 Tests
  - description (Zeichenfolge): Die Beschreibung des Tests
  - steps (Array): Die Schritte des Tests
- Schreibgeschützt: true

Playwright MCP Server

Integrations