如何在Cypress中验证复选框状态并执行操作？代码分支异常排查

你的代码始终进入else分支，是因为存在以下几个关键错误：

错误点分析 #

• 语法错误：cy.("#checkbox") 写法错误，Cypress中获取元素的正确方法是 cy.get("#checkbox")
• 变量名不匹配：回调参数定义的是 $ele，但判断逻辑里用了未定义的 $el，导致条件判断始终为false
• DOM遍历逻辑错误：原HTML结构中，复选框是.text-center容器下的<input>，你用next()的遍历方式无法正确定位到目标复选框

修正后的代码示例 #

方式1：基于原选择器修正逻辑 #

cy.get("#checkbox").then(($ele) => {
  // 正确定位到复选框元素
  const $checkbox = $ele.find('input[type="checkbox"]');
  if ($checkbox.is(':checked')) {
    cy.wrap($checkbox).should("be.checked");
  } else {
    cy.wrap($checkbox).check();
    cy.wrap($checkbox).should("be.checked");
  }
});

方式2：直接定位复选框（更简洁） #

如果可以直接定位到复选框元素，无需依赖外层容器：

cy.get('input[type="checkbox"]').then(($checkbox) => {
  if ($checkbox.is(':checked')) {
    cy.wrap($checkbox).should("be.checked");
  } else {
    cy.wrap($checkbox).check();
    cy.wrap($checkbox).should("be.checked");
  }
});

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