Cypress Po And Tests Generator

MCP Cypress 页面对象生成器

此 MCP 服务会自动为提供的任意网页生成 Cypress 页面对象类。

NPM 包：

功能

• 网页抓取：使用 Puppeteer 获取并渲染网页
• HTML 解析：使用 Cheerio 解析 HTML 并提取元素信息
• 页面对象生成：创建完整的 TypeScript 页面对象类，其中包含：
  • 私有元素定位器
  • 公共 getter 方法
  • 交互方法（点击、输入、选择等）

示例提示词：

Create a page object file using the following url: https://www.saucedemo.com/ 

生成的输出

服务会生成：

1. 页面对象类（{ClassName}.ts）

export class ExampleComLoginPage {
  // Private elements
  #elements = {
    button_login: () => cy.get('#login-button'),
    input_username: () => cy.get('input[name="username"]'),
    link_home: () => cy.contains('a', 'Home')
  }

  // Public getters
  get ButtonLogin() { return this.#elements.button_login() }
  get InputUsername() { return this.#elements.input_username() }
  get LinkHome() { return this.#elements.link_home() }

  // Interaction methods
  clickButtonLogin() { return this.#elements.button_login().click() }
  typeInputUsername(text: string) { return this.#elements.input_username().type(text) }
  clickLinkHome() { return this.#elements.link_home().click() }

}

支持的元素类型

• 按钮：带验证的点击交互
• 输入字段：输入、清除、勾选/取消勾选（适用于复选框/单选框）
• 链接：带导航验证的点击交互
• 选择下拉框：带验证的选项选择
• 文本区域：输入和清除，并验证内容
• 表单：提交交互，并处理成功/错误情况

安装

按照标准流程，在你选择的客户端中安装 MCP

用法

1. 启动服务：

   node index.js
   

2. 与 MCP 客户端搭配使用： 服务会公开一个接受 URL 参数的 generatePageObjectFile 工具。

   工具调用示例：

   {
     "method": "tools/call",
     "params": {
       "name": "generatePageObjectFile",
       "arguments": {
         "url": "https://example.com/login"
       }
     }
   }
   

3. 响应格式： 服务会返回页面对象类：

   // ===== PAGE OBJECT CLASS =====
   // Save this as: ExampleComLoginPage.ts
   export class ExampleComLoginPage { ... } 
   
   

依赖项

• @modelcontextprotocol/sdk：MCP 服务实现
• puppeteer：网页抓取和页面渲染
• cheerio：HTML 解析和元素选择
• zod：架构验证
• typescript：类型安全

错误处理

服务包含全面的错误处理机制，可应对：

• 无效 URL
• 网络连接问题
• 页面加载失败
• HTML 解析错误

浏览器配置

服务使用 Puppeteer，并采用以下设置：

• 在服务端环境中使用无头模式
• 在容器化部署中使用无沙箱模式
• 等待网络空闲，以加载动态内容

贡献

如需支持新的元素类型、交互方法或测试模式，请修改 index.js 中的 generatePageObjectClass 函数。

故障排除：更新到最新 MCP 版本

如果你准备更新到此 MCP 服务包的最新版本，但 npm 没有拉取新版本，请尝试以下操作：

1. 清除 NPM 缓存并重新安装软件包：

   npm cache clean --force
   npm install @jprealini/cypress-mcp@latest --save-dev
   

2. 如果使用锁文件（package-lock.json 或 yarn.lock），请删除该文件并运行：

   npm install
   

3. 对于全局安装，请全局更新：

   npm install -g @jprealini/cypress-mcp@latest
   

4. 验证已安装的版本：

   npm list @jprealini/cypress-mcp
   

这些步骤可确保用户始终获取最新发布的 MCP 版本，并避免缓存或锁定旧版本导致的问题。

示例：生成的页面对象格式（saucedemo.com）

以下是 MCP 为 saucedemo.com 生成的页面对象格式示例：

export class Swag_labsPage {
  // Private elements
  #elements = {
    inputUsername: () => cy.get('[data-test="username"]'),
    inputPassword: () => cy.get('[data-test="password"]'),
    inputLoginButton: () => cy.get('[data-test="login-button"]')
  }

  // Element meta (currently not used for bulk actions)

  // Public getters
  get inputUsername() { return this.#elements.inputUsername() }
  get inputPassword() { return this.#elements.inputPassword() }
  get inputLoginButton() { return this.#elements.inputLoginButton() }

  // Value/State getters
  getValueInputUsername() { return this.#elements.inputUsername().invoke('val') }
  getValueInputPassword() { return this.#elements.inputPassword().invoke('val') }
  getTextInputLoginButton() { return this.#elements.inputLoginButton().invoke('text') }

  // Interaction methods (per-element actions)
  typeInputUsername(text) { return this.#elements.inputUsername().type(text) }
  clearInputUsername() { return this.#elements.inputUsername().clear() }
  typeInputPassword(text) { return this.#elements.inputPassword().type(text) }
  clearInputPassword() { return this.#elements.inputPassword().clear() }
  clickInputLoginButton() { return this.#elements.inputLoginButton().click() }
}

此格式遵循较常用的页面对象标准之一，使用数据属性作为选择器、封装私有元素、提供公共 getter 和值/状态 getter，并为每个元素提供交互方法。

如果你需要或希望使用其他模式，可以使用此 MCP 生成此基础结构，然后使用自己的指令集进行编辑，以满足需求。可使用如下提示词：

Create a page object file using the following url: https://www.saucedemo.com/ and after creating it, edit it to meet the requirements described in my instructions.md file