Cypress中should('be.disabled')无法识别已禁用toggle元素求助

问题原因 #

你遇到的问题是因为Cypress的be.disabled断言默认检查原生DOM元素的disabled属性，但你的<aur-toggle>是自定义组件，它并没有原生的disabled属性，而是通过aria-disabled="true"属性和disabled类来标识禁用状态，所以直接用be.disabled或have.attr('disabled')会断言失败。

正确的断言方式 #

根据你的组件DOM结构，推荐以下两种可行的断言方法：

1. 断言aria-disabled属性为true
   组件明确带有aria-disabled="true"属性（这是无障碍设计中标识禁用状态的标准属性），可以直接断言这个属性的值：

   cy.get('aur-toggle')
     .eq(index)
     .should('have.attr', 'aria-disabled', 'true');
   

2. 断言元素包含disabled类
   组件的class列表里有disabled类，也可以通过检查类来确认禁用状态：

   cy.get('aur-toggle')
     .eq(index)
     .should('have.class', 'disabled');
   

补充说明 #

如果你的自定义组件内部封装了原生表单元素（比如<input>或<button>），且禁用状态是通过内部元素的disabled属性实现的，你可以深入到内部元素进行断言：

cy.get('aur-toggle')
  .eq(index)
  .find('input') // 替换为组件内部的原生元素选择器
  .should('be.disabled');

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