Clock / Tick not working on my example #31320
Description
Current behavior
Hello, thank you for the work you're doing on cypress.
I'm trying to realize a simple example with cy.clock() and cy.tick().
For that, I have create a simple html page (clock.htm) where a button display a message Hello World on the page during 5s.
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<script>
function displayEphemeralMsg() {
document.getElementById('myspace').innerText = 'Hello World';
setTimeout(() => {
document.getElementById('myspace').innerText = '';
},5000 );
}
</script>
</head>
<body>
<button type="button" onclick="displayEphemeralMsg()">Click me</button>
<div id="myspace"></div>
</body>
</html>In front of this page, I have the following test:
describe('template spec', () => {
it('is not working', () => {
cy.visit('http://localhost/clock.htm');
cy.clock();
cy.get('button').click();
cy.contains('Hello World').should('exist');
cy.tick(4000);
cy.contains('Hello World').should('not.exist');
});
})I just want to skip 4s of the 5s in order to check that message disappear.
But the test fail because the message remain on the screen.
And if I move the cy.clock() after the click, then it is still failing because the message is still there after the default timeout (4s) but the javascript behavior is back to normal and the message disapear after 5 seconds.
I tried to move the clock in cypress functions before(), beforeEach()... but the problem persists.
I missed certainly something, can you help to understand what is going wrong ?
I'm using the following version:
Cypress package version: 14.2.0
Cypress binary version: 14.2.0
Electron version: 33.2.1
Bundled Node version: 20.18.1
Note, my node version is v22.3.0 (don't know if it is overidded).
Thanks in advance for your help.
Desired behavior
In this situation, I was expecting that test is passed and 4seconds are skipped.
Test code to reproduce
clock.htm:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<script>
function displayEphemeralMsg() {
document.getElementById('myspace').innerText = 'Hello World';
setTimeout(() => {
document.getElementById('myspace').innerText = '';
},5000 );
}
</script>
</head>
<body>
<button type="button" onclick="displayEphemeralMsg()">Click me</button>
<div id="myspace"></div>
</body>
</html>test.cy.js:
describe('template spec', () => {
it('is not working', () => {
cy.visit('http://localhost/clock.htm');
cy.clock();
cy.get('button').click();
cy.contains('Hello World').should('exist');
cy.tick(4000);
cy.contains('Hello World').should('not.exist');
});
});In addition, I tried to add a timeout of 6s to my contains, then test is passed but it takes a long time anyway.
cy.contains('Hello World', {timeout: 6000}).should('not.exist');Let me know if you need further information and if I missed something.
Cypress Version
14.2.0
Node version
20.18.1
Operating System
Windows
Debug Logs
Other
No response