BrowserStack MCP Server

officiel

Apportez toute la puissance de la plateforme de test BrowserStack à vos outils d'IA, rendant les tests plus rapides et plus faciles pour chaque développeur et testeur de votre équipe.

GitHub
145

Documentation

Serveur MCP BrowserStack

BrowserStack Logo MCP Server Logo

Plateforme de test complète

Gérez les cas de test, exécutez des tests manuels ou automatisés, déboguez les problèmes et corrigez même le code — directement dans des outils comme Cursor, Claude ou tout client compatible MCP, en utilisant un langage simple.

Testez depuis n'importe où :

Connectez facilement la plateforme de test BrowserStack à vos outils d'IA préférés, tels que les IDE, les LLM ou les flux de travail agentiques.

Testez en langage naturel :

Gérez, exécutez, déboguez les tests et corrigez même le code à l'aide d'invites en langage simple.

Changement de contexte réduit :

Restez concentré — conservez tout le contexte du projet au même endroit et déclenchez des actions directement depuis votre IDE ou LLM.

⚡️ Configuration MCP en un clic

Cliquez sur les boutons ci-dessous pour installer MCP dans votre IDE respectif :

Install in VS Code   Install in Cursor

Remarque : Assurez-vous d'utiliser une version de Node >= 18.0

  • Vérifiez votre version de Node avec node --version. Version recommandée : v22.15.0 (LTS)
  • Pour mettre à niveau Node :
    1. Sur macOS (Homebrew) - brew update && brew upgrade node or if using (nvm) - nvm install 22.15.0 && nvm use 22.15.0 && nvm alias default 22.15.0
    1. Sur Windows (nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0
  • 👉 Ou téléchargez directement l'installateur Node.js LTS

.

💡 Exemples d'utilisation

📱 Test manuel d'applications

Testez des applications mobiles sur des appareils réels avec les dernières versions de système d'exploitation. Reproduisez les bugs et déboguez les plantages sans les tracas de configuration. Voici quelques exemples d'invites pour utiliser vos applications mobiles sur le vaste cloud d'appareils réels de BrowserStack

# Open app on specific device
"open my app on a iPhone 15 Pro Max"

# Debug app crashes
"My app crashed on Android 14 device, can you help me debug?"
  • Contrairement aux émulateurs, testez les performances réelles de votre application sur des appareils physiques. Grâce aux fonctionnalités avancées de profilage d'application, vous pouvez déboguer les plantages et les problèmes de performance en temps réel.
  • Accédez à tous les principaux appareils et versions de système d'exploitation depuis notre grille d'appareils. Nous avons des SLA stricts pour approvisionner nos centres de données mondiaux avec les appareils nouvellement sortis le jour du lancement.

🌐 Test manuel Web

Comme pour les tests d'applications, vous pouvez utiliser les invites suivantes pour tester vos sites web sur le vaste cloud de navigateurs et d'appareils réels de BrowserStack. Vous n'avez pas le navigateur Edge installé sur votre machine ? Nous avons ce qu'il vous faut !

# Test your websites
"open my website hosted on localhost:3001 on Edge"
"open browserstack.com on latest version of Chrome"
  • Testez des sites web sur différents navigateurs et appareils. Nous prenons en charge tous les principaux navigateurs sur tous les principaux systèmes d'exploitation.
  • Testez de manière transparente les sites web hébergés localement sur votre machine, pas besoin de déployer sur un serveur distant !

🧪 Tests automatisés (Playwright, Selenium, A11y et plus encore...)

Analysez, diagnostiquez et corrigez automatiquement les scripts de test défaillants directement dans votre IDE ou LLM. Récupérez instantanément les journaux, identifiez les causes racines et appliquez des correctifs contextuels. Finies les boucles de débogage. Voici quelques exemples d'invites pour exécuter/déboguer/corriger vos tests automatisés sur la Plateforme de test de BrowserStack.

Remarque : Lors de la récupération de l'analyse des causes racines (RCA) pour un test, le serveur renvoie la correction suggérée uniquement à titre de proposition. Il n'applique jamais les modifications de code automatiquement — votre assistant doit présenter la suggestion et attendre votre approbation explicite avant de modifier des fichiers.

#Port test suite to BrowserStack
"Setup test suite to run on BrowserStack infra"

#Run tests on BrowserStack
“Run my tests on BrowserStack”

#AI powered debugging of test failures
"My App Automate tests have failed, can you help me fix the new failures?"
  • Corrigez les échecs de test signalés par votre pipeline CI/CD en utilisant nos fonctionnalités de Test Observability de pointe. Plus d'infos ici.
  • Exécutez des tests écrits en Jest, Playwright, Selenium et plus encore sur la Plateforme de test de BrowserStack

🌐 Accessibilité

Détectez tôt les problèmes d'accessibilité avec des analyses a11y locales automatisées. Obtenez des correctifs suggérés par l'IA en un clic. Plus besoin de chercher dans la documentation, plus de surprises en CI. Assurez la conformité WCAG et ADA avec notre outil de test d'accessibilité

#Scan accessibility issues while development
"Scan & help fix accessibility issues for my website running locally on localhost:3000"

#Scan accessibility issues on production site
“Run accessibility scan & identify issues on my website - www.bstackdemo.com”

📋 Gestion des tests

Créez et gérez des cas de test, créez des plans de test et déclenchez des exécutions de test en langage naturel. Voici quelques exemples d'invites pour utiliser les capacités de Gestion des tests de BrowserStack avec le serveur MCP.

# Create project & folder structure
"create new Test management project named My Demo Project with two sub folders - Login & Checkout"

# Add test cases
"add invalid login test case in Test Management project named My Demo Project"

# List added test cases 
"list high priority Login test cases from Test Management project - My Demo Project"

# Create test run
"create a test run for Login tests from Test Management project - My Demo Project"

# Update test results
"update test results as passed for Login tests test run from My Demo Project"

🧪 Accéder aux agents IA de BrowserStack

Générez des cas de test à partir de PRD, convertissez des tests manuels en automatisation low-code et auto-réparez les scripts instables grâce aux agents IA de BrowserStack, intégrés de manière transparente dans votre flux de travail. Voici quelques exemples d'invites pour accéder aux agents IA de BrowserStack

#Test case generator agent
"With Browserstack AI, create relevant test cases for my PRD located at /usr/file/location"


#Low code authoring agent
“With Browserstack AI, automate my manual test case X, added in Test Management”


#Self healing agent
“Help fix flaky tests in my test script with Browserstack AI self healing”

🛠️ Installation

📋 Prérequis pour la configuration MCP

Remarque : Assurez-vous d'utiliser une version de Node >= 18.0

  • Vérifiez votre version de Node avec node --version. Version recommandée : v22.15.0 (LTS)

Configuration MCP en un clic

Cliquez sur les boutons ci-dessous pour installer MCP dans votre IDE respectif :

Install in VS Code   Install in Cursor

Autres façons de configurer le serveur MCP

  1. Créez un compte BrowserStack

    • Inscrivez-vous sur BrowserStack si vous n'avez pas encore de compte.

    • ℹ️ Si vous avez un projet open-source, nous pourrons vous fournir un plan gratuit.

    • Une fois que vous avez un compte (et acheté le plan approprié), notez votre username et votre access_key depuis les Paramètres du compte.

  2. Remarque : Assurez-vous d'utiliser une version de Node >= 18.0

    • Vérifiez votre version de Node avec node --version. Version recommandée : v22.15.0 (LTS)

  3. Installez le serveur MCP

    • VSCode (Copilot - Mode Agent) : .vscode/mcp.json :

      • Localisez ou créez le fichier de configuration : Dans le répertoire racine de votre projet, cherchez un dossier nommé .vscode. Ce dossier est généralement caché, vous devrez donc le trouver comme mentionné dans le développement.

      • Si ce dossier n'existe pas, créez-le.

      • Dans le dossier .vscode, créez un nouveau fichier nommé mcp.json

      • Ajoutez la configuration : Ouvrez le fichier mcp.json et ajoutez le contenu JSON suivant.

      • Remplacez le nom d'utilisateur et <access_key> par vos identifiants BrowserStack.

    {
  "servers": {
    "browserstack": {
      "command": "npx",
      "args": ["-y", "@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_USERNAME": "<username>",
        "BROWSERSTACK_ACCESS_KEY": "<access_key>"
      }
    }
  }
}
    • Dans VSCode, assurez-vous de cliquer sur le bouton Start dans le serveur MCP pour démarrer le serveur. Start MCP Server

    ** Autre façon de configurer MCP sur VSCode Copilot

    1. Cliquez sur l'icône d'engrenage pour sélectionner Outils
    Select Tools
    2. Un menu d'outils apparaîtra en haut au centre, faites défiler le menu vers le bas puis cliquez sur Ajouter un serveur MCP
    Add MCP Server
    3. Sélectionnez l'option paquet NPM (Installer depuis un paquet NPM) - 3ème dans la liste
    Select NPM Package
    4. Entrez le nom du paquet NPM (@browserstack/mcp-server)
    Enter NPM Package
    5. Entrez le nom d'utilisateur BrowserStack et la clé d'accès
    • Pour Cursor : .cursor/mcp.json :
    {
  "mcpServers": {
    "browserstack": {
      "command": "npx",
      "args": ["-y", "@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_USERNAME": "<username>",
        "BROWSERSTACK_ACCESS_KEY": "<access_key>"
      }
    }
  }
}
    • Bureau Claude : ~/claude_desktop_config.json :
    {
  "mcpServers": {
    "browserstack": {
      "command": "npx",
      "args": ["-y", "@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_USERNAME": "<username>",
        "BROWSERSTACK_ACCESS_KEY": "<access_key>"
      }
    }
  }
}
    • Cline

Cliquez sur l'icône « Serveurs MCP » dans la barre de navigation Sélectionnez l'onglet « Installé ». Cliquez sur le bouton « Configurer les serveurs MCP » en bas du panneau.

{
  "mcpServers": {
    "browserstack": {
      "command": "npx",
      "args": ["-y", "@browserstack/mcp-server@latest"],
      "env": {
        "BROWSERSTACK_USERNAME": "<username>",
        "BROWSERSTACK_ACCESS_KEY": "<access_key>"
      }
    }
  }
}

💡 Liste des outils MCP BrowserStack

Actuellement, nous prenons en charge 20 outils.

🧾 Gestion des tests

  1. createProjectOrFolder — Créez un projet de gestion des tests et/ou des dossiers pour organiser les cas de test. Renvoie l'ID du dossier, l'ID du projet et le lien de gestion des tests pour accéder au tableau de bord du projet TM. Exemple d'invite
Create a new Test Management project named 'Shopping App' with two folders - Login and Checkout
  1. createTestCase — Ajoutez un cas de test manuel sous un projet/dossier spécifique (utilise un identifiant de projet comme PR-xxxxx et un ID de dossier). Exemple d'invite
Add a test case named 'Invalid Login Scenario' to the Login folder in the 'Shopping App' project with PR-53617, Folder ID: 117869
  1. listTestCases — Listez les cas de test pour un projet (prend en charge les filtres comme priorité, statut, tags). Exemple d'invite
List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457
  1. createTestRun — Créez une exécution de test (suite) pour les cas de test sélectionnés dans un projet. Exemple d'invite
Create a test run for the Login folder in the 'Shopping App' project and name it 'Release v1.0 Login Flow'
  1. listTestRuns — Listez les exécutions de test pour un projet (filtrez par dates, assigné, état). Exemple d'invite
List all test runs from the 'Shopping App' project that were executed last week and are currently marked in-progress
  1. updateTestRun — Mettez à jour partiellement une exécution de test (statut, tags, notes, cas de test associés). Exemple d'invite
Update test run ID 1043 in the 'Shopping App' project and mark it as complete with the note 'Regression cycle done'
  1. addTestResult — Ajoutez un résultat d'exécution manuelle (réussi/échoué/bloqué/ignoré) pour un cas de test dans une exécution. Exemple d'invite
Mark the test case 'Invalid Login Scenario' as passed in test run ID 1043 of the 'Shopping App' project
  1. createTestCasesFromFile — Créez en masse des cas de test à partir d'un fichier téléchargé (par exemple, PDF). Exemple d'invite
Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management

⚙️ Configuration du SDK BrowserStack / Automatiser les tests

  1. setupBrowserStackAutomateTests — Intégrez le SDK BrowserStack et exécutez des tests web sur BrowserStack (activez éventuellement Percy). Exemple d'invite
Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing.
  1. fetchAutomationScreenshots — Récupérez les captures d'écran prises pendant une session Automate/App Automate donnée. Exemple d'invite
Get screenshots from Automate session ID abc123xyz for my desktop test run

🔍 Observabilité

  1. getFailureLogs — Récupérez les journaux d'erreurs pour les sessions Automate/App Automate (éventuellement par ID de build pour App Automate). Exemple d'invite
Get the error logs from the session ID: 21a864032a7459f1e7634222249b316759d6827f, Build ID: dt7ung4wmjittzff8kksrjadjax9gzvbscoyf9qn of App Automate test session

📱 App Live

  1. runAppLiveSession — Démarrez une session de test manuel d'application sur un appareil réel dans le cloud. Exemple d'invite
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa

💻 Live

  1. runBrowserLiveSession — Démarrez une session Live pour tester un site web sur des navigateurs de bureau ou mobiles. Exemple d'invite
Open www.google.com on the latest version of Microsoft Edge on Windows 11

📲 App Automate

  1. takeAppScreenshot — Lancez l'application sur un appareil spécifié et capturez une capture d'écran de vérification rapide. Cet outil sert uniquement à vérifier si votre application a été lancée. Exemple d'invite
Take a screenshot of my app on Google Pixel 6 with Android 12 while testing on App Automate. App file path: /Users/xyz/app-debug.apk
  1. runAppTestsOnBrowserStack — Exécutez des tests mobiles automatisés (Espresso/XCUITest, etc.) sur des appareils réels. Exemple d'invite
Run Espresso tests from /tests/checkout.zip on Galaxy S21 and Pixel 6 with Android 12. App path is /apps/beta-release.apk under project 'Checkout Flow'

♿ Accessibilité

  1. accessibilityExpert — Demandez à l'expert A11y (WCAG 2.0/2.1/2.2, utilisabilité mobile/web, meilleures pratiques). Exemple d'invite
What WCAG guidelines apply to form field error messages on mobile web?
  1. startAccessibilityScan — Démarrez une analyse d'accessibilité web et renvoyez le lien du résultat. Exemple d'invite
Run accessibility scan for "www.example.com"

🤖 Agents IA de BrowserStack

  1. fetchSelfHealedSelectors — Récupérez les sélecteurs auto-réparés par l'IA pour corriger les tests instables dus aux changements du DOM. Exemple d'invite
Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP
  1. createLCASteps — Générez des étapes d'automatisation Low Code à partir d'un cas de test manuel dans la gestion des tests. Exemple d'invite
Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps
  1. uploadProductRequirementFile — Téléchargez un PRD/capture d'écran/PDF et obtenez un ID de mappage de fichier (utilisé avec createTestCasesFromFile). Exemple d'invite
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases

🚀 Serveur MCP distant

Le MCP distant offre toutes les fonctionnalités d'un serveur MCP sans les tracas d'une configuration complexe ou d'une installation locale.

Avantages clés :

  • ✅ Fonctionne de manière transparente dans les réseaux d'entreprise sans se soucier des pare-feu, des binaires ou lorsque l'installation locale n'est pas autorisée.

  • ✅ Intégration OAuth sécurisée – pas de partage de mot de passe ni de gestion manuelle des identifiants.

Limitations :

  • ❌ Pas de prise en charge des tests locaux (ne peut pas tester les applications derrière des VPN, des pare-feu ou sur localhost). Si vous devez effectuer des tests locaux, vous devrez utiliser un serveur MCP local BrowserStack.
  • ❌ La latence peut être légèrement plus élevée, mais rien de considérable — vous ne le remarquerez généralement pas en utilisation normale.

Étapes d'installation :

  • Sur VSCode (Copilot - Mode Agent) : .vscode/mcp.json :

    • Localisez ou créez le fichier de configuration :

    • Dans le répertoire racine de votre projet, cherchez un dossier nommé .vscode. Ce dossier est généralement caché, vous devrez donc le trouver comme mentionné dans le développement.

    • Si ce dossier n'existe pas, créez-le.

    • Dans le dossier .vscode, créez un nouveau fichier nommé mcp.json

    • Pour configurer le MCP distant BrowserStack au lieu du MCP local BrowserStack, vous pouvez ajouter le contenu JSON suivant :

      Remote MCP JSON file

      Autre façon de configurer le MCP distant

    • Étape 1. Cliquez sur l’icône en forme d’engrenage pour sélectionner Outils

      Select Tools

    • Étape 2. Un menu d’outils apparaît en haut au centre, faites défiler le menu vers le bas puis cliquez sur Ajouter un serveur MCP

    Add MCP Server

    • Étape 3. Cliquez sur l’option HTTP

      HTTP Option

    • Étape 4. Collez l’URL du serveur MCP distant : https://mcp.browserstack.com/mcp

      Remote MCP Server URL

    • Étape 5. Donnez l’identifiant de serveur : browserstack

      Remote MCP Server ID

    • Étape 6. Dans VSCode, cliquez sur Démarrer le serveur MCP puis sur « Autoriser »

      authentication1
      authentication2
      Sign_in_success

🤝 Clients MCP recommandés

  • Nous recommandons d’utiliser Github Copilot ou Cursor pour les cas d’usage de tests automatisés + débogage.
  • Pour les cas d’usage de tests manuels (Live Testing), nous recommandons d’utiliser Claude Desktop.

⚠️ Remarques importantes

  • Le serveur MCP BrowserStack est en développement actif et prend actuellement en charge un sous-ensemble de la spécification MCP. D’autres fonctionnalités seront bientôt ajoutées.
  • Les invocations d’outils dépendent du client MCP qui, à son tour, s’appuie sur un LLM, ce qui peut entraîner un comportement non déterministe pouvant produire des résultats inattendus. Si vous avez des suggestions ou des retours, veuillez ouvrir une issue pour en discuter.

📝 Contribution

Les contributions sont les bienvenues ! Veuillez ouvrir une issue pour discuter des modifications que vous souhaitez apporter. 👉 Cliquez ici pour consulter nos directives de contribution

📞 Support

Pour obtenir de l’aide, veuillez :

🚀 D’autres fonctionnalités arrivent bientôt

Restez à l’écoute pour des mises à jour passionnantes ! Vous avez des suggestions ? Veuillez ouvrir une issue pour en discuter.