Cypress 如何使用 cy.clock 获取当前日期

在 Cypress 中使用 cy.clock() 主要是用于控制时间和日期，在测试中重写 JavaScript 中的日期和时间功能。这对于模拟或测试特定日期或时间触发的事件非常有用。cy.clock() 通过锁定所有时间相关函数，使得无论现实时间如何流逝，测试中的时间始终保持在设置的时间点上。

如何使用 cy.clock() 获取当前日期

1. 初始化 Clock： 在你的测试中，首先需要使用 cy.clock() 初始化时钟。这通常在测试的开始阶段进行。如果你不传递任何参数，它将把时间锁定在1970年1月1日 UTC。

   javascript
   cy.clock()

2. 设置具体的时间： 你可以通过传递时间戳或日期对象来设置 cy.clock() 的参数，以锁定到特定的日期和时间。例如，如果你想设置时间为2023年1月1日：

   javascript
   const now = new Date(2023, 0, 1).getTime() // 月份是从0开始的，所以0表示1月
   cy.clock(now)

3. 使用时间函数： 一旦设置了 cy.clock()，任何时间函数如 new Date()、setTimeout()、setInterval() 等都将使用这个锁定的时间，而不是当前实际时间。

   javascript
   cy.log(new Date().toString()) // 这将输出 "Sun Jan 01 2023 00:00:00 GMT+0000 (Coordinated Universal Time)"

示例：测试元素在特定时间显示

假设你在测试一个网站的功能，该网站在新年时显示一个特别的消息。你可以使用 cy.clock() 来模拟这种情况：

javascript
describe('New Year Celebration Banner Test', function() {
    it('should display the New Year banner on January 1, 2023', function() {
        cy.visit('/home')
        const newYearTime = new Date(2023, 0, 1).getTime()
        cy.clock(newYearTime)
        cy.reload()
        cy.get('.new-year-banner').should('be.visible')
    })
})

在这个测试中，我们设置了时间为2023年1月1日，然后重新加载页面，检查是否显示了新年横幅。这种方式非常适合测试那些依赖于特定时间触发的功能。