How to get current date using cy.clock()?

Last Updated : 23 Oct, 2024

In Cypress, the cy.clock() command allows you to control or "freeze" the time in your tests, which can be useful when testing features that depend on time. By using cy.clock(), you can mock the date and time, making it consistent and predictable throughout your tests. This is particularly helpful for testing features like timers, countdowns, or date-dependent functionalities.

Example

In this example, we’ll see how to use cy.clock() to set and retrieve the current date.

HTML Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Current Date Example</title>
</head>
<body>
    <h1>Current Date Example</h1>
    <p id="date"></p>

    <script>
        // Function to display current date
        function displayCurrentDate() {
            const currentDate = new Date();
            document.getElementById("date").innerText = currentDate.toDateString();
        }

        // Call the function to display date when the page loads
        displayCurrentDate();
    </script>
</body>
</html>

This HTML page displays the current date in a paragraph when the page is loaded.

Cypress Test Code

JavaScript

describe('cy.clock() - Control Time', () => {
    it('should display the mocked current date using cy.clock()', () => {
        // Freeze the time at a specific date
        const now = new Date(2023, 9, 10); // October 10, 2023
        cy.clock(now.getTime());

        // Visit the page
        cy.visit('http://localhost:3000');

        // Ensure that the page loads the correct mocked date
        cy.get('#date').should('have.text', now.toDateString());
    });
});

Explanation

Freezing Time with cy.clock():
- We use cy.clock() to set the time to October 10, 2023, using a Date object.
- The cy.clock() method takes the timestamp of the date (now.getTime()) and freezes the clock.
Visit the Page:
- cy.visit('http://localhost:3000') loads the HTML page hosted on localhost:3000.
Validate the Date Display:
- The test uses cy.get('#date').should('have.text', now.toDateString()) to confirm that the date displayed on the page matches the mocked date (October 10, 2023).

Output

After running the test, the Cypress runner will verify that the date displayed on the page is "Tue Oct 10 2023". The time will remain frozen at this value for the duration of the test, making the result predictable and consistent.

Conclusion

Using cy.clock() in Cypress allows you to control and mock time in your tests, which is incredibly useful for testing date or time-related functionality. It ensures consistency and prevents the test from failing due to varying real-time conditions. By freezing the time, you can confidently test features that depend on specific dates or times.

codersaksyevt

Improve

Article Tags :

How to get current date using cy.clock()?

Example

Explanation

Output

Conclusion

Similar Reads

SDLC MODELS

TYPES OF TESTING

Thank You!

What kind of Experience do you want to share?