Cypress如何校验带aria-checked属性的自定义复选框选中状态

问题原因 #

你之前的代码执行失败的核心原因是定位元素错误：aria-checked属性没有挂载在你定位的外层<mat-checkbox>（id为DAY1）节点上，而是存在于它内部的隐藏原生<input>节点（id为DAY1-input）上。

同时你之前的写法也存在几个常见误区：

• have.value用于断言元素的value属性，不能用来校验aria-checked这类自定义属性
• aria-checked是HTML属性（attribute）不是DOM原生属性（property），不要用have.prop做断言
• aria-checked的属性值是字符串格式的'true'/'false'，不是布尔值，断言参数要加引号

正确实现 #

你已经找到的写法是完全正确的，直接定位到携带属性的input节点做断言即可：

cy.get('#DAY1-input').should('have.attr', 'aria-checked', 'true')

如果需要复用外层mat-checkbox的定位，可以用嵌套查找的写法，适配性更强：

cy.get('#DAY1')
  .find('input.mat-checkbox-input')
  .should('have.attr', 'aria-checked', 'true')

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