使用Cypress断言单选框选中状态时报错的问题咨询

• 核心原因：Cypress的be.checked断言是校验原生表单元素（如<input type="radio">）的checked属性，但Angular Material的<mat-radio-button>是封装后的自定义组件，它的选中状态是通过mat-mdc-radio-checked类标记的，而非原生checked属性，所以直接用be.checked会断言失败。

• 解决方法：

  1. 校验组件的选中类：

     cy.get('#mat-radio-6').should('have.class', 'mat-mdc-radio-checked')
     

  2. 定位到内部原生radio元素再断言：
     Angular Material单选框内部会渲染原生<input>，可通过子元素定位后用原生断言：

     cy.get('#mat-radio-6 input').should('be.checked')
     

• 额外验证建议：

  • 若页面存在异步渲染，可添加等待逻辑或结合cy.contains等命令，确保元素完全就绪后再执行断言
  • 检查是否有其他脚本或交互操作，在断言执行前修改了单选框的选中状态

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