求助：在Cypress中验证Bootstrap单选按钮是否被选中

有效解决方案 #

对于原生<input type="radio">元素，无论点击后CSS类是否变化，直接检查其checked属性是最可靠的验证方式，以下是两种可行实现：

方法1：直接断言checked状态 #

// 简洁写法，验证元素是否处于选中状态
cy.get('[data-testid="g-male-0"]').should('be.checked');

// 更精确地检查DOM属性/属性值
cy.get('[data-testid="g-male-0"]').should('have.attr', 'checked');
// 或者通过prop方法获取原生属性值
cy.get('[data-testid="g-male-0"]').invoke('prop', 'checked').should('be.true');

方法2：结合表单控件值验证 #

由于该单选按钮绑定了formcontrolname="gender"，也可以通过检查表单的当前值来间接验证：

// 假设表单的选择器为对应form元素
cy.get('form').invoke('val').should('include', { gender: 'M' });

原方法失效原因说明 #

1. document.querySelector的问题：
   直接在Cypress命令外使用document.querySelector会绕过Cypress的异步执行机制，可能在元素状态未更新时就获取了属性值，导致结果不准确。必须通过Cypress的API来操作和断言元素。

2. 检查类的方法不适用：
   你使用的mat-radio-button mat-accent mat-radio-checked是Angular Material单选按钮的类，但目标元素是Bootstrap的form-check-input，类本身不匹配；且该单选按钮点击后确实不会添加选中相关类，因此这种方法自然失效。

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