Cypress如何编写校验元素属性与class的if判断语句

核心规则与避坑说明 #

• 激活标签固定特征：class 必然包含active，通用选择器为.same.active，和标签位置、属性值无关
• 标签唯一识别依据：仅属性值可作为定位凭证，标签排列顺序、总数量不固定，禁止用列表索引定位
• 红线操作：不能直接点击目标标签，重复点击已激活标签会触发非预期页面跳转
• 常见写法错误：Cypress 命令是异步入队执行的，直接在命令队列外写同步if判断DOM状态，会在页面还没完成渲染时就执行判断，拿到的是过时的初始数据，逻辑必然失效，所有DOM状态判断必须放在.then()回调中执行。

单场景实现代码 #

以切换到属性值为tab_2的标签为例，可直接复用：

// 点击主标签展开子标签栏
cy.get('main_tab').click()

// 配置项：替换成你实际使用的属性名、目标标签属性值
const TARGET_TAB_ATTR = 'tab_2' // 动态场景下可替换为bmw、subaru等任意目标标签属性值
const UNIQUE_ATTR_NAME = 'data-tab-id' // 替换成你项目中存储标签唯一标识的实际属性名，比如id、data-code等

// 获取当前激活标签的属性值做比对
cy.get('.same.active').invoke('attr', UNIQUE_ATTR_NAME).then(currentActiveAttr => {
  if (currentActiveAttr === TARGET_TAB_ATTR) {
    // 目标标签已激活，直接执行后续逻辑
    runYourFollowUpFunction()
  } else {
    // 目标标签未激活，点击后先校验激活状态再执行后续逻辑
    cy.get(`[${UNIQUE_ATTR_NAME}="${TARGET_TAB_ATTR}"]`).click()
    // 增加断言确认点击生效，避免时序问题导致后续逻辑执行在错误标签页
    cy.get(`[${UNIQUE_ATTR_NAME}="${TARGET_TAB_ATTR}"]`).should('have.class', 'active')
    runYourFollowUpFunction()
  }
})

多目标标签复用方案 #

需要操作5个不同的目标标签时，直接封装成Cypress自定义命令即可，不用重复写判断逻辑：

1. 先在cypress/support/commands.js中注册全局可复用命令：

Cypress.Commands.add('switchToTab', (targetTabAttr, followUpAction) => {
  const UNIQUE_ATTR_NAME = 'data-tab-id' // 替换为你项目实际的唯一标识属性名
  // 确保标签栏处于展开状态
  cy.get('main_tab').click()

  cy.get('.same.active').invoke('attr', UNIQUE_ATTR_NAME).then(currentActiveAttr => {
    if (currentActiveAttr !== targetTabAttr) {
      cy.get(`[${UNIQUE_ATTR_NAME}="${targetTabAttr}"]`).click()
      cy.get(`[${UNIQUE_ATTR_NAME}="${targetTabAttr}"]`).should('have.class', 'active')
    }
    // 确认标签激活后执行后续逻辑
    followUpAction()
  })
})

2. 在测试用例中直接调用即可，自动适配动态变化的标签属性值：

// 切换到bmw标签后执行对应测试步骤
cy.switchToTab('bmw', () => {
  // 此处写bmw标签下的测试逻辑
})

// 切换到subaru标签后执行对应测试步骤
cy.switchToTab('subaru', () => {
  // 此处写subaru标签下的测试逻辑
})

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