BrowserStack MCP Server-Integration

Was macht der “BrowserStack” MCP Server?

Der BrowserStack MCP Server ist ein Model Context Protocol (MCP) Server, der KI-Assistenten und Entwickler-Tools direkt mit der Cloud-basierten Testinfrastruktur von BrowserStack verbindet. Er ermöglicht Entwickler:innen und Tester:innen, Tests auf echten Geräten und Browsern aus ihren bevorzugten, KI-gestützten Workflows heraus zu automatisieren, zu verwalten und zu steuern. Der Server unterstützt Aufgaben wie das Starten manueller oder automatisierter Tests auf realen Geräten, das Debuggen von App-Abstürzen, das Testen von Websites in verschiedenen Browsern und die Integration fortschrittlicher App-Profilerstellung – alles über standardisierte MCP-Tools und Prompts. Durch die Verbindung von KI-Assistenten mit der leistungsstarken Testplattform von BrowserStack werden Testprozesse vereinfacht, Debugging verbessert und Entwicklungs-Workflows für manuelle Tester:innen und Automation Engineers beschleunigt.

Liste der Prompts

• “open my app on a iPhone 15 Pro Max”
  Startet Ihre mobile Anwendung auf einem bestimmten echten Gerät in der BrowserStack-Cloud.
• “My app crashed on Android 14 device, can you help me debug?”
  Initiert das Debugging und die Fehlerdiagnose für App-Abstürze auf einem spezifischen Gerät und OS.
• “open my website hosted on localhost:3001 on Edge”
  Öffnet eine lokale Website auf einem echten Browser/Gerät in der BrowserStack-Infrastruktur.

Liste der Ressourcen

• Geräte-Grid Ressource
  Bietet Zugriff auf die vollständige Liste verfügbarer echter Geräte und Browser/OS-Kombinationen in der BrowserStack-Cloud.
• App-Profiling-Daten
  Liefert Leistungs- und Profildaten aus echten Test-Sessions.
• Test-Session-Artefakte
  Stellt Protokolle, Screenshots und Videos bereit, die während Testsitzungen generiert wurden, zur weiteren Analyse.
• Geräte- & Browser-Dokumentation
  Verlinkt Dokumentationen zu verfügbaren Geräten, OS-Versionen und unterstützten Browsern.

Liste der Tools

Keine direkte Liste von Tools (wie aus server.py) ist in der verfügbaren Dokumentation oder im Code-Baum aufgeführt.

Anwendungsfälle dieses MCP Servers

• Manuelles App-Testing
  Öffnen und interagieren Sie sofort mit mobilen Apps auf einer Vielzahl echter Geräte, um reale Szenarien zu reproduzieren und zu debuggen – ganz ohne Emulatoren.
• App-Absturz-Debugging
  Nutzen Sie Profiling- und Diagnose-Tools, um App-Abstürze auf bestimmten Geräte/OS-Kombinationen in der BrowserStack-Cloud zu analysieren und zu beheben.
• Manuelles Web-Testing
  Testen Sie Websites auf echten Browsern und Geräten – einschließlich lokal gehosteter Seiten – und stellen Sie so Cross-Browser-Kompatibilität sicher, ohne Browser lokal installieren zu müssen.
• Automatisierte Test-Integration
  Integrieren Sie das Geräte- und Browser-Grid von BrowserStack in automatisierte QA-Flows und ermöglichen Sie kontinuierliches Testen im CI/CD-Prozess.
• Umfassende Geräteabdeckung
  Nutzen Sie das gesamte Spektrum aktueller Geräte und Browser, einschließlich brandneuer Hardware am Launch-Tag, um Ihre Testabdeckung zu erweitern und zu modernisieren.

So richten Sie es ein

Windsurf

1. Stellen Sie sicher, dass Node.js auf Ihrem System installiert ist.
2. Suchen Sie die Windsurf-Konfigurationsdatei.
3. Fügen Sie den BrowserStack MCP Server zum mcpServers-Objekt mit folgendem JSON-Snippet hinzu:

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

4. Speichern Sie die Konfiguration und starten Sie Windsurf neu.
5. Überprüfen Sie, ob der Server läuft und erreichbar ist.

Claude

1. Installieren Sie Node.js, falls noch nicht vorhanden.
2. Öffnen Sie die Integrations-/Konfigurationseinstellungen von Claude.
3. Fügen Sie den BrowserStack MCP Server wie folgt hinzu:

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

4. Änderungen speichern und Claude neu starten.
5. Prüfen Sie, ob der MCP-Server im Tool-Panel von Claude erreichbar ist.

Cursor

1. Überprüfen Sie, ob Node.js installiert ist.
2. Bearbeiten Sie die mcpServers-Konfiguration von Cursor.
3. Fügen Sie ein:

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

4. Starten Sie Cursor neu, um die neue Server-Konfiguration zu übernehmen.
5. Testen Sie die Integration, indem Sie einen Prompt ausführen und BrowserStack-Optionen prüfen.

Cline

1. Voraussetzung: Node.js muss installiert sein.
2. Navigieren Sie zu den Konfigurationsdateien von Cline.
3. Fügen Sie den MCP Server hinzu:

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

4. Speichern und starten Sie Cline neu.
5. Prüfen Sie die BrowserStack-Testmöglichkeiten in der Cline-Oberfläche.

API-Schlüssel sicher speichern

Um Ihre BrowserStack API-Schlüssel sicher zu speichern, verwenden Sie Umgebungsvariablen:

{
  "mcpServers": {
    "browserstack-mcp": {
      "command": "npx",
      "args": ["@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_API_KEY": "${BROWSERSTACK_API_KEY}"
      },
      "inputs": {
        "apiKey": "${BROWSERSTACK_API_KEY}"
      }
    }
  }
}

Ersetzen Sie "${BROWSERSTACK_API_KEY}" durch Ihre tatsächliche Umgebungsvariable oder einen Eintrag aus Ihrem Secret Manager.

So nutzen Sie dieses MCP in Flows

MCP in FlowHunt verwenden

Um MCP-Server in Ihren FlowHunt-Workflow zu integrieren, fügen Sie zunächst die MCP-Komponente zu Ihrem Flow hinzu und verbinden Sie sie mit Ihrem KI-Agenten:

Klicken Sie auf die MCP-Komponente, um das Konfigurationspanel zu öffnen. Fügen Sie im Bereich „System MCP Konfiguration“ Ihre MCP-Server-Details im folgenden JSON-Format ein:

{
  "browserstack-mcp": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

Nach der Konfiguration kann der KI-Agent dieses MCP nun als Tool mit Zugriff auf alle Funktionen und Möglichkeiten nutzen. Denken Sie daran, “browserstack-mcp” ggf. durch den tatsächlichen Namen Ihres MCP-Servers zu ersetzen und die URL durch Ihre eigene MCP-Server-Adresse auszutauschen.

Übersicht

Unsere Meinung

Der BrowserStack MCP Server bietet eine robuste Integration für Echtgeräte- und Browser-Testing via KI und MCP, mit klarer Einrichtung und wertvollen Prompts/Ressourcen. Die fehlende explizite Tool-Liste und Informationen zu erweiterten MCP-Features (Roots, Sampling) schränken die Transparenz für Power-User jedoch etwas ein.

MCP Score

Score: 7/10
Gut dokumentiert, mit wertvollen Ressourcen und Prompt-Beispielen. Würde von ausführlicherer Tool-Dokumentation und Details zu erweiterten MCP-Funktionen profitieren.