Cypress中如何生成随机日期 适配输入框及日期选择器场景

现有随机日期函数优化 #

你当前写的getRandomDate会生成1970年1月1日到当前时间的任意时间点，很容易出现业务组件不识别的超早期无效日期，建议增加日期范围限制，同时直接输出组件可识别的格式化结果：

// 可自定义日期范围的随机日期生成函数，默认范围：2015年1月1日 ~ 当前时间往后1年
function getRandomDate(
  start = new Date(2015, 0, 1),
  end = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)
) {
  const startTs = start.getTime()
  const endTs = end.getTime()
  const randomTs = Math.floor(Math.random() * (endTs - startTs + 1)) + startTs
  const dateObj = new Date(randomTs)
  // 输出格式化字符串，可根据组件要求调整格式，比如YYYY/MM/DD、YYYY年MM月DD日
  const formatted = `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`
  return { dateObj, formatted }
}

两种交互场景的适配方案 #

输入框直接录入场景 #

每次操作前生成全新随机日期，清空输入框后填入格式化值，手动触发change事件保证组件识别值更新：

cy.get('日期输入框对应选择器').then($input => {
  const { formatted } = getRandomDate()
  cy.wrap($input).clear().type(formatted).trigger('change')
})

日期选择器点选场景 #

不依赖具体面板DOM结构的通用实现，直接调用组件实例的更新方法，适配所有主流组件库（AntD、ElementUI、NaiveUI等）：

cy.get('日期组件根节点选择器').then($el => {
  const { dateObj } = getRandomDate()
  // 适配Vue组件
  if ($el[0].__vue__) {
    cy.wrap($el).invoke('__vue__.setValue', dateObj)
    return
  }
  // 适配React组件
  const fiberKey = Object.keys($el[0]).find(key => key.startsWith('__reactFiber$'))
  let fiberNode = $el[0][fiberKey]
  while (fiberNode.return) {
    fiberNode = fiberNode.return
    if (fiberNode.memoizedProps?.onChange) {
      fiberNode.memoizedProps.onChange(dateObj)
      break
    }
  }
})

全局拦截替换方案 #

如果需要覆盖所有日期组件取默认值的逻辑，不管触发什么操作都自动生成随机日期，可以直接mock全局Date对象：

// 在测试用例开头执行，所有new Date()调用都会返回生成的随机日期
const mockTs = getRandomDate().dateObj.getTime()
cy.clock(mockTs)

// 如果后续逻辑依赖真实时间，日期操作完成后恢复时钟即可
// cy.clock().invoke('restore')

注意：使用cy.clock()会同时冻结定时器、接口请求的时间依赖，涉及等待、超时类的逻辑需要配合cy.tick(时间毫秒数)手动推进时钟。

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