Simulating Time in Cypress with cy.clock and cy.tick
When writing Cypress tests, there are scenarios where you need to manipulate time. For example, testing session expiration or scheduled UI updates requires control over time progression. This is where `cy.clock()` and `cy.tick()` come in handy.
When writing Cypress tests, there are scenarios where you need to manipulate time. For example, testing session expiration or scheduled UI updates requires control over time progression. This is where cy.clock() and cy.tick() come in handy.
Controlling Time with cy.clock()
cy.clock() overrides the browser's native time functions like Date, setTimeout, setInterval, and clearTimeout. This allows you to freeze time at a specific point and manipulate it as needed.
Example:
cy.clock(new Date()); // Freezes the time at the current momentFast-forwarding Time with cy.tick()
Once the clock is controlled, you can use cy.tick() to move time forward artificially. This is useful for testing delays, timeouts, or token expiration scenarios.
Example:
describe("User session expiration", () => {
it("logs out user after token expiration", () => {
cy.visit("/auth/sign-in");
// Simulate user login
cy.get('[data-testid="loginButton"]').click();
cy.getCookie("authToken").should("exist");
cy.clock();
// Fast-forward 30 minutes
cy.tick(1000 * 60 * 30);
// Attempt to navigate and verify user is logged out
cy.visit("/dashboard");
cy.url().should("include", "/auth/sign-in");
});
});When to Use cy.clock() and cy.tick()
- Testing session expiration
- Simulating time-based UI changes (e.g., countdowns, auto-refresh)
- Validating delays without slowing down tests
Using cy.clock() and cy.tick() helps create reliable and fast tests by eliminating unpredictable delays and ensuring time-based logic is properly verified.
Leave a comment