Angular15+Cypress12自定义loginAs命令报TS2345类型错误求助

错误原因 #

这个TypeScript错误是因为Cypress默认的类型定义中没有loginAs命令，TypeScript无法识别你新增的自定义命令，因此抛出类型不匹配的报错。

解决步骤 #

1. 添加Cypress命令类型声明 #

在cypress/support目录下创建（或修改）index.d.ts文件，添加以下类型扩展代码：

declare namespace Cypress {
  interface Chainable {
    /**
     * 自定义登录命令，支持传入角色参数
     * @param role 登录用户的角色（可选）
     */
    loginAs(role?: string): Chainable<void>;
  }
}

2. 确保类型文件被TypeScript识别 #

检查项目根目录的tsconfig.json，确保include数组包含Cypress的类型文件，示例配置如下：

{
  "include": [
    "src/**/*",
    "cypress/support/**/*.ts"
  ]
}

3. 验证自定义命令 #

你的loginAs命令代码可保持不变：

// cypress/support/commands.ts
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 });
})

测试用例中的调用方式无需修改：

describe('Check if the app is alive and can login', () => {
  beforeEach(() => {
    cy.loginAs('Super Admin');
  });

  it('See welome page and view courses', () => {
    cy.get(':nth-child(1) > .card-content > .btn', { timeout: 4000 }).scrollIntoView().click();
    cy.url().should('include', '/courses');
  });
});

完成以上步骤后，重新运行Cypress测试，TypeScript的类型错误即可消除。

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