Clear sessionStorage in between tests

[brian-mann]

Currently we clear cookies and localStorage but somehow we missed automatically clearing sessionStorage as well.

This needs to be added, and we likely need to add a new cy.clearSessionStorage API command.

Thanks to @abadstubner for finding this one.

Currently as a workaround you can manually clear sessionStorage like this:

cy.window().then((win) => {
  win.sessionStorage.clear()
})

[aluzardo]

I am having the same issue. I need one method to clear sessionStorage.

Thanks @brian-mann for the workaround.

cy.window().then((win) => {
  win.sessionStorage.clear()
});

[acthp]

I'm hitting this, but the workaround isn't helping. Can you provide more detail?

The problem is that if I place this before cy.visit(), it seems to operate on the wrong window object, and if I place it after cy.visit(), the application code has already read sessionStorage by the time the cy.window.then() callback fires.

To get a repeatable test, sessionStorage needs to be managed before the app executes.

[brian-mann]

Browsers partition sessionStorage by origin not by window.

In fact the cy.window().then((win) => stuff isn't actually even necessary .

Because Cypress test code is always on the same origin as your application, modifying sessionStorage from any window will work.

Another option is using the onBeforeLoad callback of cy.visit.

There's no reason though for this not to be working. Just place debugger everywhere and you can use the dev tools tabs to inspect the Application area and you will see exactly what session and local storage is in use. In other words - you can prove what is happening, no need to guess or theorize.

My guess is that you're not putting this code in a beforeEach and its being reset and then it's coming back whenever your application is visited.

[brian-mann]

[acthp]

Using beforeEach doesn't help. Setting breakpoints, the issue seems to be that beforeEach runs before the previous page is unloaded, and so the app's beforeunload handler will then save to sessionStorage after it's been cleared, and before the next test starts.

It's pretty confusing trying to follow how the window is being manipulated. beforeunload never fires if there's only one test. If there are two tests, beforeunload fires between the two tests. I guess this means the window is destroyed between test runs, but is reused between test cases.

To get a consistent environment, then, we need to destroy the window between each test, or navigate away from the app in afterEach to trigger the beforeunload handler, then clear sessionStorage in beforeEach. Any suggestions?

Update: Visiting a static page (no javascript) in afterEach does resolve the problem by coercing the beforeunload.

[brian-mann]

This sounds like a classic anti pattern of building up state between tests.

Each test should start from a clean slate and visit before each test.

https://docs.cypress.io/guides/references/best-practices.html#Having-tests-rely-on-the-state-of-previous-tests

As I also suggested, you could use the onBeforeLoad callback handler of cy.visit to clear the sessionState prior to your application loading.

[brian-mann]

Okay taking a second look I understand a bit better and can answer your questions.

beforeunload would naturally fire between two tests because that's what cy.visit does. It navigates the window - same as changing the URL. This is expected and correct behavior.

The window is not re-used (that's impossible), it is nuked as per what happens whenever there is a page navigation caused by cy.visit. When a run starts, we do wipe away everything including the window and outer iframe holding the window. Between tests it would be too slow to do this, and we actually don't do anything to nuke the application.

We have an open issue explaining lifecycle events and the reason they need to be refactored here. #686 It goes into a lot of detail and is related to your problem.

Using afterEach hooks like that is also an anti pattern ;-)

https://docs.cypress.io/guides/references/best-practices.html#Using-after-or-afterEach-hooks

You really should just use the onBeforeLoad callback handler of the visit as it will do exactly what it is you want it to do without needing an afterEach hook.

[acthp]

Ah, cool, I'll try that. afterEach had another problem, which is that if there were any pending ajax requests, they would be canceled on page navigation, which would return an ajax error 0, causing the afterEach to error out & abort the rest of the suite. The same thing happens (canceled requests) while running tests, but in that case doesn't abort the suite. Not sure why the difference, but I'll try onBeforeLoad.

Update: onBeforeLoad works perfectly.

[lgandecki]

any reasons why not add this clearing to the onBeforeLoad in the cypress itself? I think we should either have all cookies/localStorage/sessionStorage clean automatically, or none of them + deal with them manually :)

Thanks for the solution though!

[brian-mann]

Yup it's part of a much larger story here: #686

[CoenWarmer]

Would it be possible to provide an example of how to use the onBeforeLoad handler in this scenario? I'm encountering the same issues and can't figure out how to proceed.

[brian-mann]

clearing sessionStorage are just synchronous methods you call on the window.

cy.visit('...', {
  onBeforeLoad: (win) => {
    win.sessionStorage.clear()
  }
})

Read https://docs.cypress.io/api/events/catalog-of-events.html as well.

[salty-blue-mango]

I am using the onBeforeLoad workaround to clear the session storage. When I initially open my login test in the test runner the sessionStorage does not get cleared. If I use the refresh in the test runner, the sessionStorage is cleared and works as expected. Why would it be that upon initial start up of the test runner my session storage is not being cleared?

[Jacek-fstack]

I am still facing this and the provided solution is not helping : / Just started automating a new app, this wasn't the issue with the other app I work on. Anything else I can do to clear sessions between tests?
I tried adding

beforeEach(function () {
    cy.window().then((win) => {
        win.sessionStorage.clear()
    });
});

to index.js and cy.clearCookies();
Neither help, still hitting the issue every few tests

[mattmbrightside]

This solution works for me at the start of each test
cy.visit('/', { onBeforeLoad: (win) => { win.sessionStorage.clear() } });

[Jacek-fstack]

Tried that one as well : /

[jpaquit]

I managed to remove session Storage this way (Cypress 4.7.0, Win10 x64) (cy.clearCookies() and cy.clearLocalStorage() do not affect session storage).

beforeEach(() => {
...
...
// No leaks between scenarii
 sessionStorage.clear()
 cy.clearCookies()
 cy.clearLocalStorage()
 });

https://developer.mozilla.org//docs/Web/API/Window/sessionStorage

[Jacek-fstack]

It worked for me, thank you @jpaquit

[single-stop-justin]

When will cy.clearSessionStorage be implemented?

None of the workarounds have worked here. I am even clearing session store beforeEach and onBeforeLoad. The result is tests randomly passing, definitely a race condition.

One time the entire suite passes.
The next time one test fails.
The next time three fails.
The next time two different tests fail....

[jennifer-shehane]

We've outlined some work to be done to address some of the concerns of 'session storage' in this issue: #8301

It outlines a proposal for a 'session' API, to quickly summarize:

With cy.session, you'll be able to perform UI interactions before taking a "snapshot" of all the session related data and "restore" it before each test.

The session related data would include sessionStorage.

I recommend reading the entire proposal in #8301 and following there for any updates. Please feel free to express any concerns or questions in that issue concerning the API and add a 👍 for general support.

[AhmedYousseff]

describe('Required Object e2e test', () => {
  let startingObjectsCount = 0;

  before(() => {
    cy.window().then(win => {
      win.sessionStorage.clear();
    });

    cy.clearCookies();

    cy.intercept('GET', '/api/objects*').as('entitiesRequest');
    cy.visit(''); // is configured in cypress.json 
    cy.wait('@entitiesRequest').then(({ request, response }) => (startingObjectsCount = response.body.length));
    cy.visit('/');
  });
})

[jennifer-shehane]

We released cy.session() as an experimental command (set experimentalSessionSupport to true in config) in Cypress 8.2.0. This command can be used to cache and restore cookies, localStorage, and sessionStorage. We especially see this command as being useful for testing Auth flows and recommend giving it a try to replace your existing tests around authentication and login.

If you have any feedback about cy.session() for general UX improvements, new features, or unexpected behavior, please leave your feedback in our Cypress Session Experimental Feedback Discussion.

[jayanthktn]

@jennifer-shehane
This works really well, I was trying so many things to suppress the session handling, by default clearing option is really great !

[tnrich]

This has not yet been fixed on the latest cypress version (9.5.2)

[emilyrohrbough]

This behavior will be enabled by default via test isolation when the experimentalSessionAndOrigin is released as GA.

In v12.0.0 (soon-to-be-released), we are introducing the concept of Test Isolation. There will be two modes of test isolation, on and off, with on being the new default mode. When test isolation is on, before each test, Cypress will:

• clear the page by visiting about:blank
• clear cookies
• clear local storage
• clear browser storage

Closing this issue as done since will enable this behavior by default.

Please following #24277 for the cy.clearSessionStorage() command implementation.

[cypress-bot]

Released in 12.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.0.0, please open a new issue.