Cypress clock function makes html body invisible

user_7145830 0
Viewed 144

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?

cypress-clock cypress testing css javascript
2 Answers

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()
user_169977070

How about you provide a custom out for the element to be visible first and then click().

cy.get('#elementId', {timeout: 6000}).should('be.visible').click()

Or, You can also use {force: true} in case you want to click a hidden element.

cy.get('#elementId', {timeout: 6000}).should('be.visible').click({force: true})
user_45712710
Related