Cypress: Page doesn't load within the second 'it' block for the click action

Question

It works fine for the same click event if I've coded within the single 'it' block as below.

Working code:

describe('Test Suite', () => {
    it('Test case 1', () => {
        //Test 1
        //Test 2
    })
})

Not working:

describe('Test Suite', () => {
    it('Test case 1', () => {
        //Test 1
    })
    it('Test case 2', () => {
        //Test 2
    })
})

Below is my code snippet, First 'it' block works fine after login method executes. Then second it blocks just clicking the right element but the page never loads.

PS If I written the code under the single 'it' block, Page loads and works fine.

describe('Fund Manager Suite', () => {

    //Checking Fund Manager page loading 
   before(() => {

    cy.visit('xxxxxxxxxxxxx')
    cy.login('xxxxx', 'xxxxx')

   })
   
   it('fund manager navigation works', () => {
    cy.location('pathname').should('equal', '/xxxxx')
    cy.get('#appSwitcher').click()

    cy.get('#appSwitcher > .dropdown > .dropdown-menu > :nth-child(2) > a').click()
    cy.location('pathname').should('equal', '/xxxxx')
    cy.get('.k-grid-table').find('tr').should('have.length', 5)
   })

   it('fund detail works', () => {
    cy.get('.product > :nth-child(2)').click()
    cy.location('pathname').should('equal', '/xxxxx')

    // Fund Detail - Search
    cy.get('#s2id_autogen31').type('Rach')
    cy.get('#select2-result-label-32').click()
    cy.get('#searchSubmit').click()
    cy.get('#DataTables_Table_0').find('tr').should('have.length', 10)
       
   })

}) 

Execution Screen shot Code snippet screen shot

Answer 1

You have to preserve your cookies in beforeEach() to make sure that you stay logged in, in all it() blocks. You can read more in cypress docs .

describe('Dashboard', () => {
  before(() => {
    // log in only once before any of the tests run.
    // your app will likely set some sort of session cookie.
    // you'll need to know the name of the cookie(s), which you can find
    // in your Resources -> Cookies panel in the Chrome Dev Tools.
    cy.login()
  })

  beforeEach(() => {
    // before each test, we can automatically preserve the
    // 'session_id' and 'remember_token' cookies. this means they
    // will not be cleared before the NEXT test starts.
    //
    // the name of your cookies will likely be different
    // this is an example
    Cypress.Cookies.preserveOnce('session_id', 'remember_token')
  })

  it('displays stats', () => {
    // ...
  })

  it('can do something', () => {
    // ...
  })

  it('opens a modal', () => {
    // ...
  })
})

Answer 2

Update:

Able to resolve this issue by storing the session_id.

Cypress.Cookies.defaults({
  preserve: "session_id"
})

Answer 3

I Have seen this kind of behavior, when the first it case start and doesn`t finish some xhr request in the site - and in result cypress continues the process during the start of the second it case. The best solution for clean slate for each case I had found is to separate every case in different file