218 lines
5.8 KiB
Markdown
218 lines
5.8 KiB
Markdown
# Guia para Habilitar MCP Browser Tools no Cursor
|
|
|
|
**Data**: 2026-01-24
|
|
**Objetivo**: Habilitar os servidores MCP do navegador para realizar testes automatizados
|
|
|
|
---
|
|
|
|
## Método 1: Via Interface do Cursor (Recomendado)
|
|
|
|
### Passo a Passo:
|
|
|
|
1. **Abrir Configurações do Cursor**:
|
|
- Pressione `Ctrl + ,` (ou `Cmd + ,` no Mac)
|
|
- Ou vá em: `File > Preferences > Settings`
|
|
|
|
2. **Navegar para MCP**:
|
|
- Na barra de busca das configurações, digite: `MCP`
|
|
- Ou navegue manualmente: `Features > MCP`
|
|
|
|
3. **Adicionar Novo Servidor MCP**:
|
|
- Clique no botão **"+ Add New MCP Server"** ou **"New MCP server"**
|
|
- Preencha os campos:
|
|
- **Name**: `cursor-ide-browser` (ou qualquer nome descritivo)
|
|
- **Type**: `stdio` (Standard Input/Output)
|
|
- **Command**: O comando para executar o servidor
|
|
- **Args**: Argumentos adicionais (se necessário)
|
|
|
|
4. **Configuração para cursor-ide-browser**:
|
|
- Se o servidor já estiver instalado localmente, você pode precisar apenas habilitá-lo
|
|
- Verifique se há uma opção para "Enable" ou "Activate" o servidor
|
|
|
|
5. **Recarregar/Refresh**:
|
|
- Após adicionar, clique no botão de **refresh** (🔄) para recarregar os servidores
|
|
- Isso deve popular a lista de ferramentas disponíveis
|
|
|
|
6. **Verificar Ferramentas**:
|
|
- As ferramentas MCP devem aparecer na lista de ferramentas disponíveis
|
|
- Ferramentas esperadas do `cursor-ide-browser`:
|
|
- `browser_navigate` - Navegar para uma URL
|
|
- `browser_snapshot` - Capturar estrutura da página
|
|
- `browser_click` - Clicar em elementos
|
|
- `browser_type` - Digitar texto
|
|
- `browser_tabs` - Gerenciar abas
|
|
- `browser_lock` / `browser_unlock` - Bloquear/desbloquear navegador
|
|
|
|
---
|
|
|
|
## Método 2: Via Arquivo de Configuração
|
|
|
|
### Localização do Arquivo:
|
|
|
|
**Windows**:
|
|
```
|
|
%APPDATA%\Cursor\User\settings.json
|
|
```
|
|
|
|
**Ou**:
|
|
```
|
|
%USERPROFILE%\.cursor\config\mcp.json
|
|
```
|
|
|
|
### Configuração JSON:
|
|
|
|
Adicione ao `settings.json`:
|
|
|
|
```json
|
|
{
|
|
"window.commandCenter": true,
|
|
"mcp.servers": {
|
|
"cursor-ide-browser": {
|
|
"command": "node",
|
|
"args": ["path/to/cursor-ide-browser/server.js"],
|
|
"env": {}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
**OU** crie um arquivo `mcp.json` separado:
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"cursor-ide-browser": {
|
|
"command": "npx",
|
|
"args": ["-y", "@modelcontextprotocol/server-puppeteer"]
|
|
},
|
|
"browsermcp": {
|
|
"command": "npx",
|
|
"args": ["@browsermcp/mcp@latest"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Após Editar:
|
|
|
|
1. **Salvar o arquivo**
|
|
2. **Reiniciar o Cursor completamente** (fechar todas as janelas e abrir novamente)
|
|
3. **Verificar se as ferramentas estão disponíveis**
|
|
|
|
---
|
|
|
|
## Método 3: Verificar Instalação do Servidor
|
|
|
|
### Verificar se o servidor está instalado:
|
|
|
|
```powershell
|
|
# Verificar se há servidores MCP no diretório do projeto
|
|
Get-ChildItem "C:\Users\Daivid.alves\.cursor\projects\c-Users-Daivid-alves-Desktop-Repositorios-PlatformSistemas\mcps" -Directory
|
|
```
|
|
|
|
### Instalar servidor MCP do navegador (se necessário):
|
|
|
|
```powershell
|
|
# Tentar instalar via npm (pode falhar se cache estiver configurado incorretamente)
|
|
npm install -g @browsermcp/mcp
|
|
|
|
# OU instalar localmente no projeto
|
|
npm install @browsermcp/mcp --save-dev
|
|
```
|
|
|
|
---
|
|
|
|
## Verificação de Funcionamento
|
|
|
|
### Teste Rápido:
|
|
|
|
Após habilitar, tente usar as ferramentas MCP:
|
|
|
|
1. **Abrir o Composer** no Cursor
|
|
2. **Solicitar**: "Navegue para https://dev.workspace.itguys.com.br/plataforma/workspace/login"
|
|
3. **Verificar**: Se a ferramenta `browser_navigate` é chamada automaticamente
|
|
|
|
### Se as ferramentas não aparecerem:
|
|
|
|
1. **Verificar logs do Cursor**:
|
|
- Abra o Developer Tools: `Help > Toggle Developer Tools`
|
|
- Verifique a aba "Console" para erros relacionados a MCP
|
|
|
|
2. **Verificar se o Node.js está no PATH**:
|
|
```powershell
|
|
node --version
|
|
npm --version
|
|
```
|
|
|
|
3. **Reiniciar o Cursor completamente**
|
|
|
|
4. **Verificar permissões**:
|
|
- Certifique-se de que o Cursor tem permissão para executar comandos
|
|
- Em alguns casos, pode ser necessário executar como administrador
|
|
|
|
---
|
|
|
|
## Solução de Problemas
|
|
|
|
### Problema: "Tool not found"
|
|
|
|
**Causa**: Servidor MCP não está ativo ou não está configurado corretamente.
|
|
|
|
**Solução**:
|
|
1. Verificar se o servidor está listado nas configurações MCP
|
|
2. Verificar se o servidor está habilitado (toggle ON)
|
|
3. Clicar no botão de refresh
|
|
4. Reiniciar o Cursor
|
|
|
|
### Problema: "Command not found"
|
|
|
|
**Causa**: O comando especificado não está no PATH ou não existe.
|
|
|
|
**Solução**:
|
|
1. Verificar se o Node.js está instalado e no PATH
|
|
2. Usar caminho absoluto para o comando
|
|
3. Verificar se o pacote npm está instalado globalmente ou localmente
|
|
|
|
### Problema: "Connection refused" ou "Server not responding"
|
|
|
|
**Causa**: O servidor MCP não está iniciando corretamente.
|
|
|
|
**Solução**:
|
|
1. Verificar logs de erro no Developer Tools
|
|
2. Testar o comando manualmente no terminal
|
|
3. Verificar se há conflitos de porta
|
|
4. Verificar variáveis de ambiente necessárias
|
|
|
|
---
|
|
|
|
## Próximos Passos Após Habilitar
|
|
|
|
Uma vez que o MCP estiver habilitado e funcionando:
|
|
|
|
1. **Testar Navegação Básica**:
|
|
- Navegar para a URL de login
|
|
- Capturar snapshot da página
|
|
- Verificar elementos visíveis
|
|
|
|
2. **Executar Testes Automatizados**:
|
|
- Seguir o guia em `WORKSPACE_MANUAL_TEST_EXECUTION.md`
|
|
- Mas agora usando automação via MCP
|
|
- Documentar resultados automaticamente
|
|
|
|
3. **Integrar com Agentes de Teste**:
|
|
- Os agentes podem usar as ferramentas MCP diretamente
|
|
- Testes podem ser executados de forma automatizada
|
|
- Resultados podem ser gerados automaticamente
|
|
|
|
---
|
|
|
|
## Referências
|
|
|
|
- **Documentação Cursor MCP**: https://cursordocs.com/docs/advanced/model-context-protocol
|
|
- **BrowserTools MCP**: https://cursor.directory/mcp/browsertools-mcp
|
|
- **MCP Setup Guide**: https://docs.browsermcp.io/setup-server
|
|
|
|
---
|
|
|
|
*Última atualização: 2026-01-24*
|