如何在Cypress中逐月迭代切换月份（从六月到二月）

原代码问题分析 #

1. 错误修改monthLabel变量，将其从选择器改为元素长度，完全丢失了定位月份元素的作用
2. 使用each遍历单元素，仅执行一次判断逻辑，因此只能切换一个月
3. 缺少循环判断机制，无法持续触发切换操作直到目标月份

修复后的代码实现 #

it('逐月切换到二月', () => {
  const targetMonth = 'february'
  const monthSelector = '.Grid_header__yAoy_ > :nth-child(2)'
  const nextMonthBtn = '.Grid_header__yAoy_ > :nth-child(3)'

  cy.visit('/')

  // 递归检查当前月份，未匹配则点击切换
  const checkAndSwitch = () => {
    cy.get(monthSelector).then(($el) => {
      const currentMonth = $el.text().toLowerCase()
      if (currentMonth !== targetMonth) {
        cy.get(nextMonthBtn).click()
        // 点击后重新检查月份
        checkAndSwitch()
      } else {
        cy.log(`已切换至目标月份：${targetMonth}`)
      }
    })
  }

  checkAndSwitch()
})

关键优化点 #

• 采用递归函数适配Cypress的异步执行逻辑，确保每次点击后重新获取最新的月份文本
• 将月份文本转为小写，避免因大小写不一致导致的匹配失败
• 提取选择器为常量，提升代码可读性和维护性
• 仅在未匹配目标月份时执行点击操作，避免无效重复点击

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