Cypress如何仅在元素取消disabled状态后执行点击操作

核心问题原因 #

原生<a>标签本身不支持标准disabled属性，Angular场景下的a标签禁用状态通常是通过aria-disabled属性、自定义disabled类名、pointer-events: none样式实现的。你用到的Cypress断言should('not.be.disabled')仅会校验元素原生disabled属性，只要该属性不存在就会直接判定断言通过，不会等待你自定义的禁用逻辑解除，所以会出现未到超时时间就提前执行点击、操作不生效的问题。

可行修改方案 #

你可以根据自己项目中a标签的禁用实现方式，选择对应的断言逻辑：

• 如果使用aria-disabled标记禁用状态：

cy.get('whatever-selectors')
  .contains('some text')
  // 等待aria-disabled属性变为false，超时时间设为10秒
  .should('have.attr', 'aria-disabled', 'false', { timeout: 10000 })
  .click();

• 如果使用自定义disabled类名标记禁用状态：

cy.get('whatever-selectors')
  .contains('some text')
  .should('not.have.class', 'disabled', { timeout: 10000 })
  .click();

• 如果使用pointer-events: none样式实现禁用效果：

cy.get('whatever-selectors')
  .contains('some text')
  .should('have.css', 'pointer-events', 'auto', { timeout: 10000 })
  .click();

额外优化建议 #

如果你使用的是Cypress的Angular适配包，可以在操作前添加cy.waitForAngular()，确保Angular侧的异步加载、状态更新逻辑全部执行完成后再执行断言和点击操作，避免状态不同步的问题。

内容的提问来源于stack exchange，提问作者dzenesiz