'Cypress - how to wait for first time page to load

I'm trying to run a cypress (v8.7.0) test where my application takes very long to render the page on the first page load. When I call cy.visit(), I get an error saying failed trying to load ESOCKETTIMEDOUT. I tried some of the suggestions mentioned here, such as:

cy.visit('https://github.com/', { timeout: 30000 })

and in cypress.json

{
  ...
  "pageLoadTimeout": 120000
}

However, it still fails. How can I go about this?

enter image description here



Solution 1:[1]

To make sure the page has loaded successfully, you can assert any element to be visible.

Check this answer https://stackoverflow.com/a/66517138/14517464

Solution 2:[2]

I couldn't find a better solution. The issue is that cypress is running a process which starts the server, at takes long on the initial visit. I've done the following work around. The cy.request fails, but when I set the retry option, it works. After a successful call, it can call the cy.visit without that issue.

cy.request({
  url:'http://localhost:3000/myUrl',
  timeout: 120000,
  retryOnStatusCodeFailure: true
}).visit('http://localhost:3000/myUrl');

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pixelao
Solution 2 usr4896260