Cypress 10 :如何将自定义命令定义为全局命令并在单独的测试文件中使用

Question

我试图在Cypress 10.3中实现一些自定义命令，这些命令可以在不同的测试用例中作为全局命令使用，或者在不同的文件中使用。

我在支持文件夹中创建了一个functions.ts文件，并在其中定义了一个自定义命令，并将其导入到e2e.ts文件中，但是当我想在另一个文件中使用该函数时，我会得到一个错误，即cy.getBody is not a function。

我还试图将该函数定义为接口，但我不知道如何实现该函数作为全局命令。

cypress/support/commands.ts

declare global {
  namespace Cypress {
    interface Chainable {
     
      getBody() : Chainable<Element>

    }
  }  
}

Cypress.Commands.add('getBody', () => {return 'some text ...'})

这里是tsconfig.json

  "compilerOptions": {
    "target": "es6",
    "lib": ["es6", "dom"],
    "types": ["cypress", "cypress-file-upload"],
    "rootDir": "./",
    "moduleResolution": "node"
  },
  "include": ["**/*.ts"]
}

Answer 1

只要将functions.ts导入到cypress/support/e2e.ts中，就应该在每个测试中都有可用的命令。

但是，类型声明有错误的返回类型，

cypress/support/functions.ts

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

declare global {
  namespace Cypress {
    interface Chainable {
      getBody() : Chainable<string>   // you are returning 'some text ...'
    }
  }  
}

Cypress.Commands.add('getBody', () => {
  return cy.wrap('some text ...')
})

export default {}  // syntactic sugar - makes this a module

cypress/support/e2e.ts

import './commands'
import './functions'

...

Answer 2

我也遇到了同样的问题，正如在这个答案中提到的：Stackoverflow answer

问题是我有：

supportFile: false

在我的cypress.config.ts文件中

我刚删除了这条线，一切都很好。