Shiplight MCP Server

El servidor MCP de navegador de Shiplight permite a los agentes de codificación inspeccionar páginas web, realizar acciones en el navegador y capturar capturas de pantalla para pruebas y depuración.

Documentación

Inicio rápido

Ver como Markdown

Configura Shiplight en tu agente de codificación y luego crea y ejecuta tu primera prueba de navegador.

Paso 1: Instalar Shiplight

Shiplight utiliza habilidades para guiar a tu agente de codificación y un servidor MCP para darle acceso a un navegador real. Elige tu agente de codificación a continuación, ejecuta el comando en tu terminal y luego reinicia el agente.

Elige tu agente de codificación

Cada comando instala todo lo que necesita el agente seleccionado. Puedes copiarlo y pegarlo tal como está escrito.

npx -y skills add ShiplightAI/agent-skills-v2 -a claude-code -y && \
npx -y add-mcp "npx -y @shiplightai/mcp@latest" -n shiplight --env PWDEBUG=console -a claude-code -y

Usar otro agente de codificación

Si tu agente de codificación no aparece en la lista anterior, aún puedes instalar las habilidades de Shiplight. Reemplaza <agent> con el nombre que usa tu agente:

npx -y skills add ShiplightAI/agent-skills-v2 -a <agent> -y

Consulta la lista completa de agentes compatibles para encontrar el nombre correcto.

Configurar el servidor MCP manualmente

Si add-mcp no es compatible con tu agente, agrega el servidor MCP al archivo de configuración del agente tú mismo. Revisa la documentación de tu agente para encontrar el archivo y luego agrega:

{
  "mcpServers": {
    "shiplight": {
      "command": "npx",
      "args": ["-y", "@shiplightai/mcp@latest"],
      "env": {
        "PWDEBUG": "console"
      }
    }
  }
}

Mantener Shiplight actualizado

El servidor MCP usa automáticamente la última versión. Para actualizar las habilidades de Shiplight instaladas en tu computadora, ejecuta el comando que coincida con cómo las instalaste:

npx -y skills update -p   # project-level
npx -y skills update -g   # user-level (global)

Paso 2: Crear tu primera prueba

Usa el comando /shiplight

En tu agente de codificación, escribe /shiplight seguido de la tarea que quieres ejecutar. Por ejemplo: /shiplight verify, /shiplight create-yaml-tests o /shiplight fix. Ejecuta /shiplight help para ver todos los comandos disponibles, o /shiplight help <command> para obtener más información sobre un comando. Consulta Pruebas impulsadas por el agente para ver la lista completa.

Configurar tu proyecto de pruebas

Abre el repositorio de tu aplicación en tu agente de codificación y luego ejecuta /shiplight init. Shiplight crea la estructura de pruebas, instala los paquetes necesarios y agrega specs/context.md con información sobre tu aplicación.

Configurar la autenticación para la aplicación bajo prueba (si es necesario)

Si tu aplicación requiere que los usuarios inicien sesión, ejecuta /shiplight setup-test-auth. Este comando de habilidad configura la autenticación para la aplicación que estás probando y guarda una sesión de navegador con sesión iniciada para que las pruebas puedan comenzar detrás de su pantalla de inicio de sesión. No crea un token de API de la plataforma Shiplight. Consulta Autenticación para otras formas de probar páginas con sesión iniciada.

Crear una prueba

Dile a tu agente de codificación qué quieres probar. Puedes usar /shiplight create-yaml-tests o escribir la solicitud de forma natural. Tu agente reconoce la solicitud, recorre tu aplicación en un navegador real y escribe una prueba E2E en YAML que puedes leer y revisar.

/shiplight create yaml tests for the login flow at localhost:3000

Ejecutar la prueba

Ejecuta el siguiente comando en tu terminal:

npx shiplight test

Cuando la prueba termine, abre shiplight-report/index.html. El informe muestra si cada paso pasó o falló, junto con capturas de pantalla y trazas. Consulta Informe para cambiar lo que Shiplight guarda.

Paso 3: Corregir pruebas que fallan

Si una prueba falla después de cambiar tu aplicación, ejecuta /shiplight fix. Tu agente de codificación reproduce el fallo, encuentra la causa y actualiza la prueba YAML cuando la prueba está desactualizada. Si la aplicación tiene un error, informa el problema sin cambiar la prueba. Shiplight maneja automáticamente la mayoría de los localizadores de elementos desactualizados mientras se ejecuta una prueba; consulta Cómo funciona la autocuración.

Use /shiplight fix to repair failing tests in ./tests after the latest deployment.

Para flujos más complejos, usa el depurador local para ejecutar la prueba paso a paso, revisa capturas de pantalla y trazas, y edita el YAML tú mismo. Consulta Corregir una prueba que falla para ver el proceso completo.

Paso 4: Ejecutar en CI (opcional)

Puedes ejecutar las mismas pruebas E2E en YAML en GitHub Actions, GitLab CI, CircleCI, Jenkins y otros servicios de CI. Lee Dónde se ejecutan las pruebas para comparar tus propios ejecutores de CI con los ejecutores alojados por Shiplight, y luego sigue la guía de CI/CD para configurar tu flujo de trabajo.

Verificar cambios de UI mientras trabajas

Después de que tu agente de codificación cambie la interfaz de usuario, ejecuta /shiplight verify. El agente abre tu aplicación en un navegador y confirma que el cambio funciona. No necesitas crear un archivo de prueba primero.

Update the navbar to include "Pricing" and "Blog" links, then use /shiplight verify to confirm they appear correctly on localhost:3000.

Próximos pasos

  • Guías — Sigue instrucciones paso a paso para tareas de prueba comunes.
  • Formato de prueba E2E en YAML — Aprende a leer y editar archivos de prueba de Shiplight.
  • Ejecutar localmente — Ejecuta pruebas en tu computadora y revisa los resultados.
  • CI/CD — Ejecuta tus pruebas automáticamente con tu proveedor de CI.
  • Shiplight Cloud — Sube resultados, rastrea pruebas inestables y administra ejecutores de CI, tokens de API y facturación.