Is there a way to keep session Storage between tests in Cypress

Question

I'm currently working in an app that keeps info in Session Storage. After the login process, I see the Session Storage being cleared and the DOM being refreshed back to the login screen. I'd like to persist the Session Storage between tests per spec so I don't have to continuously logout and log back in to check multiple things in the same container.

My current setup looks like this:

describe('Quickpanel', () => {
    before(() => {
    
        cy.visit(base_url, {onBeforeLoad: (window) => {
            window.sessionStorage.setItem('someInfo',
            `{"SubsId":${info[0]},"RId":${nfo[1]}}`)
           window.sessionStorage.setItem('loc', `${info[2]}`)
        }})

        LoginPage
            .login(login_username, login_password)

        Navbar
            .clickOnBookingsSubLink('Beta Calendar')
            .verifyCalendarLoads()
            .clickBookReservationButton()
            .verifyQuickPanelIsOpen()

    })

First test runs fine and the right session storage values are set and others created using the provided info. When I move to the second "It()" is when the session storage goes away. I've also tried setting the Session Storage items in "beforeEach()" but the same issue occurs.

Any help is appreciated, thank you :)

Answer 1

The cy.session() command is a cache - anything inside does not get called multiple times.

You need to call it beforeEach() test not just once before() but the setup function is only called once.

Here is a proof-of-concept

Cypress.config('experimentalSessionSupport', true)

let sessionCallCount = 0;

Cypress.session.clearAllSavedSessions()   // to avoid caching across browser reload

beforeEach(() => {                   
  cy.session('mySession', () => {     
    cy.visit('https://example.com', {
      onBeforeLoad: (window) => {
        window.sessionStorage.setItem('myKey', 'someInfo')
        sessionCallCount++
      }
    })
  })
})

it('t1', () => {
  cy.window().then(window => {
    let data = window.sessionStorage.getItem('myKey')
    expect(data).to.eq('someInfo')
    expect(sessionCallCount).to.eq(1)
  })
})

it('t2', () => {
  cy.window().then(window => {
    let data = window.sessionStorage.getItem('myKey')
    expect(data).to.eq('someInfo')          
    expect(sessionCallCount).to.eq(1)        // cached code is called only once
  })
})

Login example

Cypress.config('experimentalSessionSupport', true)

Cypress.session.clearAllSavedSessions()   // to avoid caching across browser reload

beforeEach(() => {                   
  cy.session('mySession', () => {     
    cy.visit('https://example.com', {
      onBeforeLoad: (window) => {
        cy.login(userName, password)  // sets a cookie
      }
    })
  })
})

it('t1', () => {
  cy.visit('https://example.com')  // uses cookie  set by cy.login call
})

it('t2', () => {
  cy.visit('https://example.com')  // uses cookie preserved by cy.session cache
                                   // so app sees logged-in state
                                   // and does not redirect to login page
})