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

Allgemeine Einführung

MCP-Playwright ist ein Open-Source-Tool, das von ExecuteAutomation entwickelt und auf GitHub gehostet wird. Es basiert auf Playwright und Modell-Kontext-Protokoll (MCP) mit dem Ziel, den Benutzern die Möglichkeit zu geben, Browser-Automatisierung und API-Tests durch natürlichsprachliche Befehle zu implementieren. Dieses Tool ist sowohl für Entwickler als auch für Tester geeignet und kann Folgendes verbinden Claude und andere große Sprachmodelle (LLMs), um Browseraktionen wie das Öffnen einer Webseite, das Anklicken einer Schaltfläche, das Ausfüllen eines Formulars, das Erstellen eines Screenshots oder das Senden einer API-Anfrage durch einfachen Text zu steuern. Die Benutzer müssen keinen komplexen Code schreiben, was die Schwelle für die Nutzung senkt. Das Projekt befindet sich derzeit in der Entwicklungsphase, die Funktion wird schrittweise verbessert, die Community ist eingeladen, Code beizusteuern.

Funktionsliste

• Browser-AutomatisierungUnterstützung bei der Navigation zu einer bestimmten Webseite, beim Klicken auf ein Element, beim Ausfüllen eines Eingabefeldes, bei der Auswahl einer Dropdown-Option usw.
• API-TestsKann GET-, POST-, PUT-, PATCH- und DELETE-Anfragen senden und die Antwort überprüfen.
• Bildschirmfoto-FunktionDie gesamte Webseite oder ein bestimmter Bereich kann abgefangen und als Bild gespeichert werden.
• Ausführen von JavaScriptDie Möglichkeit, benutzerdefinierten JavaScript-Code im Browser auszuführen.
• Abrufen des KonsolenprotokollsExtrahiert Fehler-, Warn- oder Debugging-Informationen aus dem Browser.
• natürliche SprachsteuerungVerbindung zu Modellen wie Claude über das MCP-Protokoll und Betrieb mit Textbefehlen.

Hilfe verwenden

MCP-Playwright erfordert eine einfache Installation und Konfiguration, um zu funktionieren. Im Folgenden finden Sie detaillierte Schritte, die Ihnen helfen, schnell loszulegen.

Einbauverfahren

Um dieses Tool auszuführen, müssen Sie die Umgebung vorbereiten und die entsprechenden Komponenten installieren. Nachstehend finden Sie die Einzelheiten dazu:

1. Überprüfung der Umgebung
   • Stellen Sie sicher, dass auf Ihrem Computer Node.js installiert ist (die neueste stabile Version wird empfohlen).
   • Ein MCP-fähiger Client, wie z. B. Claude Desktop Client, ist erforderlich.
   • Installieren Sie Git zum Herunterladen von Code (optional).
2. Projekt herunterladen (optionale manuelle Installation)
   • Öffnen Sie ein Terminal und führen Sie es aus:

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • Rufen Sie den Projektkatalog auf:

     cd mcp-playwright
     

3. Installation von Abhängigkeiten
   • Im Projektverzeichnis ausführen:

     npm install
     

   • Dadurch werden Playwright und andere erforderliche Komponenten installiert.
4. Direkt über npm installieren (empfohlen)
   • Wenn Sie es nicht manuell herunterladen möchten, können Sie es einfach ausführen:

     npm install -g @executeautomation/playwright-mcp-server
     

   • Dadurch wird der Server global installiert.
5. Installation über Smithery (für Claude Desktop)
   • Führen Sie den folgenden Befehl aus, um es automatisch zu installieren und zu konfigurieren:

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Claude Desktop konfigurieren
   • Suchen Sie die Konfigurationsdatei für Claude Desktop (normalerweise im Ordner Claude im Benutzerverzeichnis unter dem Dateinamen claude-desktop-config.json).
   • Fügen Sie Folgendes hinzu:

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • Nach dem Speichern und dem Neustart von Claude Desktop erscheint auf der Oberfläche die Schaltfläche "Attach from MCP", die anzeigt, dass die Konfiguration erfolgreich war.

Wie zu verwenden

Nach der Installation können Sie Befehle in natürlicher Sprache verwenden, um den Browser zu steuern oder die API zu testen.

Browser-Automatisierung

• Öffnen Sie die Seite
  Geben Sie bei Claude Desktop ein:

打开网页 https://example.com

Das Tool startet den Browser und lädt die Seite.

• Anklicken eines Elements
  Eingabe:

点击页面上的登录按钮，使用选择器 #loginBtn

Es findet die ID loginBtn und klicken Sie darauf.

• Füllen Sie das Formular aus
  Eingabe:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

Das Tool füllt den Inhalt automatisch aus.

• Bildschirmfoto (Computertechnik)
  Eingabe:

截取整个网页，保存为 "page.png"

Das Bildschirmfoto wird im aktuellen Verzeichnis gespeichert.

• Laufendes JavaScript
  Eingabe:

在浏览器中执行 JavaScript 代码 "document.title"

Gibt den Seitentitel zurück.

• Logs abrufen
  Eingabe:

获取浏览器控制台日志，只显示错误信息

Das Tool liefert ein Fehlerprotokoll.

API-Tests

• GET-Anfrage senden
  Eingabe:

对 https://api.example.com/data 发送 GET 请求

Gibt den Statuscode und die Daten zurück.

• POST-Anfrage senden
  Eingabe:

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

Das Tool wird die Ergebnisse validieren.

• Aktualisierte Daten
  Eingabe:

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

Die Daten werden aktualisiert.

Betriebsbeispiel

Angenommen, Sie wollen einen Anmeldevorgang testen:

1. Eingabe:

打开网页 http://eaapp.somee.com

2. Eingabe:

点击页面上的登录链接，使用选择器 #loginLink

3. Eingabe:

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. Eingabe:

截取整个网页，保存为 "login_result.png"

5. Eingabe:

关闭浏览器

Der gesamte Prozess wird über natürliche Sprache abgewickelt und ist einfach und intuitiv.

Test-Tools

Das Projekt verwendet Jest zum Testen. Wenn Sie die Funktionalität überprüfen möchten, können Sie Tests durchführen:

• Geben Sie ihn in das Terminal ein:

npm test

• Bericht zur Bandabdeckung:

  npm run test:coverage
  

Der Prüfbericht wird in der coverage Katalog.

caveat

• Komplexe Authentifizierungsanfragen (z. B. OAuth) werden derzeit von dem Tool nicht unterstützt.
• Wenn Sie auf Probleme stoßen, lesen Sie die offizielle Dokumentation unter https://executeautomation.github.io/mcp-playwright/.
• Das Projekt ist Open Source, Sie können es abspalten und Verbesserungsvorschläge einreichen.