Cypress无法与页面元素交互：如何正确判断表单字段的disabled禁用状态

云上老周

2026-10-4

解决方案

核心错误点

原条件判断中productName.find('disabled')的用法错误：jQuery的find()方法用于查找子DOM元素，不能用于检测元素自身的属性
直接使用should('be.disabled')断言时，若字段不符合状态会直接终止测试，仅适合需要强制校验状态的场景

可用实现方案

场景1：无需强制断言，仅根据字段状态执行不同逻辑

用jQuery的is(':disabled')方法直接判断元素禁用状态，写法如下：

cy.get('[formcontrolname="productName"]').then($productName => {
  if ($productName.is(':disabled')) {
    cy.log('Field is disabled');
    // 禁用状态下的逻辑写在这里
  } else {
    cy.log('Field isn’t disabled');
    // 启用状态下的逻辑写在这里
  }
});

也可以通过检测disabled属性是否存在实现，效果完全一致：

cy.get('[formcontrolname="productName"]').then($productName => {
  if ($productName.attr('disabled') !== undefined) {
    cy.log('Field is disabled');
  } else {
    cy.log('Field isn’t disabled');
  }
});

场景2：需要强制校验字段状态，不符合就终止测试

直接修正原有断言的语法错误（原代码少了闭合单引号）即可：

// 强制校验字段必须为禁用状态
cy.get('[formcontrolname="productName"]').should('be.disabled');
// 强制校验字段必须为启用状态
cy.get('[formcontrolname="productName"]').should('be.enabled');