如何使用Cypress定位无id、name属性的checkbox并断言点击后选中状态

问题原因 #

• 你调用的select()是Cypress专门用于<select>下拉选择框的API，不支持checkbox复选框元素操作，所以写法本身不匹配场景。
• 直接用[type=checkbox]定位范围太宽，如果页面有多个复选框很容易定位错误。

正确实现代码 #

先通过文本关联定位到对应的复选框，再执行点击和断言：

// 1. 定位到包含Store文本的h2节点，再查找其下的checkbox
cy.contains('h2', 'Store')
  .find('input[type="checkbox"]')
  .click() // 点击选中复选框
  .should('be.checked') // 断言处于选中状态

如果遇到元素被样式遮挡、点击不生效的情况，可以修改点击语句为：

.click({force: true})

可选定位方式 #

如果你确认页面只有这一个绑定ng-model="data.root"的复选框，也可以直接用属性定位：

cy.get('input[ng-model="data.root"]')
  .click()
  .should('be.checked')

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