赛普拉斯自定义TypeScript命令不是一个功能

Question

我在TypeScript中实现了一个自定义赛普拉斯:

// support/commands.js
const login = () => {
    console.log('Logging in...');
};

Cypress.Commands.add('login', login);

declare namespace Cypress {
    interface Chainable {
        login: typeof login;
    }
}

我试着用它来调用它:

describe('Login Scenario', () => {
    it('should allow a user to login', () => {
        cy.visit('/');
        cy.login();
    });
});

然而,似乎没有建立命令:

TypeError:cy.login不是一个函数

如果我用纯JavaScript编写命令(删除命名空间声明并更新调用(cy as any).login();,它可以工作.

我错过了什么？

Answer 1

我遇到了同样的问题，我找到的所有解决方案都不适合我。在完成了赛普拉斯官方文档和其他解决方案中的所有操作后，我仍然收到错误cy.login is not a function。

问题是我将每个.js文件重命名为.ts并且cypress/support/index.ts不再加载，因为默认情况下 Cypress 只加载 JavaScript 文件。要修复它，您需要将其更改为.ts这样cypress.json（与插件文件相同）：

{
  "supportFile": "cypress/support/index.ts",
  "pluginsFile": "cypress/plugins/index.ts"
}

您还可以将部分添加到declare namespace Cypress {...而commands.ts不是创建index.d.ts文件，以便将声明和实现放在同一个文件中

Answer 2

我通过在我的命令文件夹中添加index.d.ts文件来修复它.在这个文件中我添加了这样的东西:

import { MyCustomType } from '../Types';

declare global {
  namespace Cypress {
    interface Chainable<Subject = any> {
      login(): Chainable<MyCustomType>;
    }
  }
}

如果您不导入或导出任何内容,只需省略全局命名空间声明:

declare namespace Cypress {
  interface Chainable<Subject = any> {
    login(): Chainable<MyCustomType>;
  }
}

请记住,它不适用于Typesciprt <2.3,因为必须支持默认的泛型类型.

Answer 3

这是我使用的，我不必/// <reference types="cypress" />在每个文件的顶部添加。

我有我的自定义类型 <projectroot>/cypress/support/index.d.ts

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

declare namespace Cypress {
  interface Chainable<Subject> {
    getByDataTest(tag: string): Chainable<any>
  }
}

我的<projectroot>/cypress/tsconfig.json样子

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "typeRoots": ["./support"]
  },
  "include": ["**/*.ts"]
}

TypeScript 终于开心了

describe('when I want to select by data test tag', () => {
  it('should select by data test tag', () => {
    cy.getByDataTest('yolo').should('exist')
  });
});