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?
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()
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})