typescript - 带有 typescript 自​​定义命令的 Cypress 类型错误

Question

我已经为我的 Cypress 测试设置了自定义命令:

// cypress/support/commands.ts
/// <reference types="cypress"/>

Cypress.Commands.add('getByTestId', (target: [string], timeout: number = 0) => {
    target[0] = `[data-testid="${target[0]}"]`;
    return cy.get(target.join('>'), { timeout });
});



// cypress/support/index.ts
/// <reference types="cypress" />
declare global {
namespace Cypress {
    interface Chainable {
        getByTestId(id: string): Chainable<Element>;
    }
  }
}

这些是我设置命令的文件。

在编写测试时我有这个错误，即使我在我的文件顶部有这个错误 /// <reference types="cypress" /> :

cypress/integration/filename.test.e2e.ts

Answer 1

我也有 Cypress TypeScript 支持，但一开始遇到了一些问题。以下设置对我有用:

// cypress/plugins/index.ts
/// <reference types="cypress" />

// cypress/support/commands.ts
declare namespace Cypress {
  interface Chainable<Subject> {
    getByTestId(selector: string, ...options: any): Chainable<JQuery<HTMLElement>>;
  }
}

// cypress/support/commands.ts
Cypress.Commands.add('getByTestId', (selector, ...options) => {
  return cy.get(`[data-test=${selector}]`, ...options);
});

所以我在 plugins/index.ts 文件中有类型引用，在 support/commands.ts 中有命名空间声明和自定义命令定义。我使用的是当前最新的 Cypress 版本 9.3.1。

此外，我还注意到的另一件事是，当您尝试将内容导入 commands.ts 时，您也会遇到您描述的错误。