Playwright MCP: Browser-Automatisierungs-MCP-Dienst von Microsoft

Allgemeine Einführung

Dramatiker MCP ist ein Open-Source-Tool, das von Microsoft entwickelt und auf GitHub gehostet wird. Es ermöglicht KI-Modellen die direkte Steuerung von Browsern durch das Öffnen von Webseiten, das Anklicken von Elementen, die Eingabe von Text usw. über das Model Context Protocol (MCP)-Protokoll. Das Tool basiert auf dem Playwright-Framework und unterstützt Browser wie Chromium, Firefox und WebKit. Playwright MCP eignet sich besonders gut für KI-Anwendungen, die eine Interaktion mit Webseiten erfordern, wie z. B. automatisierte Tests oder Datenextraktion. Die offizielle Dokumentation wird bis März 2025 aktualisiert, und das Projekt ist aktiv und bei Entwicklern beliebt.

Gleichnamiges Projekt:MCP Playwright: ein MCP-Dienst, der Browser-Automatisierungsvorgänge bereitstellt

Funktionsliste

• Unterstützung der Browser-Steuerung: Möglichkeit, Webseiten zu öffnen, durch Seiten zu navigieren, auf Elemente zu klicken, usw.
• Strukturierte Daten generieren: Ausgabe von Daten über Erreichbarkeits-Snapshots, keine Screenshots erforderlich.
• Es stehen zwei Modi zur Verfügung: der Standard-Schnappschuss-Modus und der Vision-Modus.
• Screenshot und Speichern: Sie können einen Screenshot von einer Seite machen oder sie als PDF-Datei speichern.
• Eingabe und Bedienung: Unterstützt Texteingabe, Tastatureingabe, Drag and Drop und andere Funktionen.
• Kompatibel mit dem Headless-Modus: Sie können den Browser im Hintergrund laufen lassen, ohne dass die Oberfläche angezeigt wird.

Hilfe verwenden

Der Playwright MCP ist einfach zu installieren und zu verwenden. Im Folgenden finden Sie eine ausführliche Beschreibung der Installation und des Betriebs dieses Tools, einschließlich der spezifischen Funktionen der beiden Modi.

Einbauverfahren

1. Vorbereiten der Umgebung
   Installieren Sie zunächst Node.js (die neueste LTS-Version wird empfohlen, z. B. v22). Überprüfen Sie die Version mit:

node -v

Wenn Sie es nicht haben, besuchen Sie die offizielle Node.js-Website, um es herunterzuladen und zu installieren.

2. Installieren des Playwright MCP
   Führen Sie den folgenden Befehl im Terminal aus:

npm install -g @playwright/mcp

Oder verwenden Sie einfach die neueste Version:

npx @playwright/mcp@latest

3. Starten Sie den Server
   Geben Sie den Befehl zum Starten ein:

npx @playwright/mcp@latest

Die Standardeinstellung ist der Kopfzeilenmodus (Anzeige des Browserfensters). Wenn Sie den Modus ohne Kopfzeile verwenden möchten, fügen Sie den Parameter hinzu:

npx @playwright/mcp@latest --headless

4. Den AI-Client konfigurieren
   Wenn Ihr AI-Tool MCP unterstützt (z. B. einige große Modellclients), müssen Sie die Konfigurationsdatei bearbeiten. Beispiel:

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

Nach dem Speichern kann die KI den Browser über den MCP aufrufen.

5. Konfiguration für Nicht-Monitor-Umgebungen
   In einer Linux-Umgebung ohne Monitor können Sie den Client-Server-Modus verwenden. Führen Sie ihn zunächst auf einem Rechner mit einem Monitor aus:

npx playwright run-server

Die Ausgabe zeigt eine WebSocket-Adresse, z. B. ws://localhost:port/. und dann in die MCP-Konfiguration aufgenommen:

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Verwendung der wichtigsten Funktionen

Playwright MCP verfügt über zwei Modi: den Snapshot-Modus und den visuellen Modus. Sie werden im Folgenden separat beschrieben.

Schnappschuss-Modus (Standard)

Dieser Modus arbeitet mit zugänglichen Snapshots, die schnell und stabil sind. Nachfolgend sind die häufig verwendeten Werkzeuge aufgeführt:

1. Öffnen Sie die Seite

• Anweisungen:browser_navigate "https://example.com"
• Aktion: Der Browser öffnet die angegebene URL.
• Ausgabe: Gibt den Ladestatus der Seite zurück.

2. Anklicken eines Elements

• Anweisungen:browser_click "登录按钮" "ref123"
• Aktion: Klicken Sie auf den Schnappschuss mit der Markierung ref123 des Elements (Elementbeschreibung und -zitat erforderlich).
• Anmerkung: Die Referenzen stammen aus Momentaufnahmen.

3. Eingabe

• Anweisungen:browser_type "用户名输入框" "ref456" "myuser" true
• Betrieb: In der ref456 in das Eingabefeld ein, und drücken Sie dann die Eingabetaste (true (zeigt die Einreichung an).

4. Als PDF speichern

• Anweisungen:browser_save_as_pdf
• Aktion: Speichert die aktuelle Seite als PDF-Datei.

5. Wartezeit

• Anweisungen:browser_wait 5
• Bedienung: 5 Sekunden warten (maximal 10 Sekunden).

visuelles Muster

Grundierung mit --vision Parameter:

npx @playwright/mcp@latest --vision

Dieses Modell arbeitet mit Screenshots und Koordinaten und ist für visuelle Modelle geeignet. Häufig verwendete Werkzeuge:

1. Seite abfangen
   • Anweisungen:browser_screenshot
   • Aktion: Erstellen Sie einen Screenshot der aktuellen Seite.
2. Klicken Sie auf die Koordinaten
   • Anweisungen:browser_click 100 200
   • Aktion: Klicken Sie auf die Koordinaten (100, 200).
3. Drag-and-Drop-Verfahren
   • Anweisungen:browser_drag 50 50 150 150
   • Aktion: Ziehen von (50, 50) nach (150, 150).
4. Eingabe
   • Anweisungen:browser_type "hello" true
   • Aktion: Geben Sie "hallo" ein und drücken Sie die Eingabetaste.

Beispiel für den Betriebsablauf

Angenommen, Sie möchten sich bei der Website anmelden:

1. Starten Sie den Server:

npx @playwright/mcp@latest --headless

2. Öffnen Sie die Anmeldeseite:

• Anweisungen:browser_navigate "https://example.com/login"

3. Geben Sie den Benutzernamen und das Passwort ein (Snapshot-Modus):

• Anweisungen:browser_type "用户名" "ref1" "myuser" false
• Anweisungen:browser_type "密码" "ref2" "mypassword" true

4. Klicken Sie auf Anmeldung (visueller Modus):

• Umschalten des Modus: Neustart des Servers plus --vision
• Anweisungen:browser_click 300 400

5. Ergebnisse der Inspektion:

• Anweisungen:browser_snapshot(Schnappschuss-Modus) oder browser_screenshot(visueller Modus).

caveat

• Der Snapshot-Modus ist zuverlässiger als der visuelle Modus, erfordert aber Elementreferenzen.
• Das visuelle Modell ist für AI-Modelle mit Koordinaten geeignet.
• Der Modus ohne Kopfzeile ist für Batch-Aufgaben geeignet, und der Modus mit Kopfzeile erleichtert die Fehlersuche.

Anwendungsszenario

1. Webnavigation und Ausfüllen von Formularen
   Die KI öffnet automatisch Webseiten, füllt Formulare aus und sendet sie ab, so dass sie sich für Massenregistrierungen oder Anmeldetests eignet.
2. Datenextraktion
   Erfassen Sie strukturierte Daten von dynamischen Webseiten, z. B. Preise oder Bewertungen.
3. automatisierte Prüfung
   Prüfen Sie, ob die Seite ordnungsgemäß funktioniert, z. B. beim Anklicken von Schaltflächen oder bei Seitensprüngen.
4. Interaktion mit intelligenten Agenten
   Lassen Sie die KI den Browser bedienen, um komplexe Aufgaben zu erledigen, wie z. B. Online-Shopping.

QA

1. Was ist der Unterschied zwischen dem Schnappschussmodus und dem visuellen Modus?
   Der Snapshot-Modus arbeitet mit strukturierten Daten und ist schnell und stabil; der visuelle Modus verwendet Screenshots und Koordinaten und ist für visuelle KI geeignet.
2. Welche Browser werden unterstützt?
   Chromium, Firefox und WebKit werden unterstützt.
3. Sie müssen Code schreiben?
   Nicht nötig. Senden Sie einfach einen Befehl, und die KI wird funktionieren.