Cypress MCP Test Generator

Cypress MCP 测试生成器

此项目提供一个模型上下文协议（MCP）服务，可根据自然语言提示词生成 Cypress 测试。只需用通俗的英语描述测试场景，服务就会生成功能完整的 Cypress 测试。

目录

• 设置
• 安装
• 使用方法
• 提示词示例
• 配置
• 故障排除

设置

先决条件

• Node.js（v16 或更高版本）
• npm（随 Node.js 一同安装）
• VS Code
• TypeScript

安装

1. 克隆仓库：

git clone <repository-url>
cd your-project-directory

2. 安装依赖：

npm install

3. 构建项目：

npm run build

4. 创建 VS Code MCP 配置：

mkdir -p .vscode

5. 创建 .vscode/mcp.json，并填入以下内容（请更新路径，使其与您的系统相符）：

{
  "servers": {
    "cypress-mcp": {
      "type": "stdio",
      "command": "node",
      "args": ["path/to/your/project/build/index.js"]
    }
  }
}

使用方法

1. 在 VS Code 中打开您的项目
2. MCP 服务将自动启动
3. 打开 VS Code 的命令面板并输入测试描述
4. 服务将根据您的描述生成 Cypress 测试

工作原理

1. MCP 服务会处理您的自然语言提示词
2. 服务会生成适当的 Cypress 命令和断言
3. 新测试文件会创建在 cypress/e2e 目录中
4. 测试已准备就绪，可使用 Cypress 运行

提示词示例

以下是可供使用的提示词示例：

1. 基本导航和搜索：

"Go to google.com and search for 'cypress testing'"

生成的测试将：

• 导航到 Google
• 如有 Cookie 同意提示，则进行处理
• 输入搜索词
• 验证搜索结果

2. 登录流程：

"Visit login page, enter username '[email protected]', type password 'password123', click login button, and verify dashboard appears"

生成的测试将：

• 导航到登录页面
• 填写凭据
• 提交表单
• 验证登录成功

3. 表单提交：

"Navigate to contact-form.com, fill in name 'John Doe', enter email '[email protected]', type message 'Hello World', click submit button, and verify success message appears"

配置

项目结构

project-root/
├── src/
│   ├── index.ts          # MCP server implementation
│   └── cypress/
│       └── commands.ts   # Custom Cypress commands
├── cypress/
│   ├── e2e/             # Generated test files
│   └── support/         # Support files
└── .vscode/
    └── mcp.json         # MCP server configuration

自定义服务

您可以通过修改以下内容来自定义测试生成：

• src/index.ts 中的测试模板
• src/cypress/commands.ts 中的自定义命令
• 错误处理和重试机制

故障排除

常见问题

1. 服务无法启动

   • 确认 mcp.json 中的路径正确
   • 检查 build/index.js 是否存在
   • 确保 Node.js 版本兼容

2. 测试生成失败

   • 检查提示词格式
   • 查看服务日志中的错误
   • 确保已安装所有依赖

3. VS Code 集成问题

   • 重新加载 VS Code 窗口
   • 检查 VS Code 的输出面板中是否有错误
   • 确认 .vscode/mcp.json 配置正确

错误消息

1. “Server exited before responding”

   • 检查 mcp.json 中的文件路径
   • 重新构建项目
   • 重启 VS Code

2. “Cannot find module”

   • 运行 npm install
   • 检查 build 文件夹是否存在
   • 重新构建项目

日志位置

• 服务日志：VS Code 的输出面板（Cypress MCP Server）
• 生成的测试文件：cypress/e2e 目录
• 构建输出：build 目录

脚本命令

{
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
    "dev": "tsc --watch",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }
}

提示词最佳实践

1. 描述具体

   • 在适用时提供 URL
   • 指定输入内容的确切文本
   • 提及预期的验证结果

2. 使用明确的操作

   • 使用 “visit” 或 “go to” 表示导航
   • 使用 “type” 或 “enter” 表示输入
   • 使用 “click” 表示按钮交互
   • 使用 “verify” 或 “check” 表示断言

3. 包含验证步骤

   • 提及操作后应显示的内容
   • 包含预期文本或元素
   • 如有需要，指定超时时间

支持

如有问题或疑问：

1. 查看故障排除指南
2. 查看服务日志
3. 检查 VS Code 的输出面板
4. 确认文件路径和配置

备注

• 服务会自动处理 Cookie 同意对话框等常见场景
• 生成的测试包含重试机制，以确保可靠性
• 复杂交互可使用自定义命令
• 测试生成时支持 TypeScript

贡献

1. Fork 仓库
2. 创建功能分支
3. 进行修改
4. 提交拉取请求

许可证

此项目采用 MIT 许可证授权，详情请参阅 LICENSE 文件。