如何在Cypress中校验UI展示的文件上传时间是否正确

核心思路 #

不要直接对比两个时间的完全相等，而是设置合理的误差阈值，验证UI显示的上传时间和上传完成的当前时间差在可接受范围内即可，避免网络延迟、UI渲染延迟导致的断言误判。

具体实现步骤 #

1. 将UI获取的时间字符串转为标准Date对象
   你拿到的Oct. 5, 2021, 3:29 a.m.格式可以直接被JS的Date构造器解析，无需额外处理。
2. 计算两个时间的差值
   上传完成后获取的当前时间和UI时间的差值绝对值，在你设定的允许误差范围内即可判定为准确。

代码示例 #

// 假设你通过该选择器获取到显示上传时间的元素
cy.get('.upload-record-time')
  .invoke('text')
  .then(uiTimeText => {
    // 转换UI时间为Date对象
    const uiUploadDate = new Date(uiTimeText.trim())
    // 获取上传完成后的当前时间
    const currentDate = new Date()
    // 允许的误差阈值，这里设置为30秒，可根据实际场景调整
    const allowedMaxDiff = 30 * 1000
    // 计算两个时间的毫秒差绝对值
    const timeDiff = Math.abs(currentDate - uiUploadDate)
    // 断言时间差在可接受范围内
    expect(timeDiff).to.be.lessThan(allowedMaxDiff)
  })

注意事项 #

• 如果UI显示的上传时间是服务端时区的时间，需要将测试中获取的当前时间转换为对应时区后再计算差值，避免时区偏差导致断言失败
• 若JS原生Date构造器无法解析你拿到的时间格式，可以引入dayjs等时间处理库做格式转换后再对比
• 上传大文件的场景可以适当调高误差阈值，适配文件上传的耗时

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