javascriptcsstestingcypresscypress-clock

Cypress clock function makes html body invisible

in my cypress tests, I am looking to set the clock to a specific time to have a consistent time frame for every test.

When I call:

cy.visit('/path/to/page');
cy.get('#elementId').click();

All is fine.

However, when I do:

cy.clock(Date.now());
cy.visit('/path/to/page');
cy.get('#elementId').click();

I get the following error:

This element `<button with Id i want to click>` is not visible 
because its parent `<body>` has CSS property: `display: none`

This also happens when I pass no arguments to cy.clock(). Why is cy.clock() setting the body of this page to invisible? And how do I avoid this?

Solution

  • The cy.clock() command overwrites and freezes the javascript functions relating to timers - setTimeout, setInterval as well as the Date objects.

    It looks like your app makes use of setTimeout during loading and some initial javascript is not completed.

    Try adding a cy.tick() to the command sequence

    cy.clock(Date.now());
cy.visit('/path/to/page');
cy.tick(1000);                 // try longer and shorter timings
cy.get('#elementId').click()