如何在 cypress 中创建可链接的 `if...()` 命令？

Question

假设我有一个可变的用户名。

现在，我的可链接函数想要检查用户名是否为空。

之前：

if(username !== "") {
   cy.get('#username').type(username)
}

之后（预期）：

cy.get('#username').type(username).ifNotEmpty()        //ifNotEmpty will be my chainable func

所以我的问题是这可能吗？如果是的话，怎么办？

Answer 1

您可能只想做一个

.type()

变化

Cypress.Commands.add('typeIfNotEmpty', { prevSubject: true }, (subject, textToType) => {
  if (textToType) {
   cy.wrap(subject).type(textToType)
  }
  return subject  // allow further chaining
})

cy.get('#username')
  .typeIfNotEmpty(username)
  .should(...)               // some assertion on '#username' element

Answer 2

如果您想使用自定义命令来解决此问题，您可以使用父命令，因为它必须位于之前您想要影响的命令：

// usage

cy.get('input').ifNotEmpty().type(textToType)

Cypress 使用

cy.state()

公开命令的内部状态，步骤如下：

1. 使用

   cy.state('current')

   获取当前命令

2. 使用

   cy.state('current').get('next')

   移至下一个命令

3. 使用

   nextCommand.get('args')

   检查它的参数

4. 如果为空，则使用

   nextCommand.skip()

   跳过下一个命令

这是完整的自定义命令：

Cypress.Commands.add('ifNotEmpty', {prevSubject:'element'}, (subject) => {

  const nextCommand = cy.state('current').get('next')
  const args = nextCommand.get('args')

  if (args[0] === '') {
    nextCommand.skip()
    const nextName = nextCommand.get('name')
    Cypress.log({displayName: nextName, message: 'skipping because empty'})
  }

  return cy.wrap(subject, {log:false})
})

为了测试它，我传入一个空字符串变量。

it('guards against an empty parameter in the next command', () => {
  ...
  const textToType = ''
  cy.get('input')
    .ifNotEmpty()           // look ahead and modify the next command
    .type(textToType)
  
})

---

说明

当您将变量传递给

.type(someVariable)

并且该值恰好为空时，Cypress 会抛出错误。

这是 Cypress 不允许条件测试的结果 - 期望您始终知道传递到

.type()

命令的内容。

通过添加

.ifNotEmpty()

自定义命令，您可以避免此问题，不仅适用于

.type()

命令，还适用于您需要检查队列中即将执行的命令的任何其他地方。

Answer 3

您可以添加自定义 Cypress 命令来实现此目的。这些被称为

child commands

。 更多信息请点击这里。

Cypress.Commands.add('ifNotEmpty', { prevSubject: true }, (subject) => {
  // code
})