Cypress循环点击日期选择器左箭头至2022年4月的代码正确性验证

你的代码无法实现预期的日期切换功能，存在以下关键问题：

核心问题点 #

• 断言逻辑顺序错误：你先断言当前月份是April 2022，再点击左箭头。如果初始月份不是目标月份，第一次断言就会直接失败，测试直接终止。
• 固定循环次数不合理：硬编码循环11次完全适配不了不同初始月份的场景——比如初始是2022年5月只需要点1次，你的代码会多点击10次；如果初始是2023年1月需要点9次，循环11次会多点击2次，既冗余又可能触发不必要的交互。

正确实现代码 #

应该先获取当前月份文本，判断是否等于目标值，不等则点击左箭头，重复这个过程直到到达目标月份。在Cypress中推荐用递归逻辑实现：

myFunction() {
  const targetMonth = 'April 2022';
  
  const checkAndSwitchMonth = () => {
    cy.get('[style=""] > .CalendarMonth > .CalendarMonth_caption')
      .invoke('text')
      .then(currentMonth => {
        if (currentMonth !== targetMonth) {
          cy.get('.DayPickerNavigation_leftButton__horizontalDefault > .DayPickerNavigation_svg__horizontal')
            .click();
          // 等待月份切换DOM更新完成，避免判断偏差
          cy.get('[style=""] > .CalendarMonth > .CalendarMonth_caption')
            .should('not.have.text', currentMonth);
          checkAndSwitchMonth(); // 递归调用继续检查
        }
      });
  };

  checkAndSwitchMonth();
}

额外优化建议 #

• 替换不稳定的元素选择器：避免依赖[style=""]这种动态属性，建议给月份标题添加data-testid="calendar-month-caption"，选择器改为cy.get('[data-testid="calendar-month-caption"]')，提升测试稳定性。

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