使用Cypress自定义命令遇TypeError：cy.login不是函数求解决

以下是逐步排查和修复的方案：

1. 确保Cypress正确加载support文件 #

检查你的cypress.config.ts（或.js）配置，确认supportFile指向正确的文件路径：

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {},
    supportFile: "cypress/support/index.ts", // 路径必须匹配你的实际文件位置
  },
});

如果这个路径错误，Cypress不会加载自定义命令的注册代码，自然找不到cy.login。

2. 修复类型声明文件的问题 #

你的global.d.ts存在几个关键问题，修改如下：

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to select DOM element by data-cy attribute.
       * @example cy.dataCy('greeting')
       */
      dataCy(value: string): Chainable<Element>;

      /**
       * Custom command to login via API request
       * @example cy.login('test@example.com', 'password123')
       */
      login(email: string, password: string): Chainable<void>;
    }
  }
}

// 必须添加这行，确保TS将文件视为模块，类型扩展才会生效
export {};

• 统一参数名：声明里的username改为email，和实际实现保持一致
• 修正返回值类型：你的login命令没有返回字符串，应该定义为Chainable<void>
• 添加export {}：这是TS识别全局类型扩展的必要条件

3. 确认TS配置包含类型声明文件 #

检查你的tsconfig.json（如果Cypress有单独的cypress/tsconfig.json则检查这个），确保include数组包含cypress/global.d.ts：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts", "cypress/global.d.ts"]
}

这一步保证TS能识别你扩展的Cypress类型，避免编辑器提示cy.login不存在。

4. 重启Cypress测试进程 #

修改类型声明或support文件后，Cypress的缓存可能导致修改不生效。完全关闭Cypress窗口，重新启动测试，确保加载最新的代码。

5. 排查support文件的语法错误 #

如果support/index.ts存在语法错误，Cypress可能无法加载整个文件，导致命令注册失败。可以先简化login命令测试：

// support/index.ts
Cypress.Commands.add("login", (email, password) => {
  console.log("Login command executed:", email, password);
  // 原逻辑可以暂时注释，先验证命令是否能被调用
});

运行测试后，如果控制台能打印这条日志，说明命令注册成功，再逐步恢复原有的API请求逻辑。

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