MCP Frontend Testing

🚀 MCP前端测试服务器

本MCP服务器为前端测试提供了一系列工具，主要解决前端测试过程中的代码分析、测试生成和执行等问题，为开发者提供了高效、便捷的测试解决方案。

🚀 快速开始

📦 安装指南

1. 克隆仓库： git clone <repository-url> mcp-frontend-testing
2. 进入项目目录： cd mcp-frontend-testing
3. 安装依赖： npm install

启动服务器

HTTP传输方式

# 构建服务器
npm run build

# 以HTTP传输方式启动服务器
npm run start:http

Stdio传输方式

# 构建服务器
npm run build

# 以Stdio传输方式启动服务器
npm run start:stdio

💻 使用示例

工具

• analyzeCode：分析代码并返回分析结果。
  • 参数：
    • code（字符串，必填）：要分析的源代码。
    • language（枚举类型，可选）：代码的语言（javascript | typescript | jsx | tsx，默认值：javascript）。
• generateTest：根据源代码和测试框架生成测试代码。
  • 参数：
    • code（字符串，必填）：要生成测试的源代码。
    • framework（枚举类型，必填）：测试框架（jest | cypress）。
    • type（枚举类型，必填）：测试类型（unit | component | e2e）。
    • language（枚举类型，可选）：代码的语言（javascript | typescript | jsx | tsx，默认值：javascript）。
    • description（字符串，可选）：测试用例的描述。
• runTest：运行测试并返回结果。
  • 参数：
    • sourceCode（字符串，必填）：被测试的源代码。
    • testCode（字符串，必填）：要执行的测试代码。
    • framework（枚举类型，必填）：测试框架（jest | cypress）。
    • type（枚举类型，必填）：测试类型（unit | component | e2e）。
    • config（记录类型，可选）：测试执行的配置对象。
• testReactComponent：专门针对React组件运行组件测试。
  • 参数：
    • componentCode（字符串，必填）：React组件的源代码。
    • testCode（字符串，可选）：组件的测试代码（如果未提供则自动生成）。
    • framework（枚举类型，可选）：测试框架（jest | cypress，默认值：jest）。
    • props（记录类型，可选）：在测试期间传递给组件的属性。
    • autoGenerateTest（布尔类型，可选）：如果未提供测试代码则自动生成（默认值：true）。

资源

• templates：提供测试模板。
  • URI：templates://{framework}/{type}
  • 参数：
    • framework（字符串，必填）：测试框架（jest | cypress）。
    • type（字符串，必填）：模板类型（unit | component）。
• docs：提供测试框架的文档。
  • URI：docs://{topic}
  • 参数：
    • topic（字符串，必填）：文档主题（jest | cypress | react-testing-library）。

🚀 部署

Docker

使用Docker构建并运行服务器：

docker build -t mcp-frontend-testing .
docker run -p 3000:3000 mcp-frontend-testing

云平台

可以将服务器部署到AWS Lambda、Google Cloud Run或Azure Functions等云平台，实现无服务器或容器化部署。

⚠️ 重要提示

此服务器设计为与MCP客户端配合使用，以便大语言模型（LLMs）能够执行前端测试任务。