带有 typescript 自定义命令的 Cypress 类型错误答案

【问题标题】：Cypress with typescript custom commands type error带有 typescript 自定义命令的 Cypress 类型错误
【发布时间】：2022-01-20 18:21:08
【问题描述】：

我已经为我的赛普拉斯测试设置了自定义命令：

// 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

【问题讨论】：

标签： typescript cypress e2e-testing

【解决方案1】：

这对我有用：

// tsconfig.json

"include": [
    "cypress/support/*.ts"
]

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

我也有 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 时，您也会收到您描述的错误。

【讨论】：