如何让自定义Cypress命令在TypeScript项目中正常运行

报错原因及解决步骤 #

你遇到的两个报错都是Cypress + TypeScript项目中自定义命令的常见配置问题，按以下步骤调整即可完全解决： #

第一步：调整类型声明文件位置

不要把自定义命令的类型扩展写在运行时的index.ts里，单独创建cypress/support/commands.d.ts声明文件存放类型定义，内容调整如下：

/// <reference types="cypress" />

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

注意返回值要改为JQuery<HTMLElement>，和cy.get的原生返回类型保持一致，避免类型不匹配报错。 #

第二步：检查Cypress目录下的tsconfig配置

确保cypress/tsconfig.json包含以下配置，让TS可以正确识别Cypress类型和你的自定义声明：

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["ESNext", "dom"],
    "types": ["cypress", "node"],
    "strict": true
  },
  "include": ["**/*.ts", "**/*.d.ts"]
}

如果你的tsconfig放在项目根目录，需要把cypress相关的ts文件路径加到include字段里。 #

第三步：检查命令注册逻辑

确保cypress/support/index.ts里导入了commands文件，命令才能正常注册：

import './commands'

第四步：重启TS服务

修改完配置后，在编辑器里按Ctrl+Shift+P（Mac为Cmd+Shift+P），执行「TypeScript: Restart TS Server」，所有报错就会消失。 #

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