Cypress 10.3全局自定义命令配置问题：cy.getBody未定义报错

核心修复步骤 #

1. 确认自定义命令文件的导入逻辑 #

你提到在support目录创建了functions.ts，但代码示例里是commands.ts，先理清文件路径与导入：

• 若自定义命令写在functions.ts，必须在cypress/support/e2e.ts中显式导入：

  import './functions'
  

• 若使用默认的commands.ts，Cypress 10+会自动加载support目录下的文件，但保险起见仍建议在e2e.ts中添加导入语句。

2. 修正类型接口与命令实现的匹配问题 #

你的接口定义getBody()返回Chainable<Element>，但实际命令返回的是字符串，类型不匹配会导致TypeScript推断异常，进而影响命令注册：

// 场景1：返回页面body元素链（符合Cypress操作习惯）
declare global {
  namespace Cypress {
    interface Chainable {
      getBody(): Chainable<JQuery<HTMLElement>>
    }
  }  
}

Cypress.Commands.add('getBody', () => {
  return cy.get('body') // 返回Cypress命令链，而非原始值
})

// 场景2：返回自定义字符串（需同步修改接口类型）
declare global {
  namespace Cypress {
    interface Chainable {
      getBody(): Chainable<string>
    }
  }  
}

Cypress.Commands.add('getBody', () => {
  return cy.wrap('some text ...') // 用cy.wrap包装，保持命令链特性
})

3. 调整tsconfig.json配置 #

确保TypeScript能正确识别Cypress全局类型，修改配置如下：

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "cypress-file-upload"],
    "rootDir": "./",
    "moduleResolution": "node",
    "noEmit": true, // Cypress无需编译输出，避免冗余报错
    "strict": false // 若严格模式引发类型冲突，可暂时关闭排查
  },
  "include": ["cypress/**/*.ts", "cypress/**/*.js"] // 明确指定Cypress目录下的文件
}

4. 验证命令注册规则 #

• 自定义命令必须通过Cypress.Commands.add()注册，不能用普通函数声明
• 禁止直接返回非Cypress链的原始值，必须用cy.wrap()包装以维持链式调用特性

验证流程 #

1. 重启Cypress测试 runner（修改全局类型或配置后需重启生效）
2. 在测试文件中调用cy.getBody().then(res => console.log(res))，查看控制台输出是否符合预期
3. 检查IDE是否出现类型提示，若仍无提示，可删除node_modules/.cache后重新启动

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