cy.clock() preventing the subsequent visit/reload to load completely when running in emulator

[guruannapantula]

Current behavior:

In emulator, Page is not loading completely if we are setting the clock before visiting the page

In emulator: Set the clock --> visit the page again --> page is not loading completely.

Desired behavior:

Page should be completely loaded. (please note : There is no issue with the flow when executed on chrome desktop view)

Test code to reproduce

code snippet which is causing issue

//eg :  url = https://www.amazon.com/  (or) https://www.unibet.co.uk/

cy.clock(new Date().getTime())
cy.visit(url)

config used:

{
    "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
    "viewportWidth":414,
    "viewportHeight":896
}

Versions

"cypress": "^4.5.0" running on chrome 81

[guruannapantula]

[jennifer-shehane]

I can see the behavior you are describing when using cy.clock(). I'm not sure why Amazon's view does not load when we overwrite the timeout or Date objects.

That being said, we do not recommend using Cypress to test sites that are not under your control as explained in our Best Practices. Closing as we do not support testing 3rd party websites.

[guruannapantula]

In the code snippet, I have given another example about loading the site https://www.unibet.co.uk which is under our control, the result is same in this case as well. The page is not loaded completely

[jennifer-shehane]

I can also recreate this on https://www.unibet.co.uk. The issue does not occur if removing the cy.clock() definition or if removing the userAgent definition.

spec.js

it('test', () => {
  cy.clock(new Date().getTime())
  cy.visit('https://www.unibet.co.uk')
})

cypress.json

{
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1"
}

No cy.clock() and userAgent

cy.clock() and userAgent

[jennifer-shehane]

So basically, there is some call using setTimeout that your application requires when it's on this userAgent in order to load your page. Since calling cy.clock() overwrites setTimeout, the time is not clicking forward in order to trigger what it needed in this call.

You can see that the loading of the site breaks only if you overwrite setTimeout.

// Not working ☹️ 
it('test', () => {
  cy.clock(new Date().getTime(), ['setTimeout'])
  cy.visit('https://www.unibet.co.uk')
})

If you want to only overwrite the Date object, I recommend explicitly specifying to only overwrite that function like below:

// Working!!
it('test', () => {
  cy.clock(new Date().getTime(), ['Date'])
  cy.visit('https://www.unibet.co.uk')
})

If you still want to overwrite the setTimeout timing, you'll need to tick time forward so that your call to setTimeout is called as time would normally progress.

// Working!!
it('test', () => {
  cy.clock(new Date().getTime())
  cy.visit('https://www.unibet.co.uk')
  cy.tick(5000)
})

[Rajesh-Kodandam]

I have same issue. Hope this issue still exist. please advise me. Thank you

[JesseChain]

I encountered the same issue in version 12.16.0, it seems that cy.clock() cannot be used without any concerns.🤔