Cloudflare Playwright MCP

Cloudflare Playwright MCP

Überblick

Dieses Projekt nutzt Playwright für automatisierte Browsertests und lässt sich für die Bereitstellung in Cloudflare Workers, Browser Rendering und @cloudflare/playwright integrieren.

Erstellen und Bereitstellen

Führen Sie die folgenden Schritte aus, um das Projekt einzurichten und bereitzustellen:

1. Installieren Sie Abhängigkeiten:

2. Bauen:

3. Bereitstellung für Cloudflare Workers:

Verwendung mit Cloudflare AI Playground

Cloudflare Playground AI ist eine großartige Möglichkeit, MCP-Server mithilfe der in Workers AI verfügbaren LLM-Modelle zu testen.

• Navigieren Sie zu https://playground.ai.cloudflare.com/
• Stellen Sie sicher, dass das Modell auf llama-3.3-70b-instruct-fp8-fast eingestellt ist
• Legen Sie in MCP-Servern die URL auf https://[my-mcp-url].workers.dev/sse
• Klicken Sie auf Verbinden
• Der Status sollte auf „Verbunden“ aktualisiert werden und es sollten 14 verfügbare Tools aufgelistet sein.

Sie können jetzt mit der Interaktion mit dem Modell beginnen und es führt die erforderlichen Tools aus, um die gewünschten Aufgaben zu erledigen.

[!TIP] Um optimale Ergebnisse zu erzielen, geben Sie einfache Anweisungen, die aus einer einzigen Aktion bestehen, z. B. „Erstellen Sie einen neuen To-do-Eintrag“, „Gehen Sie zur Cloudflare-Site“, „Machen Sie einen Screenshot“.

Beispiel für ein Gespräch:

Verwendung mit Claude Desktop

Claude Desktop unterstützt derzeit nur lokale MCP-Server. Um playground-mcp mit Claude Desktop zu verwenden, verwenden wir mcp-remote , ein Tool, das Remote-MCP-Server proxisiert und lokal verfügbar macht. Verwenden Sie die folgende Konfiguration:

1. Öffnen Sie die Konfigurationsdatei für Claude Desktop.
2. Fügen Sie den folgenden JSON-Ausschnitt unter dem Abschnitt mcpServers hinzu:

3. Speichern Sie die Konfigurationsdatei und starten Sie Claude Desktop neu, um die Änderungen zu übernehmen.

Dieses Setup stellt sicher, dass Claude Desktop mit dem Cloudflare Playwright MCP-Server kommunizieren kann.

Hier ist ein Beispiel für eine Sitzung, in der die TODO-Demo-App geöffnet, „Zitronen kaufen“ hinzugefügt und ein Screenshot erstellt wird, wobei die Playwright-MCP-Tools und das Browser-Rendering genutzt werden:

In VSCode konfigurieren

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

Werkzeugmodi

Die Tools sind in zwei Modi verfügbar:

1. Snapshot-Modus (Standard): Verwendet Zugänglichkeits-Snapshots für bessere Leistung und Zuverlässigkeit
2. Vision-Modus : Verwendet Screenshots für visuell basierte Interaktionen

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
  • Beschreibung: Erfassen Sie einen Barrierefreiheits-Schnappschuss der aktuellen Seite. Dies ist besser als ein Screenshot.
  • Parameter: Keine
• Browserklick
  • 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
• browser_drag
  • 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
• browser_hover
  • 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
• Browsertyp
  • 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.
• Browserauswahloption
  • 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.
• Browser_Machen_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. Wenn 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.

Sichtbasierte Interaktionen

• Browser-Bildschirmaufnahme
  • Beschreibung: Machen Sie einen Screenshot der aktuellen Seite
  • Parameter: Keine
• Browser-Bildschirm_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
• Browser-Bildschirmklick
  • 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
• Browser-Bildschirm 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
• Browser-Bildschirmtyp
  • 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)

Registerkartenverwaltung

• Browser-Tab-Liste
  • Beschreibung: Browser-Tabs auflisten
  • Parameter: Keine
• Browser-Tab neu
  • 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.
• Browser-Tab-Auswahl
  • Beschreibung: Wählen Sie eine Registerkarte nach Index aus
  • Parameter:
    • index (Zahl): Der Index der auszuwählenden Registerkarte
• Browser-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.

Navigation

• browser_navigate
  • Beschreibung: Navigieren Sie zu einer URL
  • Parameter:
    • url (Zeichenfolge): Die URL, zu der navigiert werden soll
• browser_navigate_back
  • Beschreibung: Zurück zur vorherigen Seite
  • Parameter: Keine
• Browser_Navigate_Forward
  • Beschreibung: Weiter zur nächsten Seite
  • Parameter: Keine

Tastatur

• Browser_Press_Key
  • Beschreibung: Drücken Sie eine Taste auf der Tastatur
  • Parameter:
    • key (string): Name der zu drückenden Taste oder eines zu generierenden Zeichens, wie beispielsweise ArrowLeft oder a

Konsole

• Browser-Konsolennachrichten
  • Beschreibung: Gibt alle Konsolenmeldungen zurück
  • Parameter: Keine

Dateien und Medien

• Browser-Datei-Upload
  • Beschreibung: Eine oder mehrere Dateien hochladen
  • Parameter:
    • paths (Array): Die absoluten Pfade zu den hochzuladenden Dateien. Kann eine einzelne oder mehrere Dateien sein.
• browser_pdf_save
  • Beschreibung: Seite als PDF speichern
  • Parameter: Keine

Dienstprogramme

• browser_close
  • Beschreibung: Seite schließen
  • Parameter: Keine
• Browser_wait
  • Beschreibung: Warten Sie eine angegebene Zeit in Sekunden
  • Parameter:
    • time (Zahl): Die Wartezeit in Sekunden
• Browsergröße ändern
  • Beschreibung: Größe des Browserfensters ändern
  • Parameter:
    • width (Zahl): Breite des Browserfensters
    • height (Zahl): Höhe des Browserfensters
• Browser-Handle-Dialog
  • Beschreibung: Behandeln eines Dialogs
  • Parameter:
    • accept (Boolesch): Ob der Dialog akzeptiert werden soll.
    • promptText (Zeichenfolge, optional): Der Text der Eingabeaufforderung im Falle eines Eingabeaufforderungsdialogs.