Cypress实现日历切换月份直至定位到指定月份的方法

你的代码仅执行一次点击就停止，核心问题是：

• 初始获取的$calendarPopover是静态的DOM快照，点击箭头更新日历后，这个变量不会自动同步最新的页面内容，导致判断逻辑始终基于初始月份的文本
• 代码没有循环触发点击的逻辑，仅在第一次判断不满足时执行一次点击

正确实现方式：递归检查+循环点击 #

可以通过递归函数实现持续点击，每次点击后重新获取最新的日历文本进行判断：

// 定义递归函数，传入目标月份作为参数
const navigateToTargetMonth = (targetMonth) => {
  // 每次重新获取当前日历的文本内容
  cy.get('.CalendarMonth')
    .invoke('text')
    .then(currentCalendarText => {
      if (currentCalendarText.includes(targetMonth)) {
        // 已到达目标月份，终止递归
        return;
      }
      // 未到达目标，点击右箭头（确保元素可交互）
      cy.get('.calendar-arrow-right')
        .should('be.enabled')
        .click();
      // 递归调用，继续检查最新状态
      navigateToTargetMonth(targetMonth);
    });
};

// 调用函数，传入目标月份"April 2020"
navigateToTargetMonth('April 2020');

代码逻辑说明 #

1. 每次重新获取DOM：避免使用初始的DOM快照，每次都从页面获取最新的日历文本，保证判断的准确性
2. 递归终止条件：当日历文本包含目标月份时，停止递归
3. 可交互检查：点击箭头前用.should('be.enabled')确保元素处于可点击状态，避免因页面未完全更新导致的点击失败

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