测试期间无法识别 TS 中的赛普拉斯自定义命令（'TypeError: cy.a is not a function'）

Question

我有一个非常简单的赛普拉斯测试规范，如下所示：

// integration/connection.ts

describe("First page displayed", function() {
    before(() => {
        cy.visit("/")
    })

    it("Is an error page when no token is given", function() {
        cy.getByDataAttribute("error-page")
    )}
})

现在getByDataAttribute 是一个自定义命令，定义如下：

// support/commands.ts

declare namespace Cypress {
  interface Chainable<Subject> {
    getByDataAttribute: typeof getByDataAttribute
  }
}

/**
 * Get a DOM element by targeting its data-cy attribute value
 * @param data_target data-cy attribute value to target
 */
function getByDataAttribute(data_target: string) {
  return cy.get("[data-cy=" + data_target + "]")
}

Cypress.Commands.add("getByDataAttribute", getByDataAttribute)

如您所见，一切都是用 TypeScript 编写的并且编译良好（我什至为我的自定义命令获取 IntelliSense。）我还有我的 support/index.ts，它只导入命令：

import './commands'

我不知道出了什么问题，但是在运行测试时，赛普拉斯抛出以下错误：

TypeError: cy.getByDataAttribute 不是函数

我的自定义命令以前有效，但当我尝试添加 IntelliSense 时，我开始遇到问题。现在，即使我恢复到香草 JS，该命令也无法识别。我在配置中尝试了很多调整并且不记得我尝试过的所有内容，但我认为现在一切都井井有条并且应该可以工作。但显然不是。

Answer 1

对于 IntelliSense，我们使用以下但在 JS 中：

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

Answer 2

1) 您的示例是否偶然从您的实际自定义命令中剥离出来？并进口任何东西？

我按照一些在线指南遇到了这个问题，但是我的自定义命令使用了从另一个模块导入的对象。在这种情况下，您必须使用全局命名空间声明。无论哪种方式，都值得一试，看看全局命名空间是否适合您

2) 你已经将你的命令添加到Chainable<Subject> 接口，用于链接一些东西，比如cy.get("#something").myCommand()，但是你的命令直接使用cy，所以它应该在@987654325 @接口。

// support/commands.ts
import { someObject } from "someModule";

declare global { // < SEE HERE FOR 1)
  namespace Cypress {
    interface Chainable { // < SEE HERE FOR 2)
      getByDataAttribute: typeof getByDataAttribute
    }
  }
}

/**
 * Get a DOM element by targeting its data-cy attribute value
 * @param data_target data-cy attribute value to target
 */
function getByDataAttribute(data_target: string) {
  // do something with someObject here
  return cy.get("[data-cy=" + data_target + "]")
}

Cypress.Commands.add("getByDataAttribute", getByDataAttribute)


export {}; // < Don't forget this!

查看这里了解更多信息：

https://github.com/cypress-io/cypress/issues/1065#issuecomment-410324355