如何用Cypress自动选择Vue2 b-form-datepicker的指定日期（无输入框）

要解决硬编码箭头点击次数的问题，关键是动态计算当前日历显示的年月与目标年月的差值，自动执行切换操作，不用手动写死点击次数。下面是具体实现：

1. 封装日期选择逻辑（推荐复用） #

在cypress/support/commands.js里添加自定义命令，后续其他测试也能直接调用：

Cypress.Commands.add('selectBFormDate', (pickerSelector, targetDateStr) => {
  const target = new Date(targetDateStr);
  const targetYear = target.getFullYear();
  const targetMonth = target.getMonth(); // 0代表1月，11代表12月

  // 打开日期选择器面板
  cy.get(pickerSelector).click();

  // 从日历标题中提取当前显示的年月
  const getCurrentYM = () => {
    return cy.get('.b-calendar-header-title').then($title => {
      const titleText = $title.text().trim();
      // 这里根据你的locale调整正则，中文示例匹配"2024年2月"格式
      const match = titleText.match(/(\d{4}).*(\d{1,2})/);
      if (!match) throw new Error('解析日历标题失败，请调整正则表达式');
      return {
        currentYear: parseInt(match[1]),
        currentMonth: parseInt(match[2]) - 1 // 转为0-based格式，和Date对象统一
      };
    });
  };

  // 切换到目标年份
  getCurrentYM().then(({ currentYear }) => {
    const yearDiff = targetYear - currentYear;
    const yearBtn = yearDiff > 0 ? '[title="Next year"]' : '[title="Previous year"]';
    const clickTimes = Math.abs(yearDiff);
    for (let i = 0; i < clickTimes; i++) {
      cy.get(yearBtn).click({ force: true });
    }
  });

  // 切换到目标月份
  getCurrentYM().then(({ currentMonth }) => {
    const monthDiff = targetMonth - currentMonth;
    const monthBtn = monthDiff > 0 ? '[title="Next month"]' : '[title="Previous month"]';
    const clickTimes = Math.abs(monthDiff);
    for (let i = 0; i < clickTimes; i++) {
      cy.get(monthBtn).click({ force: true });
    }
  });

  // 点击目标日期
  const day = target.getDate();
  const dateCellId = `__cell-${targetYear}-${String(targetMonth+1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
  // 模糊匹配单元格ID，避免硬编码随机BVID前缀
  cy.get(`[id*="${dateCellId}"] .btn`).click();
});

2. 在测试用例中调用 #

直接使用封装好的命令，不用再写重复的点击代码：

it('选择2024年2月1日并提交表单', () => {
  cy.visit('/your-form-page-url');
  
  // 传入日期选择器定位器和目标日期
  cy.selectBFormDate('[data-e2e="date-input"]', '2024-02-01');
  
  cy.get('[data-e2e="submit-button"]').click();
});

关键注意事项 #

• 日历标题解析：如果你的locale是英文（标题格式如February 2024），需要调整正则表达式，比如用/(\w+) (\d{4})/，再通过new Date(${match[1]} 1).getMonth()将月份名称转为数字。
• 按钮选择器：确认Next year/Previous year等按钮的title属性和你的实际DOM一致，若不一致，替换为对应的类名或其他定位器。
• 日期单元格ID：b-form-datepicker的单元格ID包含随机BVID前缀，所以用[id*="xxx"]模糊匹配，避免硬编码前缀导致测试失效。

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