javascript - 在 Cypress 中覆盖 cy.click() 命令的正确方法是什么？

Question

我正在尝试为 cy.click() 建立覆盖添加一个附加断言，该断言在单击元素之前必须为真。我知道我可以使用自定义命令来做到这一点，但我宁愿通过覆盖内置命令来做到这一点，这样我们现有的测试都无需更新即可获得修复，因此我们不需要记住使用将来会有不同的点击方法。
我目前的代码是:

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {
    cy.wrap(subject).should('not.have.attr', 'disabled').then(() => {
        return originalFn(subject,options);
    })
});

基本上，它应该检查一个额外的断言(等待它成为真，因为使用 should )然后执行内置点击。我的理由是内置的点击断言不能识别某些元素上的 disabled 属性(例如， <a> 总是被认为是启用的，即使它有 disabled 属性， https://github.com/cypress-io/cypress/issues/5903 )。这适用于只需单击的测试，但在 cy.type 时失败并显示以下消息或 cy.select被调用，可能是因为那些在内部使用点击？

cypress_runner.js:199855 CypressError: Timed out retrying: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.

The command that returned the promise was:

  > `cy.type()`

The cy command you invoked inside the promise was:

  > `cy.wrap()`

Because Cypress commands are already promise-like, you don't need to wrap them or return your own promise.

Cypress will resolve your command with whatever the final Cypress command yields.

The reason this is an error instead of a warning is because Cypress internally queues commands serially whereas Promises execute as soon as they are invoked. Attempting to reconcile this would prevent Cypress from ever resolving.

我找到了 https://github.com/cypress-io/cypress/issues/3838 ，但它在没有真正解决这个问题的情况下就关闭了。什么是覆盖点击而不导致其他似乎在内部调用它的方法出现问题的正确方法？

Answer 1

根据引用的问题，我认为没有“正确”的方法来覆盖点击，但对于您的用例，解决方案是查看 force 选项。
当.type()发出单击它设置强制选项，请参阅 type.js

force: true, // force the click, avoid waiting

同 select.js
从 force忽略禁用属性，调用时无需检查禁用 .click({force: true}) .
以下似乎工作正常，但我不确定它是否涵盖所有场景

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {

  if (!options?.force) {
    cy.wrap(subject).should('not.have.attr', 'disabled').then(() => {
      return originalFn(subject,options);
    })
  } else {
    return originalFn(subject,options);
  }
})

对于检查除 disabled 以外的内容的情况，有一个 无证国有 Assets current这给出了命令类型

Cypress.Commands.overwrite('click', (originalFn, subject, options) => {

  const currentCommand = cy.state('current').attributes.name;

  if (currentCommand === 'click') {
    cy.wrap(subject).should('not.have.attr', 'disabled').then(() => {
      return originalFn(subject,options);
    })
  } else {
    return originalFn(subject,options);
  }
})