Shiplight MCP Server
O servidor MCP de navegador da Shiplight permite que agentes de codificação inspecionem páginas da web, executem ações no navegador e capturem capturas de tela para testes e depuração.
Documentação
Início Rápido
Configure o Shiplight no seu agente de codificação e, em seguida, crie e execute seu primeiro teste de navegador.
Etapa 1: Instalar o Shiplight
O Shiplight usa skills para orientar seu agente de codificação e um servidor MCP para dar a ele acesso a um navegador real. Escolha seu agente de codificação abaixo, execute o comando no seu terminal e reinicie o agente.
Escolha seu agente de codificação
Cada comando instala tudo o que o agente selecionado precisa. Você pode copiar e colar 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 outro agente de codificação
Se o seu agente de codificação não estiver listado acima, você ainda pode instalar as skills do Shiplight. Substitua <agent> pelo nome usado pelo seu agente:
npx -y skills add ShiplightAI/agent-skills-v2 -a <agent> -y
Consulte a lista completa de agentes suportados para encontrar o nome correto.
Configurar o servidor MCP manualmente
Se o add-mcp não suportar seu agente, adicione o servidor MCP ao arquivo de configuração do agente você mesmo. Verifique a documentação do seu agente para encontrar o arquivo e adicione:
{
"mcpServers": {
"shiplight": {
"command": "npx",
"args": ["-y", "@shiplightai/mcp@latest"],
"env": {
"PWDEBUG": "console"
}
}
}
}
Manter o Shiplight atualizado
O servidor MCP usa a versão mais recente automaticamente. Para atualizar as skills do Shiplight instaladas no seu computador, execute o comando que corresponde a como você as instalou:
npx -y skills update -p # project-level
npx -y skills update -g # user-level (global)
Etapa 2: Criar seu primeiro teste
Use o comando /shiplight
No seu agente de codificação, digite /shiplight seguido da tarefa que deseja executar. Por exemplo: /shiplight verify, /shiplight create-yaml-tests ou /shiplight fix. Execute /shiplight help para ver todos os comandos disponíveis, ou /shiplight help <command> para saber mais sobre um comando. Consulte Testes Orientados por Agente para a lista completa.
Configurar seu projeto de teste
Abra o repositório do seu aplicativo no seu agente de codificação e execute /shiplight init. O Shiplight cria a estrutura de teste, instala os pacotes necessários e adiciona specs/context.md com informações sobre seu aplicativo.
Configurar autenticação para o aplicativo em teste (se necessário)
Se o seu aplicativo exigir que os usuários façam login, execute /shiplight setup-test-auth. Este comando de skill configura a autenticação para o aplicativo que você está testando e salva uma sessão de navegador autenticada para que os testes possam começar atrás da tela de login. Ele não cria um token de API da plataforma Shiplight. Consulte Autenticação para outras formas de testar páginas autenticadas.
Criar um teste
Diga ao seu agente de codificação o que você deseja testar. Você pode usar /shiplight create-yaml-tests ou escrever a solicitação naturalmente. Seu agente reconhece a solicitação, navega pelo seu aplicativo em um navegador real e escreve um teste E2E em YAML que você pode ler e revisar.
/shiplight create yaml tests for the login flow at localhost:3000
Executar o teste
Execute o seguinte comando no seu terminal:
npx shiplight test
Quando o teste terminar, abra shiplight-report/index.html. O relatório mostra se cada etapa passou ou falhou, junto com capturas de tela e rastreamentos. Consulte Relatório para alterar o que o Shiplight salva.
Etapa 3: Corrigir testes com falha
Se um teste falhar depois que você alterar seu aplicativo, execute /shiplight fix. Seu agente de codificação reproduz a falha, encontra a causa e atualiza o teste YAML quando o teste está desatualizado. Se o aplicativo tiver um bug, ele relata o problema sem alterar o teste. O Shiplight lida automaticamente com a maioria dos localizadores de elementos desatualizados durante a execução do teste; consulte Como funciona a autocorreção.
Use /shiplight fix to repair failing tests in ./tests after the latest deployment.
Para fluxos mais complexos, use o depurador local para executar o teste passo a passo, revisar capturas de tela e rastreamentos e editar o YAML você mesmo. Consulte Corrigir um teste com falha para o processo completo.
Etapa 4: Executar em CI (opcional)
Você pode executar os mesmos testes E2E em YAML no GitHub Actions, GitLab CI, CircleCI, Jenkins e outros serviços de CI. Leia Onde os testes são executados para comparar seus próprios runners de CI com os runners hospedados pelo Shiplight e, em seguida, siga o guia de CI/CD para configurar seu fluxo de trabalho.
Verificar alterações de UI enquanto trabalha
Depois que seu agente de codificação alterar a interface do usuário, execute /shiplight verify. O agente abre seu aplicativo em um navegador e confirma que a alteração funciona. Você não precisa criar um arquivo de teste primeiro.
Update the navbar to include "Pricing" and "Blog" links, then use /shiplight verify to confirm they appear correctly on localhost:3000.
Próximos passos
- Guias — Siga instruções passo a passo para tarefas comuns de teste.
- Formato de teste E2E em YAML — Aprenda a ler e editar arquivos de teste do Shiplight.
- Executar localmente — Execute testes no seu computador e revise os resultados.
- CI/CD — Execute seus testes automaticamente com seu provedor de CI.
- Shiplight Cloud — Envie resultados, acompanhe testes instáveis e gerencie runners de CI, tokens de API e cobrança.