Cypress遍历下拉框元素异常：第二个元素点击失效问题求助

问题场景 #

遍历下拉框所有选项时，其余元素点击正常，但第二个元素总是被识别为第一个元素并触发点击操作。原代码逻辑为：先打开下拉组件，获取所有li元素遍历；每次循环中重新打开下拉框，再点击缓存的当前元素。

原代码：

cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()

cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical').find('li').each(($ele)=>{
  cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()
  cy.wrap($ele).click()
  cy.wait(2000)
})

问题原因 #

初始获取的$ele是DOM加载时的元素引用，当点击第一个选项后，下拉框组件可能因状态更新重新渲染，导致原第二个元素的DOM节点被替换。此时缓存的$ele已失效，Cypress尝试点击时会匹配页面上第一个符合条件的元素，从而出现误操作。

解决方案 #

方案1：按索引遍历，每次重新获取元素 #

通过先获取选项总数，再按索引定位元素，确保每次操作的都是当前DOM中的有效元素：

// 首次打开下拉框
cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()

// 获取选项数量后循环
cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical li').its('length').then(total => {
  for (let i = 0; i < total; i++) {
    // 每次循环重新打开下拉框
    cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()
    // 通过索引定位当前选项
    cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical li').eq(i).click()
    cy.wait(2000)
  }
})

方案2：遍历中结合索引重新查询元素 #

保留each遍历的同时，利用索引重新获取当前元素，避免缓存失效问题：

cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul').click()

cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical').find('li').each(($ele, index) => {
  cy.xpath('//*[@id="apimatic-widget"]/div/div/div[2]/div[1]/div/div[2]/ul')
    .click()
    // 重新查询对应索引的元素
    .then(() => cy.get('.rc-menu.rc-menu-sub.rc-menu-vertical li').eq(index).click())
  cy.wait(2000)
})

额外优化建议 #

• 替换硬编码的wait(2000)为Cypress的断言等待，比如cy.get('.target-element').should('be.visible')，让测试更稳定。
• 尽量避免使用冗长的XPath，可给下拉框元素添加自定义属性（如data-testid="dropdown-trigger"），简化选择器。

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