Cypress条件测试判断双状态按钮仅执行else分支问题排查

问题根因 #

1. 误用jQuery has()方法
   你调用的$btn.has()是jQuery提供的API，作用是筛选出包含指定后代元素的DOM集合，返回值始终是jQuery对象而非布尔值。在JavaScript中，即使是空的jQuery对象也属于真值（truthy），且你的判断逻辑是要检查按钮自身是否带有data-cy="activate-user-account"属性，而非检查按钮的后代是否存在对应元素，原有判断条件完全不符合预期。
2. 按钮定位不精准
   cy.get('button')会匹配页面上所有按钮元素，$btn最终指向的是按钮集合而非你要操作的状态切换按钮本身，也会导致属性判断失效。

修正代码 #

将判断逻辑替换为is()方法检测当前按钮是否匹配指定选择器，同时先精准定位到状态切换按钮：

// 精准匹配状态切换按钮，避免匹配到其他无关按钮
cy.get('button[data-cy^="activate-user-account"], button[data-cy^="deactivate-user-account"]')
  .then(($btn) => {
    if ($btn.is('[data-cy="activate-user-account"]')) {
      cy.get('[data-cy="activate-user-account"] span').click();
    } else {
      cy.get('[data-cy="deactivate-user-account"] span').click();
    }
    // 两段分支重复的逻辑可以统一提出来
    cy.get('.btn-primary > .button-wrapper').click();
    cy.get('.btn > .ng-star-inserted svg').click();
  });

你也可以进一步简化代码，避免冗余的分支判断：

cy.get('button[data-cy^="activate-user-account"], button[data-cy^="deactivate-user-account"]')
  .then(($btn) => {
    const actionType = $btn.is('[data-cy="activate-user-account"]') ? 'activate' : 'deactivate';
    cy.get(`[data-cy="${actionType}-user-account"] span`).click();
    cy.get('.btn-primary > .button-wrapper').click();
    cy.get('.btn > .ng-star-inserted svg').click();
  });

内容的提问来源于stack exchange，提问作者S.amn