BrowserStack MCP Server

oficial

Lleva todo el poder de la plataforma de pruebas de BrowserStack a tus herramientas de IA, haciendo que las pruebas sean más rápidas y fáciles para cada desarrollador y tester de tu equipo.

Documentación

Servidor MCP de BrowserStack

BrowserStack Logo MCP Server Logo

Plataforma de Pruebas Integral

Gestione casos de prueba, ejecute pruebas manuales o automatizadas, depure problemas e incluso corrija código, directamente desde herramientas como Cursor, Claude o cualquier cliente compatible con MCP, usando lenguaje natural.

Pruebe desde cualquier lugar:

Conecte fácilmente la Plataforma de Pruebas de BrowserStack a sus herramientas de IA favoritas, como IDEs, LLMs o flujos de trabajo agentivos.

Pruebe con lenguaje natural:

Gestione, ejecute, depure pruebas e incluso corrija código usando instrucciones en lenguaje natural.

Menor cambio de contexto:

Mantenga el flujo: conserve todo el contexto del proyecto en un solo lugar y active acciones directamente desde su IDE o LLM.

⚡️ Configuración MCP en Un Clic

Haga clic en los botones de abajo para instalar MCP en su IDE respectivo:

Install in VS Code   Install in Cursor

Nota: Asegúrese de usar la versión de Node >= 18.0

  • Verifique su versión de Node usando node --version. Versión recomendada: v22.15.0 (LTS)
  • Para actualizar Node:
    1. En 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. En Windows (nvm-windows) : nvm install 22.15.0 && nvm use 22.15.0
  • 👉 O descargue directamente el Instalador LTS de Node.js

.

💡 Ejemplos de Uso

📱 Pruebas Manuales de Apps

Pruebe aplicaciones móviles en dispositivos reales con las últimas versiones de SO. Reproduzca errores y depure fallos sin complicaciones de configuración. A continuación se muestran algunos ejemplos de instrucciones para usar sus aplicaciones móviles en la extensa nube de dispositivos reales 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?"
  • A diferencia de los emuladores, pruebe el rendimiento real de su app en dispositivos reales. Con funciones avanzadas de Perfilado de Apps, puede depurar fallos y problemas de rendimiento en tiempo real.
  • Acceda a todos los dispositivos y versiones de SO principales desde nuestra cuadrícula de dispositivos. Tenemos SLAs estrictos para aprovisionar nuestros centros de datos globales con dispositivos recién lanzados el día del lanzamiento.

🌐 Pruebas Web Manuales

Similar a las pruebas de apps, puede usar las siguientes instrucciones para probar sus sitios web en la extensa nube de navegadores y dispositivos reales de BrowserStack. ¿No tiene el navegador Edge instalado en su máquina? ¡Nosotros lo cubrimos!

# Test your websites
"open my website hosted on localhost:3001 on Edge"
"open browserstack.com on latest version of Chrome"
  • Pruebe sitios web en diferentes navegadores y dispositivos. Soportamos todos los navegadores principales en todos los SO principales.
  • Pruebe sin problemas sitios web alojados localmente en su máquina, ¡sin necesidad de desplegar en un servidor remoto!

🧪 Pruebas Automatizadas (Playwright, Selenium, A11y y más...)

Auto-analice, diagnostique e incluso corrija scripts de prueba rotos directamente en su IDE o LLM. Obtenga registros al instante, identifique causas raíz y aplique correcciones contextuales. Se acabaron los bucles de depuración. A continuación se muestran algunos ejemplos de instrucciones para ejecutar/depurar/corregir sus pruebas automatizadas en la Plataforma de Pruebas de BrowserStack.

Nota: Al obtener el Análisis de Causa Raíz (RCA) para una prueba, el servidor devuelve la corrección sugerida solo como una propuesta. Nunca aplica cambios de código automáticamente: su asistente debe presentar la sugerencia y esperar su aprobación explícita antes de editar cualquier archivo.

#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?"

  • Corrija fallos de prueba reportados por su pipeline de CI/CD utilizando nuestras funciones líderes en la industria de Observabilidad de Pruebas. Encuentre más información aquí.
  • Ejecute pruebas escritas en Jest, Playwright, Selenium y más en la Plataforma de Pruebas de BrowserStack.

🌐 Accesibilidad

Detecte problemas de accesibilidad temprano con escaneos a11y locales automatizados. Obtenga correcciones sugeridas por IA con un solo clic. Sin búsqueda de documentación, sin sorpresas en CI. Asegure el cumplimiento de WCAG y ADA con nuestra herramienta de Pruebas de Accesibilidad.

#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”

📋 Gestión de Pruebas

Cree y gestione casos de prueba, cree planes de prueba y active ejecuciones de prueba usando lenguaje natural. A continuación se muestran algunos ejemplos de instrucciones para utilizar las capacidades de Gestión de Pruebas de BrowserStack con el servidor 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"

🧪 Acceda a los Agentes de IA de BrowserStack

Genere casos de prueba a partir de PRDs, convierta pruebas manuales en automatización de bajo código y auto-repare scripts inestables impulsados por los agentes de IA de BrowserStack, integrados perfectamente en su flujo de trabajo. A continuación se muestran algunos ejemplos de instrucciones para acceder a los agentes de 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”

🛠️ Instalación

📋 Requisitos Previos para la Configuración de MCP

Nota: Asegúrese de usar la versión de Node >= 18.0

  • Verifique su versión de Node usando node --version. Versión recomendada: v22.15.0 (LTS)

Configuración MCP en Un Clic

Haga clic en los botones de abajo para instalar MCP en su IDE respectivo:

Install in VS Code   Install in Cursor

Formas Alternativas de Configurar el Servidor MCP

  1. Cree una Cuenta de BrowserStack

    • Regístrese en BrowserStack si aún no tiene una cuenta.

    • ℹ️ Si tiene un proyecto de código abierto, podemos proporcionarle un plan gratuito.

    • Una vez que tenga una cuenta (y haya comprado el plan apropiado), anote su username y access_key desde Configuración de la Cuenta.

  2. Nota: Asegúrese de usar la versión de Node >= 18.0

    • Verifique su versión de Node usando node --version. Versión recomendada: v22.15.0 (LTS)
  3. Instale el Servidor MCP

    • VSCode (Copilot - Modo Agente): .vscode/mcp.json:

      • Localice o Cree el Archivo de Configuración: En el directorio raíz de su proyecto, busque una carpeta llamada .vscode. Esta carpeta suele estar oculta, por lo que necesitará encontrarla como se menciona en la expansión.

      • Si esta carpeta no existe, créela.

      • Dentro de la carpeta .vscode, cree un nuevo archivo llamado mcp.json

      • Agregue la Configuración: Abra el archivo mcp.json y luego agregue el siguiente contenido JSON.

      • Reemplace el nombre de usuario y <access_key> con sus credenciales de BrowserStack.

    {
      "servers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • En VSCode, asegúrese de hacer clic en el botón Start en el Servidor MCP para iniciar el servidor. Start MCP Server

    ** Forma Alternativa de Configurar MCP en VSCode Copilot

    1. Haga clic en el icono de engranaje para Seleccionar Herramientas
    Select Tools
    2. Aparecerá un menú de herramientas en la parte superior central, desplácese hacia abajo en el menú en la parte superior y luego haga clic en Agregar Servidor MCP
    Add MCP Server
    3. Seleccione la opción de paquete NPM (Instalar desde un paquete NPM) - 3ª en la lista
    Select NPM Package
    4. Ingrese el Nombre del Paquete NPM (@browserstack/mcp-server)
    Enter NPM Package
    5. Ingrese el nombre de usuario y la clave de acceso de BrowserStack
    • Para Cursor: .cursor/mcp.json:
    {
      "mcpServers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • Claude Desktop: ~/claude_desktop_config.json:
    {
      "mcpServers": {
        "browserstack": {
          "command": "npx",
          "args": ["-y", "@browserstack/mcp-server@latest"],
          "env": {
            "BROWSERSTACK_USERNAME": "<username>",
            "BROWSERSTACK_ACCESS_KEY": "<access_key>"
          }
        }
      }
    }
    
    • Cline

Haga clic en el icono “Servidores MCP” en la barra de navegación Seleccione la pestaña “Instalado”. Haga clic en el botón “Configurar Servidores MCP” en la parte inferior del panel.

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

💡 Lista de Herramientas MCP de BrowserStack

Actualmente soportamos 20 herramientas.


🧾 Gestión de Pruebas

  1. createProjectOrFolder — Cree un proyecto de Gestión de Pruebas y/o carpetas para organizar casos de prueba. Devuelve el ID de Carpeta, ID de Proyecto y Enlace de Gestión de Pruebas para acceder al Panel del Proyecto TM. Ejemplo de instrucción
Create a new Test Management project named 'Shopping App' with two folders - Login and Checkout
  1. createTestCase — Agregue un caso de prueba manual bajo un proyecto/carpeta específico (usa identificador de proyecto como PR-xxxxx y un ID de carpeta). Ejemplo de instrucción
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 — Liste casos de prueba para un proyecto (soporta filtros como prioridad, estado, etiquetas). Ejemplo de instrucción
List all high-priority test cases in the 'Shopping App' project with project_identifier: PR-59457
  1. createTestRun — Cree una ejecución de prueba (suite) para casos de prueba seleccionados en un proyecto. Ejemplo de instrucción
Create a test run for the Login folder in the 'Shopping App' project and name it 'Release v1.0 Login Flow'
  1. listTestRuns — Liste ejecuciones de prueba para un proyecto (filtre por fechas, asignado, estado). Ejemplo de instrucción
List all test runs from the 'Shopping App' project that were executed last week and are currently marked in-progress
  1. updateTestRun — Actualice parcialmente una ejecución de prueba (estado, etiquetas, notas, casos de prueba asociados). Ejemplo de instrucción
Update test run ID 1043 in the 'Shopping App' project and mark it as complete with the note 'Regression cycle done'
  1. addTestResult — Agregue un resultado de ejecución manual (aprobado/fallido/bloqueado/omitido) para un caso de prueba dentro de una ejecución. Ejemplo de instrucción
Mark the test case 'Invalid Login Scenario' as passed in test run ID 1043 of the 'Shopping App' project
  1. createTestCasesFromFile — Cree casos de prueba en lote desde un archivo cargado (ej., PDF). Ejemplo de instrucción
Upload test cases from '/Users/xyz/testcases.pdf' to the 'Shopping App' project in Test Management

⚙️ Configuración del SDK de BrowserStack / Automatizar Prueba

  1. setupBrowserStackAutomateTests — Integre el SDK de BrowserStack y ejecute pruebas web en BrowserStack (opcionalmente habilite Percy). Ejemplo de instrucción
Run my Selenium-JUnit5 tests written in Java on Chrome and Firefox. Enable Percy for visual testing.
  1. fetchAutomationScreenshots — Obtenga capturas de pantalla tomadas durante una sesión dada de Automate/App Automate. Ejemplo de instrucción
Get screenshots from Automate session ID abc123xyz for my desktop test run

🔍 Observabilidad

  1. getFailureLogs — Recupere registros de error para sesiones de Automate/App Automate (opcionalmente por ID de Build para App Automate). Ejemplo de instrucción
Get the error logs from the session ID: 21a864032a7459f1e7634222249b316759d6827f, Build ID: dt7ung4wmjittzff8kksrjadjax9gzvbscoyf9qn of App Automate test session

📱 App Live

  1. runAppLiveSession — Inicie una sesión de prueba manual de app en un dispositivo real en la nube. Ejemplo de instrucción
Open my app on iPhone 15 Pro Max with iOS 17. App path is /Users/xyz/app.ipa

💻 Live

  1. runBrowserLiveSession — Inicie una sesión Live para pruebas de sitios web en navegadores de escritorio o móviles. Ejemplo de instrucción
Open www.google.com on the latest version of Microsoft Edge on Windows 11

📲 App Automate

  1. takeAppScreenshot — Lance la app en un dispositivo especificado y capture una captura de pantalla de verificación rápida. Esta herramienta es solo para verificar si su app se ha lanzado. Ejemplo de instrucción
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 — Ejecute pruebas móviles automatizadas (Espresso/XCUITest, etc.) en dispositivos reales. Ejemplo de instrucción
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'

♿ Accesibilidad

  1. accessibilityExpert — Consulte al Experto A11y (WCAG 2.0/2.1/2.2, usabilidad móvil/web, mejores prácticas). Ejemplo de instrucción
What WCAG guidelines apply to form field error messages on mobile web?
  1. startAccessibilityScan — Inicie un escaneo de accesibilidad web y devuelva el enlace del resultado. Ejemplo de instrucción
Run accessibility scan for "www.example.com"

🤖 Agentes de IA de BrowserStack

  1. fetchSelfHealedSelectors — Recupere selectores auto-reparados por IA para corregir pruebas inestables debido a cambios en el DOM. Ejemplo de instrucción
Fetch and fix flaky test selectors in Automate session ID session_9482 using MCP
  1. createLCASteps — Genere pasos de Automatización de Bajo Código desde un caso de prueba manual en Gestión de Pruebas. Ejemplo de instrucción
Convert the manual test case 'Add to Cart' in the 'Shopping App' project into LCA steps
  1. uploadProductRequirementFile — Cargue un PRD/captura de pantalla/PDF y obtenga un ID de mapeo de archivo (usado con createTestCasesFromFile). Ejemplo de instrucción
Upload PRD from /Users/xyz/Desktop/login-flow.pdf and use BrowserStack AI to generate test cases

🚀 Servidor MCP Remoto

El MCP Remoto viene con todas las funcionalidades de un servidor MCP sin las complicaciones de una configuración compleja o instalación local.

Beneficios clave:

  • ✅ Funciona perfectamente en redes empresariales sin preocuparse por firewalls o binarios o donde no se permite la instalación local.

  • ✅ Integración OAuth segura – sin compartir contraseñas ni manejo manual de credenciales.

Limitaciones:

  • ❌ Sin soporte para Pruebas Locales (no puede probar apps detrás de VPNs, firewalls o localhost). Si necesita hacer Pruebas Locales, tendría que usar un servidor MCP Local de BrowserStack.
  • ❌ La latencia puede ser ligeramente mayor, pero nada considerable; generalmente no lo notará en el uso normal.

Pasos de Instalación:

  • En VSCode (Copilot - Modo Agente): .vscode/mcp.json:

    • Localice o Cree el Archivo de Configuración:

    • En el directorio raíz de su proyecto, busque una carpeta llamada .vscode. Esta carpeta suele estar oculta, por lo que necesitará encontrarla como se menciona en la expansión.

    • Si esta carpeta no existe, créela.

    • Dentro de la carpeta .vscode, cree un nuevo archivo llamado mcp.json

    • Para configurar el MCP Remoto de BrowserStack en lugar del MCP Local de BrowserStack, puede agregar el siguiente contenido JSON:

      Remote MCP JSON file

      Forma Alternativa de Configurar MCP Remoto

    • Paso 1. Haga clic en el icono de engranaje para Seleccionar Herramientas

      Select Tools
    • Paso 2. Aparecerá un menú de herramientas en la parte superior central, desplácese hacia abajo en el menú en la parte superior y luego haga clic en Agregar Servidor MCP

    Add MCP Server
    • Paso 3. Haga clic en la opción HTTP

      HTTP Option
    • Paso 4. Pegue la URL del Servidor MCP Remoto: https://mcp.browserstack.com/mcp

      Remote MCP Server URL
    • Paso 5. Asigne el id del servidor como: browserstack

      Remote MCP Server ID
    • Paso 6. En VSCode, haga clic en iniciar Servidor MCP y luego haga clic en "Permitir"

      authentication1
      authentication2
      Sign_in_success

🤝 Clientes MCP Recomendados

  • Recomendamos usar Github Copilot o Cursor para casos de uso de pruebas automatizadas + depuración.
  • Para casos de uso de pruebas manuales (Live Testing), recomendamos usar Claude Desktop.

⚠️ Notas Importantes

  • El Servidor MCP de BrowserStack está bajo desarrollo activo y actualmente soporta un subconjunto de la especificación MCP. Se agregarán más funciones pronto.
  • Las invocaciones de herramientas dependen del Cliente MCP, que a su vez depende de un LLM, por lo tanto, puede haber algún comportamiento no determinista que puede llevar a resultados inesperados. Si tiene alguna sugerencia o comentario, por favor abra un issue para discutirlo.

📝 Contribuciones

¡Damos la bienvenida a las contribuciones! Por favor, abra un issue para discutir cualquier cambio que desee realizar. 👉 Haga clic aquí para ver nuestras Directrices de Contribución

📞 Soporte

Para soporte, por favor:

🚀 Más Funciones Próximamente

¡Esté atento a actualizaciones emocionantes! ¿Tiene alguna sugerencia? Por favor, abra un issue para discutirla.