如何获取元素当前绑定的类集合并判断是否包含active类

以下基于Cypress测试框架实现，和你给出的DOM结构完全匹配。

方案1：先检查button1的active状态再选择未激活按钮 #

完全符合你最先描述的逻辑：先检查button1是否带active类，再决定使用哪个按钮测试切换

cy.get('[data-cy="button1"]').then(($btn1) => {
  // 判断button1是否激活，选择未激活的目标按钮
  const targetSelector = $btn1.hasClass('active') 
    ? '[data-cy="button2"]' 
    : '[data-cy="button1"]'

  // 点击未激活按钮执行切换
  cy.get(targetSelector).click()

  // 可选：添加切换成功的断言
  cy.get('[data-cy="button1"]').should(($btn1After) => {
    if (targetSelector === '[data-cy="button2"]') {
      expect($btn1After).not.to.have.class('active')
    } else {
      expect($btn1After).to.have.class('active')
    }
  })
  cy.get(targetSelector).should('have.class', 'active')
})

方案2：直接判断带active类的button1是否存在 #

就是你问的第二种思路，直接查询匹配data-cy=button1且带active类的元素是否存在，逻辑更简洁：

cy.get('body').then(($body) => {
  // 元素长度大于0说明带active的button1存在
  const isBtn1Active = $body.find('[data-cy="button1"].active').length > 0
  const targetSelector = isBtn1Active 
    ? '[data-cy="button2"]' 
    : '[data-cy="button1"]'

  cy.get(targetSelector).click()
  // 后续断言逻辑和方案1一致
})

补充通用方案：自动筛选所有未激活按钮 #

如果后续按钮数量可能扩展，不需要硬写两个按钮的判断逻辑，直接批量筛选即可：

// 筛选所有data-cy以button开头、不带active类的元素，取第一个点击
cy.get('[data-cy^="button"]').not('.active').first().click()
// 断言切换后仅有一个激活按钮
cy.get('[data-cy^="button"].active').should('have.length', 1)

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