How to make sure page loads completely in cypress

Question

I am working in cypress. Steps to repro

I just visit the login page by cy.visit()-spinner is loading passed the credentials using type-spinner is still loading click on submit.-spinner is still loading its throwing error .. why because the login page XHR calls didnt get completed thats why still we can see spinner loading in top and i tried to click the submit button before it gets loaded,may be because of poor network-telling invalid credentials.

Answer 1

You check if the button is present and then click on the button.If

describe('check if button present', function () {
    it('check for button using CSS Selector', function () {
      cy.visit(url)
      let found = false
      let count=0
      while (!found) {

        const nonExistent = Cypress.$('.btn-selector')

        if (!nonExistent.length) {
          found = false
          count=count+1
          cy.wait(1000)
          if(count==60)
          {
            found = true
            cy.log('Element not found after 60 seconds..Exit from loop!!!')
          }
        } 
        else 
        {
          found = true
          cy.get('.btn-selector').click()
        }

      }

    })
  })

Answer 2

I believe you have to wait for the XHR request to get completed and validate the page load or perform other actions.

Here is a sample,

// Wait for the route aliased as 'getAccount' to respond
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  cy.get('#loading-bar').should('not.be.visible')
})

Here is a similar solution which I have previously given - Cypress:Is there any way to check invisibility of an element