Browserbase MCP Tool

🚀 Web自动化和Android测试套件

一个综合自动化平台，将浏览器自动化与Android设备测试相结合，由MCP（模型上下文协议）服务器提供支持。该项目提供了一个现代化的web界面、强大的自动化功能和广泛的测试工具。

✨ 特性

🌐 浏览器自动化（Browserbase）

• 云浏览器控件：通过Browsebase控制云中的浏览器
• 数据提取：从网页中提取结构化数据
• Web交互：以编程方式导航、单击和填写表单
• 截图：捕获完整页面和元素截图
• 视觉支持：使用AI驱动的视觉进行复杂的DOM交互
• 会话管理：创建、管理和关闭浏览器会话
• 多会话：并行运行多个浏览器会话
• 隐身模式：用于网页抓取的高级隐形功能

📱 Android测试（谷歌ADK）

• 设备管理：列出并管理已连接的Android设备
• 应用程序安装：安装和管理Android应用程序
• 日志访问：访问设备日志和调试信息
• 文件传输：在Android设备之间传输文件
• 截图：捕获设备屏幕截图
• 设备信息：获取详细的设备信息
• 自动化测试：在Android设备上运行自动测试

🎨 现代Web界面

• 实时状态：监视API配置和连接
• 交互式表单：易于使用的自动化任务表单
• 响应式设计：适用于台式机和移动设备
• 实时反馈：实时状态更新和结果
• 漂亮的UI：现代渐变设计，动画流畅

🚀 快速开始

先决条件

• Node.js（v16或更高版本）
• npm（附带Node.js）
• Google API密钥
• Browserbaseneneneba API密钥和项目ID
• Android SDK（用于Android测试）

安装

1. 克隆存储库：

   git clone https://github.com/yourusername/web-automation-android-suite.git
   cd web-automation-android-suite

1. 安装依赖项：

   npm install

1. 配置环境变量：

   cp .env.template .env
   # Edit .env with your API keys

1. 运行安装脚本：

   npm run setup

1. 启动演示服务器：

   npm run dev

1. 打开浏览器：

引导到 http://localhost:3000

🔧 配置

环境变量（.env）

# Google API Configuration
GOOGLE_API_KEY=your_google_api_key_here

# Browserbase Configuration
BROWSERBASE_API_KEY=your_browserbase_api_key_here
BROWSERBASE_PROJECT_ID=your_browserbase_project_id_here

# Gemini API Key (for advanced AI features)
GEMINI_API_KEY=your_gemini_api_key_here

# Optional: Advanced Configuration
BROWSERBASE_CONTEXT_ID=your_context_id_here
BROWSERBASE_PROXY_ENABLED=false
BROWSERBASE_STEALTH_MODE=false

MCP配置（MCP-config.json）

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "${BROWSERBASE_API_KEY}",
        "BROWSERBASE_PROJECT_ID": "${BROWSERBASE_PROJECT_ID}",
        "GEMINI_API_KEY": "${GEMINI_API_KEY}"
      }
    },
    "google-adk": {
      "command": "npx",
      "args": ["@google/adk-mcp-server"],
      "env": {
        "GOOGLE_API_KEY": "${GOOGLE_API_KEY}"
      }
    }
  }
}

📚 使用示例

浏览器自动化

1. 导航和屏幕截图：

   // Navigate to a website and take a screenshot
   const browser = new BrowserAutomation();
   await browser.navigate('https://google.com');
   await browser.takeScreenshot('google-homepage.png');

1. 提取数据：

   // Extract product information from an e-commerce site
   const scraper = new WebScraper();
   const products = await scraper.scrapeEcommerceProducts('https://example-store.com');
   console.log(products);

1. 填写表格：

   // Automate form filling
   await browser.fillForm({
     'input[name="email"]': 'user@example.com',
     'input[name="password"]': 'password123'
   });

Android测试

1. 列出设备：

   const tester = new AndroidTester();
   const devices = await tester.getConnectedDevices();
   console.log(devices);

1. 安装应用程序：

   await tester.selectDevice();
   await tester.installApp('./app.apk');

1. 拍摄屏幕截图：

   await tester.takeScreenshot('device-screenshot.png');

🛠️ 可用脚本

# Setup and testing
npm run setup          # Run MCP setup script
npm run test           # Run comprehensive tests
npm run quick-test     # Run quick functionality test
npm run setup-cursor   # Setup for Cursor IDE

# Development
npm run dev            # Start demo server
npm run lint           # Run ESLint
npm run format         # Format code with Prettier

📁 项目结构

web-automation-android-suite/
├── 📄 README.md                 # This file
├── 📄 package.json              # Project dependencies and scripts
├── 📄 mcp-config.json          # MCP server configuration
├── 📄 .env.template            # Environment variables template
├── 📁 examples/                # Example scripts and demos
│   ├── 📄 demo-server.js       # Express demo server
│   ├── 📄 web-scraper.js       # Web scraping examples
│   └── 📄 android-tester.js    # Android testing examples
├── 📁 public/                  # Web interface files
│   └── 📄 index.html           # Main web interface
├── 📁 scripts/                 # PowerShell setup scripts
│   ├── 📄 setup-mcp.ps1        # MCP setup
│   ├── 📄 test-mcp.ps1         # MCP testing
│   └── 📄 quick-test.ps1       # Quick tests
└── 📁 docs/                    # Documentation
    ├── 📄 setup-guide.md       # Detailed setup guide
    └── 📄 troubleshooting.md    # Troubleshooting guide

🔑 获取API密钥

Google API密钥

1. 访问 谷歌云控制台
2. 创建新项目或选择现有项目
3. 启用所需的API
4. 创建凭据（API密钥）
5. 将API密钥复制到 .env 文件

浏览器基础凭据

1. 访问 浏览器基础
2. 注册一个账户
3. 从仪表板获取API密钥和项目ID
4. 将它们添加到您的 .env 文件

Gemini API密钥

1. 访问 谷歌人工智能工作室
2. 创建新的API密钥
3. 将其添加到您的 .env 文件

🚨 安全最佳实践

• ✅ 永远不要提交API密钥 到版本控制
• ✅ 使用环境变量 敏感数据
• ✅ 保持你的 .env 文件 在……里面 .gitignore
• ✅ 使用 .env.template 作为参考
• ✅ 旋转API键 定期
• ✅ 监控使用情况 的API密钥

🐛 故障排除

常见问题

1. Browserbase API密钥错误：

- 确保您的API密钥正确无误 - 检查您的项目ID是否有效 - 验证您的Browserbase帐户是否处于活动状态

1. Google ADK连接问题：

- 确保Android设备通过USB连接 - 在设备上启用USB调试 - 如果需要，安装ADB驱动程序

1. MCP客户端问题：

- 配置更改后重新启动MCP客户端 - 检查配置JSON是否有效 - 验证是否已设置所有环境变量

获取帮助

• 📖 浏览器基础文档
• 📖 MCP规范
• 📖 谷歌ADK文档
• 🐛 创建问题

🤝 贡献

我们欢迎捐款！请查看我们的 贡献指南 了解详情。

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 如果适用，添加测试
5. 提交拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

• 浏览器基础 用于云浏览器自动化
• 谷歌ADK 用于Android测试
• 主控程序 对于协议规范
• Express.js 对于web服务器
• 字体棒极了 对于图标

______________________________________________________________________

由以下材料制成❤️ 面向自动化社区