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 :)

Philemol

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
})

Pacify

I'm not sure what you're answering, Paolo. I think your answer is to show that the session cache is only used once. However, what I'm trying to avoid is having to log into the app multiple times. Wouldn't having cy.visit() inside beforeEach prompt me to re-login before each test? – Philemol

No, the code inside cy.session() callback is only called once (as demonstrated). Your login goes inside that callback as well. The beforeEach() runs before each test, but on subsequent tests the state is set from session cache. This works only if your login results in a cookie, a sessionStorage key, or a localStorage key. – Pacify

Thank you, your example made all the sense in the world. Much appreciated – Philemol

Answer 2

You can use the cy.session() Cypress docs to achieve this. This is an experimental API. So to use it set the flag for experimentalSessionSupport to true in your cypress.json.

Zielinski