Angular15+Cypress12自定义命令类型错误：loginAs不存在于cy类型

技术栈：Angular v15 和 Cypress V12

组件测试与E2E测试可正常运行，但执行测试时终端出现类型错误，推测是Cypress自定义命令的配置问题。

自定义命令代码 #

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

Cypress.Commands.add('loginAs', (role?: string) => {
  const user = Cypress.env('user');
  cy.visit(Cypress.env('local'));
  cy.get('#mat-input-0', { timeout: 30000 }).should('be.visible').type(user.email);
  cy.get('#mat-input-1', { timeout: 30000 }).should('be.visible').type(user.password);
  cy.get('.btn').click({ force: true });
});

Cypress配置 #

import { defineConfig } from "cypress";
const { verifyDownloadTasks } = require('cy-verify-downloads');

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', verifyDownloadTasks)
    },
    specPattern: "cypress/e2e/**/*.cy.ts",
  },
  chromeWebSecurity: false,
  screenshotsFolder: "cypress/snapshots",
  trashAssetsBeforeRuns: true,
  viewportWidth: 1400,
  viewportHeight: 1200,
  video: false,
  defaultCommandTimeout: 10000,
  env: {
    local: "http://localhost:4200/",
    staging: "hidden",
    backend: "hidden",
    user: {
      email: "hidden",
      password: "hidden",
    },
  },
  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
});

终端错误信息 #

• Property 'loginAs' does not exist on type 'cy & CyEventEmitter'.

已尝试方案 #

Tsconfig配置 #

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "allowJs": true,
    "lib": [
      "es2020",
      "dom"
    ],
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "types": ["cypress", "cy-verify-downloads"],
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  },
  "include": [
    "./src",
    "./cypress/support/index.d.ts"
  ]
}

index.d.ts 文件 #

/// <reference types="cypress" />
export { }

declare global {
  namespace Cypress {
    interface Chainable {
      loginAs(role?: string): Chainable<any>,
      isWelcomePage(): Chainable<any>,
      openMenu(): Chainable<any>,
    }
  }
}

运行组件测试时仍出现相同终端错误。

1. 确保命令文件被正确导入
   在cypress/support/e2e.ts和cypress/support/component.ts中，添加自定义命令文件的导入：

   import './commands' // 假设自定义命令实现写在commands.ts中
   

2. 为Cypress单独配置tsconfig
   在cypress目录下创建专属的tsconfig.json，避免与Angular主配置冲突：

   {
     "extends": "../tsconfig.json",
     "compilerOptions": {
       "types": ["cypress", "cy-verify-downloads"]
     },
     "include": [
       "../node_modules/cypress",
       "./**/*.ts"
     ]
   }
   

3. 修正类型声明语法
   调整index.d.ts的语法格式，符合TypeScript规范：

   /// <reference types="cypress" />
   export {};
   
   declare global {
     namespace Cypress {
       interface Chainable {
         loginAs(role?: string): Chainable<any>;
         isWelcomePage(): Chainable<any>;
         openMenu(): Chainable<any>;
       }
     }
   }
   

4. 重启类型检查服务
   重启IDE的TypeScript语言服务，或执行npx tsc --noEmit手动触发类型检查，清空缓存。

5. 组件测试单独引入类型
   在cypress/component/index.ts中导入类型声明文件：

   import '../support/index.d.ts'
   

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