Laravel Herd的Puppeter MCP服务器
一个专门为Laravel Herd本地开发测试设计的模型上下文协议（MCP）服务器，使Claude能够使用Puppeteer自动化Laravel应用程序的浏览器测试。
概述
这个MCP服务器通过与Laravel Herd的原生性能环境深度集成，弥合了人工智能驱动的自动化和现代Laravel开发之间的差距。它使Claude能够通过可视化调试、自动化交互和全面的测试自动化来执行复杂的浏览器测试。
主要特点
核心浏览器自动化
- 可视化调试：直接在网页上输出调试信息以供Claude分析
- 交互式测试：执行点击、滚动和JavaScript执行以进行全面测试
- 屏幕截图分析：捕获和分析页面状态以进行迭代调试
- 元素交互：使用CSS选择器和可访问性属性进行高级元素选择
Laravel羊群集成
- 本地.test域支持：通过Herd的dnsmasq自动解析域
- SSL证书管理：使用自动生成的证书进行无缝HTTPS测试
- PHP版本管理：通过Herd代理命令支持特定于站点的PHP版本
- 数据库状态管理：用于并行执行的隔离测试数据库
高性能
- 浏览器池管理：5-10个浏览器实例的高效连接池
- 上下文隔离：通过单独的浏览器上下文独立执行测试
- 性能监控：Chrome DevTools协议集成用于指标收集
- 网络侦听：API模拟和请求/响应分析
建筑
输运模型
- 混合式结构：stdio用于本地开发，HTTP+SSE用于远程访问
- JSON-RPC 2.0：使用OAuth 2.1身份验证的标准MCP协议实现
- 连接池：优化浏览器实例管理（每个实例100-200MB）
安全功能
- OAuth 2.1合规性PKCE支持HTTP传输
- 基于环境的身份验证：确保当地发展准入
- 输入验证：具有测试灵活性的注射攻击预防
- 精细权限：团队环境的范围访问控制
绩效目标
- 响应时间：p95\
cd puppeteer-laravel-mcp-server
Install dependencies
npm install
Configure environment
cp .env.example .env
Edit .env to match your Laravel Herd setup
Build the project
npm run build
Start the MCP server
npm start
### 验证
使用附带的测试脚本测试服务器：
node test-mcp.js
这将验证：
- MCP服务器正确初始化
- 所有工具均已正确注册
- 浏览器池管理工作
- 会话管理功能
- 基本的导航和屏幕截图功能正常工作
### Laravel羊群配置
Ensure Herd is running
herd start
Secure your sites for HTTPS testing (optional)
herd secure your-site.test
Verify PHP version for specific sites
herd php -v --site=your-site.test
## 用法
### 基本浏览器自动化
// Navigate to a Laravel application await page.goto('https://your-app.test');
// Interact with forms await page.fill('#email', 'user@example.com'); await page.click('button[type="submit"]');
// Capture screenshots for debugging await page.screenshot({ path: 'debug.png' });
### Laravel特定功能
// Authentication testing await laravelAuth.loginAs('user@example.com'); await laravelAuth.actingAs(userId);
// Database state management await laravelDb.seed('UserSeeder'); await laravelDb.rollback();
### 使用Claude进行可视化调试
// Output debug information on page await page.evaluate(() => { document.body.innerHTML += `
Debug: Current user ID = ${window.currentUserId}
`; });
// Capture for Claude analysis const screenshot = await page.screenshot(); // Screenshot is automatically sent to Claude for analysis
## 配置
### 环境变量
Browser settings
BROWSER_POOL_SIZE=5 BROWSER_TIMEOUT=30000 HEADLESS=true
Laravel Herd integration
HERD_DIRECTORY=~/Herd DEFAULT_DOMAIN_SUFFIX=.test SSL_ENABLED=true
MCP server settings
MCP_TRANSPORT=stdio MCP_PORT=3000 MCP_AUTH_ENABLED=false
### 浏览器池配置
{ "browserPool": { "min": 0, "max": 10, "acquireTimeoutMillis": 30000, "createTimeoutMillis": 30000, "destroyTimeoutMillis": 5000, "idleTimeoutMillis": 300000, "reapIntervalMillis": 1000, "createRetryIntervalMillis": 200, "autostart": false } }
**备注**：浏览器池配置为 `min: 0` 和 `autostart: false` 确保浏览器仅在需要时通过工具调用启动，而不是在服务器启动时启动。这可以防止MCP健康检查或状态查询启动浏览器实例，优化资源使用并防止不必要的浏览器进程。
## api参考
### 核心工具
#### `navigate(url, options)`
导航到具有Laravel Herd域解析的URL。
#### `screenshot(options)`
捕获页面截图，针对克劳德分析进行了优化。
#### `interact(selector, action, value)`
执行用户交互（单击、键入、滚动）。
#### `execute(script)`
在浏览器上下文中执行JavaScript。
#### `waitFor(selector, options)`
等待具有智能超时处理的元素。
### Laravel集成工具
#### `laravelAuth.loginAs(email)`
以特定用户身份进行身份验证。
#### `laravelDb.seed(seeder)`
运行数据库种子程序以获取测试数据。
#### `laravelRoute.visit(routeName, params)`
使用Laravel路由名称导航。
## 贡献
### 开发设置
Install development dependencies
npm install --dev
Run tests
npm test
Run linting
npm run lint
Start development server with hot reload
npm run dev
### 代码规范
- 遵循Laravel编码规范
- 使用TypeScript实现类型安全
- 实施全面的错误处理
- 包括可视化调试功能
- 维护基于屏幕截图的测试模式
### 测试
Run unit tests
npm run test:unit
Run integration tests with Laravel Herd
npm run test:integration
Run visual regression tests
npm run test:visual
## 实施状态
✅ **完整且功能齐全**
MCP服务器完全通过以下方式实现：
### 已实现核心功能
- **MCP协议合规性**：通过正确的工具注册实现完整的JSON-RPC 2.0
- **浏览器池管理**：5-10个浏览器实例的高效连接池
- **会话管理**：用于并行测试的独立浏览器上下文
- **可视化调试**：Claude分析的页面调试信息显示
- **电脑屏幕截图工具**：自动生成用于AI反馈的屏幕截图
### 可用工具集
- **浏览器导航**: `navigate` 使用Laravel Herd域解析
- **用户交互**: `interact` 用于单击、键入、滚动和选择
- **JavaScript执行**: `execute` 用于自定义浏览器脚本
- **元素等待**: `wait_for` 具有智能超时处理功能
- **视觉捕捉**: `screenshot` 具有多种格式选项
### Laravel羊群集成
- **认证**: `laravel_auth_login`, `laravel_auth_acting_as` 用于用户模拟
- **数据库管理**: `laravel_db_seed` 用于测试数据设置
- **路线导航**: `laravel_route_visit` 用于Laravel基于路线的导航
- **Artisan命令**: `laravel_artisan` 用于Laravel CLI集成
### 测试已验证
- JSON-RPC协议通信
- 工具注册和发现
- 会话创建和管理
- 浏览器池统计信息
- 错误处理和优雅关机
### 生产就绪功能
- TypeScript类型安全贯穿始终
- 具有重试机制的全面错误处理
- 基于环境的配置
- 自动清理和资源管理
- 性能监控和调试功能
这个MCP服务器代表了人工智能驱动的自动化和现代Laravel开发环境的融合，实现了更智能、高效和可靠的测试工作流程，以适应不断变化的web开发需求。