UI Test MCP 使用说明

项目简介

UI Test MCP 是一个 MCP 服务器实现，专注于提供 UI 组件的自动化测试能力。它集成了 Stagehand 和 OpenAI，允许开发者通过自然语言指令和组件代码，自动生成和执行 UI 测试，并返回测试结果和截图。

主要功能点

AI 驱动的 UI 测试生成: 利用 OpenAI 的强大能力，根据组件代码和测试指令，自动生成 Stagehand UI 测试代码。
Stagehand 集成: 深度集成 Stagehand UI 自动化工具，执行生成的测试代码，模拟用户行为并验证组件功能。
组件测试: 专门用于测试 React 和 Next.js UI 组件，确保组件渲染正确、交互元素工作正常、状态管理符合预期以及满足可访问性要求。
截图报告: 测试执行完成后，服务器会返回组件的截图，作为测试结果的可视化补充。
MCP 协议标准: 遵循 Model Context Protocol 标准，易于与各种 MCP 客户端集成，实现上下文信息的标准化交互。

安装步骤

安装 Node.js 和 npm: 确保你的系统中已安装 Node.js 和 npm (Node 包管理器)。

克隆仓库: 将 'ui-test-mcp' 仓库克隆到本地。

git clone https://github.com/Kylejeong2/stagehand-mcp-ui-tester.git
cd stagehand-mcp-ui-tester/ui-test-mcp

安装依赖: 在 'ui-test-mcp' 目录下运行 npm 命令安装项目依赖。
```
npm install
```
设置 OpenAI API 密钥: 你需要设置 OpenAI API 密钥才能使用代码生成功能。在你的系统环境变量中设置 'OPENAI_API_KEY' 环境变量，并赋值你的 OpenAI API 密钥。

服务器配置

MCP 客户端需要配置以下 JSON 信息才能连接到 UI Test MCP 服务器。

{
  "serverName": "UI Test MCP",
  "command": "node",
  "args": [
    "src/index.js"
  ],
  "transport": "stdio"
}

配置参数说明:

'serverName': 服务器名称，设置为 "UI Test MCP"。
'command': 启动服务器的命令，这里使用 'node' 运行 JavaScript 代码。
'args': 命令参数，指向服务器入口文件 'src/index.js'。
'transport': 传输协议，使用标准输入输出流 'stdio'。

基本使用方法

启动服务器: 在 'ui-test-mcp/ui-test-mcp' 目录下，运行以下命令启动 UI Test MCP 服务器。
```
npm start
```
或者直接运行入口文件：
```
node src/index.js
```
服务器成功启动后，将监听 MCP 客户端的请求。
MCP 客户端调用 'test_component' 工具:
- 使用 MCP 客户端向 UI Test MCP 服务器发送 'CallToolRequest' 请求。
- 指定 'tool name' 为 'test_component'。
- 在 'arguments' 中提供以下参数：
  - 'componentCode': 要测试的 React 组件的源代码 (字符串)。
  - 'componentName': 组件的名称 (字符串)。
  - 'testUrl': 组件渲染所在的 URL 地址 (字符串)，Stagehand 将在该 URL 下进行测试。
  - 'testInstructions' (可选): 额外的测试指令或要求 (字符串)，例如 "测试表单提交功能" 或 "验证错误提示信息"。
获取测试结果:
- 服务器将执行测试并返回 'CallToolResult' 响应。
- 响应的 'content' 字段包含测试结果，通常包括：
  - 'text' 类型的内容: 生成的 Stagehand 测试代码。
  - 'image' 类型的内容: 被测组件的屏幕截图 (PNG 格式，Base64 编码)。
- 如果测试过程中发生错误，'isError' 字段将为 'true'，并且 'content' 中会包含错误信息和操作日志。

示例请求 (假设使用 JSON-RPC over stdio 客户端):

{
  "jsonrpc": "2.0",
  "method": "call_tool",
  "params": {
    "name": "test_component",
    "arguments": {
      "componentCode": "// React 组件代码 ...",
      "componentName": "MyComponent",
      "testUrl": "http://localhost:3000/components/my-component",
      "testInstructions": "验证按钮点击事件"
    }
  },
  "id": "1"
}

注意:

确保 'testUrl' 是可访问的，并且组件在该 URL 下正常渲染。
'OPENAI_API_KEY' 的有效性和额度会影响测试代码生成的功能。
初次运行可能需要一些时间初始化 Stagehand 和 OpenAI 连接。

关键词