Auto Probe MCP

AutoProbeMCP-您的代理浏览器

使用Playwright提供浏览器自动化功能的模型上下文协议（MCP）服务器。 该服务器使AI助手能够通过标准化的界面与网页进行交互。

非常适合使用AI助手进行web自动化、测试和调试工作流程，包括：

• 聊天论坛 代理 -在VS Code中为AI代理提供web交互功能
• GitHub Copilot 聊天助手 -通过浏览器自动化增强您的开发工作流程
• 任何兼容MCP的AI助手 -AI工具的通用浏览器自动化

特性

• 多浏览器支持：Chromium、Firefox和WebKit
• 综合自动化：导航、单击、键入、截图等
• JavaScript执行：在浏览器上下文中运行自定义脚本
• 元素交互：等待元素，获取文本内容，并与表单交互
• 屏幕截图功能：捕获完整页面或视口屏幕截图
• 类型安全：使用TypeScript构建，并使用Zod进行运行时验证

安装

npm install
npm run build

确保安装了Playwright浏览器：

npx playwright install

对于系统依赖关系（Linux）：

sudo npx playwright install-deps

用法

VS代码集成

在VS Code中配置MCP服务器，方法是添加 settings.json 或工作空间配置：

"mcp": {
    "servers": {
      "browser-automation": {
        "command": "node",
        "args": [
          "/home/yourUserName/mcp-browser-server/build/index.js"
        ],
        "env": {}
      }
    }
  }

配置后，Chat.fans代理和GitHub Copilot Chat可以使用浏览器自动化工具进行web测试、抓取和自动化任务。

可用的VS代码任务

• 构建: Ctrl+Shift+P → “任务：运行任务”→ “构建”
• 发展模式: Ctrl+Shift+P → “任务：运行任务”→ "dev"
• 测试MCP服务器: Ctrl+Shift+P → “任务：运行任务”→ “测试mcp服务器”

可用工具

1. 启动浏览器 -启动新的浏览器实例
2. 导航 -转到特定URL
3. click_element -点击页面元素
4. 类型文本 -在表单字段中输入文本
5. 截图 -捕获页面截图
6. get_element_text -从元素中提取文本
7. wait_for_element -等待元素出现/消失
8. evaluate_javascript -运行自定义JavaScript
9. get_sole_log -获取浏览器控制台日志（日志、信息、警告、错误、调试）
10. 分析屏幕截图 -使用Gemma3进行AI驱动的屏幕截图分析（需要Ollama）
11. get_page_info -获取当前页面信息
12. 关闭浏览器 -关闭浏览器实例
13. 滚动 -按指定方向（上/下/左/右）滚动页面
14. check_可扩展性 -检查页面是否可在特定方向上滚动

示例：Web应用程序测试

// Launch browser in headed mode for visual debugging
await launch_browser({ browser: "chromium", headless: false });

// Navigate to login page
await navigate({ url: "http://localhost:3000/login" });

// Fill in credentials
await type_text({ selector: "input[type='email']", text: "user@example.com" });
await type_text({ selector: "input[type='password']", text: "password123" });

// Submit form
await click_element({ selector: "button[type='submit']" });

// Wait for successful login
await wait_for_element({ selector: ".dashboard", timeout: 10000 });

// Check for any console errors during login
await get_console_logs({ level: "error" });

// Take screenshot of dashboard
await screenshot({ fullPage: true, path: "dashboard.png" });

// Get all console logs for debugging
await get_console_logs();

// Scroll down to see more content
await scroll({ direction: "down", pixels: 500, behavior: "smooth" });

// Check if page can be scrolled vertically
await check_scrollability({ direction: "vertical" });

// Scroll back to top
await scroll({ direction: "up", pixels: 500 });

页面滚动和导航

MCP浏览器服务器包括用于导航长页面和检查滚动功能的全面滚动工具：

滚动工具

这 scroll 该工具允许您通过细粒度控制向任何方向滚动页面：

// Scroll down by default amount (100px)
await scroll();

// Scroll in specific directions with custom distances
await scroll({ direction: "down", pixels: 300, behavior: "smooth" });
await scroll({ direction: "up", pixels: 200, behavior: "auto" });
await scroll({ direction: "left", pixels: 150 });
await scroll({ direction: "right", pixels: 150 });

// Smooth scrolling for better user experience
await scroll({ direction: "down", pixels: 500, behavior: "smooth" });

参数：

• direction: "up", "down", "left", "right" （默认值： "down")
• pixels：要滚动的像素数（默认值：100）
• behavior: "auto" 或 "smooth" （默认值： "auto")

滚动性检查工具

这 check_scrollability 该工具确定页面是否可以在特定方向上滚动：

// Check both vertical and horizontal scrollability
await check_scrollability({ direction: "both" });

// Check only vertical scrolling
await check_scrollability({ direction: "vertical" });

// Check only horizontal scrolling  
await check_scrollability({ direction: "horizontal" });

答复包括：

• 当前滚动位置
• 最大滚动距离
• 是否可以在每个方向上滚动
• 详细职位信息

AI驱动的截图分析

这 analyze_screenshot 该工具通过Ollama使用本地Gemma3模型对网页进行人工智能分析。此功能可以描述页面上可见的内容，分析页面结构，并根据上下文查找特定元素。

先决条件

1. 安装Ollama：从下载 去.ai
2. 安装Gemma3型号:

   ollama pull gemma3:4b

1. 启动Ollama服务:

   ollama serve

使用示例

基本屏幕截图分析

// Take and analyze a screenshot with AI
await analyze_screenshot({ 
  fullPage: true,
  model: "gemma3:4b"
});

详细结构分析

// Get detailed analysis of page structure
await analyze_screenshot({ 
  detailed: true,
  pretext: "Focus on navigation elements and form fields"
});

特定上下文分析

// Look for specific elements or issues
await analyze_screenshot({ 
  pretext: "Check if there are any error messages or broken layouts",
  path: "error-check.png"
});

参数

• 完整页面 （布尔值）：仅捕获整个可滚动页面与视口
• 路径 （string）：保存截图的可选文件路径
• 借口 （string）：AI的附加上下文或特定指令
• 模型 （string）：要使用的AI模型（默认值：“gemma3:4b”）
• 详细的 （boolean）：请求详细的结构分析

支持的型号

• gemma3:4b （默认，速度和质量的良好平衡）
• Ollama装置中可用的任何其他具有视觉功能的型号

开发与测试

快速设置

# One-command setup (installs dependencies, browsers, and builds)
npm run setup

# Or step by step:
npm install
npx playwright install
npm run build

开发命令

# Build the project
npm run build

# Run in development mode
npm run dev

# Start the server
npm run start

# Development helper (shows all available commands)
npm run dev-helper help

测试

该项目包括在 tests/ 目录：

# Run basic communication test
npm run test

# Run browser automation demo
npm run test:demo

# Run AI analysis test (requires Ollama)
npm run test:ai-simple

# Check system status
npm run test:status

# Run all tests
npm run test:all

开发助手

使用开发助手执行常见任务：

# Show all available commands
npm run dev-helper help

# Quick setup from scratch
npm run dev-helper setup

# Run comprehensive tests
npm run dev-helper test

# Clean generated files
npm run dev-helper clean

有关测试的更多详细信息，请参阅 测试/README.md.

项目结构

mcp-browser-server/
├── src/                 # TypeScript source code
│   └── index.ts        # Main MCP server implementation
├── build/              # Compiled JavaScript output
├── tests/              # Test scripts and documentation
│   ├── README.md       # Testing documentation
│   ├── simple-test.mjs # Basic communication test
│   ├── demo-test.mjs   # Browser automation demo
│   └── *.mjs          # Additional test files
├── screenshots/        # Generated screenshots from tests
├── package.json        # Project configuration
└── README.md          # This file

许可证

双重许可证：

• 个人使用：个人、教育和非商业用途免费
• 商业用途：需要单独的商业许可证

看 许可证 完整条款。如需商业许可咨询，请联系我们。