如何使用命名空间而非自定义命令扩展Cypress.io的cy对象

你需要的cy.product.get()这种命名空间式的扩展完全可行，有比返回函数对象更简洁的实现方式：

具体实现步骤 #

• 直接将命名空间对象挂载到cy原型上
  在cypress/support/commands.js中添加如下代码即可：

// 定义product命名空间下的所有方法
const productNamespace = {
  get: (productId) => {
    // 内部逻辑可以自由调用原生cy命令
    return cy.request(`/api/products/${productId}`)
  },
  create: (productData) => {
    return cy.request('POST', '/api/products', productData)
  },
  delete: (productId) => {
    return cy.request('DELETE', `/api/products/${productId}`)
  }
}

// 将命名空间挂载到cy的原型上，全局生效
Cypress.cy.prototype.product = productNamespace

配置完成后就可以直接使用cy.product.get(1001)的形式调用，不需要额外加一层括号调用。

• TS项目补充类型定义即可获得完整类型提示
  如果是TypeScript项目，在cypress/support/index.d.ts中扩展Cypress的类型定义：

declare namespace Cypress {
  interface Product {
    id: number
    name: string
    price: number
  }
  interface cy {
    product: {
      get: (productId: number) => Cypress.Chainable<Cypress.Response<Product>>
      create: (productData: Omit<Product, 'id'>) => Cypress.Chainable<Cypress.Response<Product>>
      delete: (productId: number) => Cypress.Chainable<Cypress.Response<void>>
    }
  }
}

注意事项 #

• 命名空间的命名要避免和Cypress原生API重名，防止覆盖原生功能
• 命名空间下的方法建议统一返回Cypress.Chainable类型对象，保证可以正常使用.then()、.should()等链式调用能力，和原生命令使用习惯保持一致
• 所有扩展代码建议统一放在cypress/support目录下的命令配置文件中，方便后续统一维护

内容的提问来源于stack exchange，提问作者goldylucks