select_test_mcp by jadragfly - MCP Server

web_test_mcp.cjs 使用说明

项目简介

web_test_mcp.cjs 是一个基于 Node.js 开发的 Web 测试报告管理 MCP 服务，用于收集、存储和管理 Web 测试过程中产生的操作报告。该服务通过 WebSocket 接收测试报告数据，并提供 MCP 协议接口进行报告的查询、删除等管理操作。

功能特点

📊 报告收集：通过 WebSocket 接收并存储 Web 测试操作报告
📋 报告管理：提供 MCP 协议接口，支持查询、查看详情、删除等操作
🔍 调试支持：内置调试模式，方便问题排查
🚀 轻量级设计：代码简洁，依赖少，易于部署和维护

安装与依赖

环境要求

Node.js 12.0 或更高版本
npm 或 yarn 包管理器

安装依赖

npm install ws

配置与启动

配置项

配置项	类型	说明	默认值
MCP_DEBUG	环境变量	调试模式开关，设置为1启用调试日志	未启用
WebSocket端口	硬编码	WebSocket服务监听端口	8982

启动服务

# 普通模式启动
node web_test_mcp.cjs

# 调试模式启动
MCP_DEBUG=1 node web_test_mcp.cjs

接口说明

WebSocket 接口

连接地址

ws://localhost:8982

消息格式

发送报告：

{
  "url": "页面URL",
  "selector": "元素选择器",
  "html": "HTML内容",
  "description": "操作描述",
  "problemDescription": "问题描述",
  "steps": ["步骤1", "步骤2"]
}

确认响应：

{
  "status": "success",
  "message": "操作报告已创建",
  "reportId": "报告ID",
  "totalReports": 报告总数
}

MCP 协议接口

工具列表

get_reports
- 功能：获取所有 Web 测试操作报告列表
- 参数：无
- 返回：所有报告的基本信息列表
get_report_by_id
- 功能：根据ID获取特定的 Web 测试操作报告
- 参数：
  - reportId: 报告ID
- 返回：指定报告的详细信息
delete_report
- 功能：删除指定ID的 Web 测试操作报告
- 参数：
  - reportId: 要删除的报告ID
- 返回：删除结果
clear_all_reports
- 功能：清空所有 Web 测试操作报告
- 参数：无
- 返回：清空结果
get_reports_count
- 功能：获取当前报告总数
- 参数：无
- 返回：报告数量

使用示例

作为服务启动

# 启动MCP服务
node web_test_mcp.cjs

# 输出示例
🚀 Web测试MCP服务器已启动
🌐 WebSocket服务端口: 8982
📋 调试模式: 已关闭

通过WebSocket发送报告

const WebSocket = require('ws');

// 连接到WebSocket服务器
const ws = new WebSocket('ws://localhost:8982');

ws.on('open', () => {
  console.log('已连接到MCP服务');
  
  // 发送测试报告
  const testReport = {
    url: 'https://example.com',
    selector: '#test-button',
    html: '<button id="test-button">测试按钮</button>',
    description: '点击测试按钮',
    problemDescription: '按钮点击后无响应',
    steps: [
      '打开页面',
      '定位测试按钮',
      '点击按钮',
      '观察响应'
    ]
  };
  
  ws.send(JSON.stringify(testReport));
});

ws.on('message', (data) => {
  const response = JSON.parse(data);
  console.log('MCP服务响应:', response);
});

通过MCP协议调用工具

// 通过标准输入输出与MCP服务通信
const request = {
  jsonrpc: "2.0",
  id: "123",
  method: "tools/call",
  params: {
    name: "get_reports",
    arguments: {}
  }
};

// 发送请求到MCP服务
process.stdout.write(JSON.stringify(request) + '\n');

// 接收响应
process.stdin.on('data', (data) => {
  const response = JSON.parse(data.toString());
  console.log('MCP服务响应:', response);
});

调试与日志

启用调试模式

MCP_DEBUG=1 node web_test_mcp.cjs

调试日志示例

[MCP-DEBUG] WebSocket 服务器运行在 ws://localhost:8982
[MCP-DEBUG] 🚀 Web测试MCP服务器已启动
[MCP-DEBUG] 🌐 WebSocket服务端口: 8982
[MCP-DEBUG] 📋 调试模式: 已开启
[MCP-DEBUG] 客户端已连接 (client_1634567890123_4567)
[MCP-DEBUG] --- 收到新操作并创建报告 ---
[MCP-DEBUG] 报告ID: report_1634567890123_4567
[MCP-DEBUG] 操作时间: 2023-10-18T12:34:56.789Z
[MCP-DEBUG] 选择器: #test-button
[MCP-DEBUG] 操作描述: 点击测试按钮
[MCP-DEBUG] ------------------

错误处理

错误类型	描述	解决方法
WebSocket连接失败	无法连接到WebSocket服务	检查服务是否启动，端口是否正确
JSON解析错误	消息格式不正确	确保发送的消息是有效的JSON格式
参数缺失	缺少必要参数	检查请求参数是否完整
报告不存在	找不到指定ID的报告	检查报告ID是否正确

项目结构

web_test_mcp.cjs  # 主程序文件
package.json       # 项目配置文件
.gitignore         # Git忽略文件

扩展与定制

添加新的MCP工具

在 tools/list 方法中添加新工具定义
添加对应的 tools/call 处理逻辑
实现工具的具体功能

修改WebSocket端口

修改代码中的端口配置：

const wss = new WebSocket.Server({ port: 你的端口号 });

演示视频

您可以通过以下链接观看项目的演示视频：

写了个网页测试mcp来复现和修改bug_哔哩哔哩

注意事项

该服务目前将报告存储在内存中，重启服务后数据会丢失
建议在生产环境中配置适当的日志记录
大量报告数据可能导致内存占用增加，定期清理报告

许可证

联系方式

weixin40506752b6b7@AtomGit.com 如有问题或建议，欢迎提交 Issue 或 Pull Request。