如何在Cypress中验证父复选框下仅指定子复选框被选中？

针对关闭父复选框再重新展开后的验证需求，这里提供两种便捷的Cypress实现方式：

方法一：筛选选中项后验证 #

先过滤出所有已选中的子复选框，验证数量和对应的aria-label是否符合预期：

// 重新展开父复选框后执行以下代码
// 替换为实际的父容器选择器和子复选框通用选择器
cy.get('.parent-checkbox-group input[type="checkbox"]')
  .filter(':checked')
  .should('have.length', 2) // 确认仅2个选中项
  .each($checkedBox => {
    const label = $checkedBox.attr('aria-label');
    expect(label).to.be.oneOf(['checkbox1', 'checkbox5']);
  });

方法二：遍历所有子复选框逐个校验 #

定义预期选中的复选框名称列表，遍历每个子复选框，根据名称判断其选中状态是否正确：

// 重新展开父复选框后执行以下代码
const expectedChecked = ['checkbox1', 'checkbox5'];
// 替换为实际的父容器选择器和子复选框通用选择器
cy.get('.parent-checkbox-group input[type="checkbox"]').each($box => {
  const boxLabel = $box.attr('aria-label');
  if (expectedChecked.includes(boxLabel)) {
    expect($box).to.be.checked;
  } else {
    expect($box).not.to.be.checked;
  }
});

注意事项 #

• 请根据实际DOM结构调整选择器：比如父容器可用[aria-label="父复选框标签"]，子复选框若统一带checkbox前缀的aria-label，可直接用[aria-label^="checkbox"]匹配所有子项。
• Cypress的.to.be.checked断言会自动识别标准的checked属性或aria-checked属性，无需额外处理状态判断逻辑。

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