调用时无法识别 Cypress 自定义命令

Question

我在 cypress/support/commands.js 文件中创建了以下自定义命令。

Cypress.Commands.add("login", (username, password) => {
    cy.request({
        method: 'POST',
        form: true,
        url: '/test/login/',
        body: {'username': username, 'password': password}
    })
})

在将登录功能移动到此自定义命令之前，我已经通过了测试并且登录正常。我在我的规范中使用 cy.login(testuser, testpwd) 调用它，但收到以下错误消息：TypeError: cy.login is not a function。在评估任何测试文件之前加载 /cypress/support/commands.js 的 docs say，因此我假设只需在其中放置一个自定义命令即可使该命令可用。我正在运行通过本地 (GUI) 测试运行器进行测试。

Answer 1

index.js 中的所有代码和引用模块都在您的测试文件之前加载。因此，您需要在 index.js 文件中引用（要求）commands.js。但是，您可以直接在测试文件中导入 commands.js 模块，但是您需要在每个测试文件中包含它。推荐的方法是将其包含在 index.js 文件中，您不必担心在测试文件中明确引用。

Answer 2

为了扩展@Dinesh Kumar 的出色，同样重要的是您没有在 cypress.json 中禁用对默认支持文件的支持（我知道，在这种情况下，不幸的命名方案）通过添加行：supportFile: false.

从 cypress.json 中删除该行（如果存在）。如果您不满意使用默认路径 cypress/support/index.js.

，您也可以指定不同的路径

正在 index.js 处理 commands.js 文件 - 都在 support 文件夹中：

// index.js
const customCommands = require('./commands.js')

module.exports = {
  commands: customCommands
}

并仔细检查您的设置：

// cypress.json
{
  "baseUrl": "http://demo.your-domain.test",
  "supportFile": false,  // <-- delete this line present
  ...
}

Answer 3

将一行 import './commands.js' 放入 index.js 中可能会有所帮助。

Answer 4

对我来说，当我在文件 cypress/support/index.d.ts 中添加自定义命令的类型签名时，它起作用了。如需更多信息，请访问：Cypress example - Custom Commands

declare namespace Cypress {
  interface Chainable {
    clearLocalStorageIframe(): void
  }
}

我正在使用 7.2.0 Cypress 和 command.ts 和 index.ts 文件扩展名我已将其更改为 .ts

Answer 5

TL;DR: 检查您的 IDE 是否尝试解析 cy

我陷入了这个问题，因为我的 IDE 的自动完成功能添加了一个依赖项来解析未声明的 cy 对象——由 cypress 注入。

const { default: cy } = require('date-fns/esm/locale/cy/index.js');

这非常不幸，因为自定义命令有一个 ongoing (in 2022) issue，您可以找到大量提示..

调用时无法识别 Cypress 自定义命令

Cypress custom command is not recognized when invoked

javascript

automated-tests

cypress