Cypress 自定义命令无法被 PhpStorm IDE 识别，但可以在测试运行器中运行

Question

我在 Cypress 测试中使用 JavaScript 文件。

在

commands.js

中，我创建了一个自定义命令：

Cypress.Commands.add('selectDropdown', (dropdown) => {
    cy.get('#' + dropdown).click();
})

在我的测试文件中我称之为：

cy.selectDropdown('dropdown1');

当我在测试运行器中运行测试时，这工作正常。唯一的问题是，我的 IDE (PhpStorm) 无法识别该命令。

未解析的函数或方法 selectDropdown()

如何“告诉”IDE，这样的命令存在？

更新：

我在 support 文件夹下创建了一个

index.d.ts

文件（但是我只在 Cypress 中使用 JS 文件，并且那里已经有

index.js

）。

在我放入的 ts 文件中：

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

declare namespace Cypress {
    interface Chainable<Subject> {
        selectDropdownValue(dropdown, value): Chainable<(string)>;
    }
}

现在 IDE 中可以识别

cy.selectDropdownValue

命令，并且在测试运行器中似乎工作正常，但是存在一些问题：

1. 我最好避免创建新的 TypeScript 文件，因为我已经在那里了

   index.js

   并且我在项目中仅使用 JS 文件

2. 声明命名空间 - 不允许使用“命名空间”和“模块”（无命名空间） - 这是一个 Lint 警告，因此需要以某种方式替换它

3. 未使用的接口可链接。不确定我是否需要

   Chainable

   在那里，因为它未使用，也在这里

   selectDropdownValue(dropdown, value): Chainable<(string)>;

任何人都可以帮忙，如何通过 IDE 以 JavaScript 方式识别自定义命令，而不是 TypeScript 吗？

Answer 1

如果您希望 IDE 为您的自定义命令获取 IntelliSense。查看此文档。谢谢 https://github.com/cypress-io/cypress-example-todomvc#cypress-intellisense

Answer 2

好的，所以我按照我在更新中所写的方式解决了这个问题，只是禁用了 lint 检查。

我已经检查了内置的 cypress 可链接的一些原始 cypress 命令，并且有相同的结构，所以我以相同的方式做了它并且它有效。

// tslint:disable-next-line:no-namespace
declare namespace Cypress {
    interface Chainable<Subject = any> {
        selectDropdownValue(dropdown: string, value: string): Chainable<Subject>;
    }
}

Answer 3

仔细检查您的

tsconfig.ts

中是否有此内容

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

那么你的 IDE 应该能够找到自定义的 cypress 命令