Angular中mat-checkbox focus状态Cypress测试不生效问题求助

错误根因 #

1. 元素查找逻辑错误：你在.mat-checkbox-input（隐藏的原生input元素）上调用find()方法查找目标样式类，但input是自闭和元素，不存在任何子节点，必然找不到目标元素。
2. 样式类匹配错误：从你提供的完整HTML结构可以看出，当前版本Angular Material的mat-checkbox聚焦态效果不是通过.mat-checkbox-focus-overlay类实现的，对应的样式承载元素是.mat-checkbox-ripple下的.mat-ripple-element。

修正后测试代码 #

it('focused opacity and color', () => {  
  // 先定位到mat-checkbox外层容器
  cy.get('.mat-checkbox[data-cy=selected]').first()
    // 找到内部input元素触发聚焦
    .find('.mat-checkbox-input')
    .focus()
    // 回到外层容器层级查找聚焦波纹元素
    .closest('.mat-checkbox')
    .find('.mat-checkbox-ripple .mat-ripple-element')
    .then((rippleEl) => {
      cy.wrap(rippleEl).should('have.css', 'opacity', '0.20');
      // 无自定义颜色断言插件时直接用rgb格式判断
      cy.wrap(rippleEl).should('have.css', 'background-color', 'rgb(0, 0, 119)');
      // 若已安装颜色断言插件可保留以下写法
      // cy.wrap(rippleEl).and('be.colored', '#00777');
    });
});

额外注意事项 #

• 你提供的示例HTML中mat-checkbox的data-cy属性值为unselected，请确认你要测试的选中态checkbox的data-cy确实为selected，避免元素定位失败。
• Cypress默认获取的background-color属性值为RGB格式，没有安装自定义颜色断言插件的情况下直接用RGB值做断言兼容性更好。

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