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）能夠執行前端測試任務。