Skip to main content

Stabilize dates

Dates are changing by nature, displaying them in UI is often a source of flakiness. Here are some solutions to solve it properly.

Freezing the Date​

If the displayed date is not the primary focus of the test, it may be helpful to freeze the date to a fixed value.

This can be done using the native command of your end-to-end testing framework, such as:

/* Cypress command to freeze date to 20 May 2030 */
const now = new Date(2030, 4, 20);
cy.clock(now);

Alternatively, you can use an external library like MockDate to mock the current date.

Hiding the Date​

If neither of these methods are effective, you can try hiding the node that displays the date from the screenshot using CSS Preflight. This can be done by adding the following CSS to your style injection:

[data-test-date] {
  display: none !important;
}

Then, add the data-test-date attribute to the element that displays the date in your HTML. This will hide the element from the screenshot.