如何使自定义 cypress 命令与 typescript 一起使用答案

【问题标题】：How to make custom cypress commands work with typescript如何使自定义 cypress 命令与 typescript 一起使用
【发布时间】：2021-11-16 21:03:50
【问题描述】：

我已经按照赛普拉斯文档中的示例代码设置了以下示例存储库，用于设置项目并将打字稿添加到信中： https://github.com/jacobdo2/cypress-ts-starter

我在commands.ts中添加示例命令：

Cypress.Commands.add("dataCy", (id: string) => cy.get(`[data-cy="${id}"]`));

以及index.ts中的声明：

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

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
     */
    dataCy(value: string): Chainable<Element>;
  }
}

我在index.ts 中收到以下错误：

在commands.ts:

【问题讨论】：

如果您按照说明操作但它们不起作用，您需要向维护人员提出。

标签： typescript cypress

【解决方案1】：

您是否尝试过以下操作？

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      dataCy(value: string): Chainable<Element>;
    }
  }
}

您应该在global 声明中添加namespace。它对我来说是正确的。

我正在使用Cypress v8.7.0 和打字稿v4.1.3。

【讨论】：

修复了它。你得到Augmentations for the global scope can only be directly nested in external modules or ambient module declarations 有一个错误，为了摆脱它，我需要在索引文件的某处添加export {}。
我很高兴能帮上忙！
简单的解决方案，应该在赛普拉斯文档中！