async functions of tests can write the localStorage after it was cleared for the following test

[Aligertor]

Current behavior:

Even so Cypress clears the localStorage before each test older tests can still have unresolved async functions (for example returning API calls) that write into the localStorage during the execution of the next test.

Desired behavior:

testcases are killed completely so no code can be executed anymore.

How to reproduce:

see: Test Code (README.md)

Test code:

https://github.com/Aligertor/cypressTestLocalStorage

Additional Info / Our real world problem

In our real scenario JS Application potentially does API calls after be loaded into the browser the first time. We set some cy.route's to define the response of those calls, Therefore we have a set of commands defining different routes for different test cases.

In some of our test cases we now have to wait for these calls to resolve because some handlers will write into localStorage.

Ideally we dont have to care about this.

If this is not possible at least there should be better support to use commands aka "be able to use an alias of an route no matter where it was defined" so people can take care of those timing issues by adding a cy.wait without guessing milliseconds

• Operating System: Windows 10 Pro
• Cypress Version: "^1.3.0"
• Browser Version: Chrome 63

[brian-mann]

What you're describing is outlined in detail here: #686

It's a known issue of Cypress and the API's have to be expanded to account for it. There are other edge cases beyond just localStorage that can be introduced.

To migitate this today you will have to write your tests in a way that each is isolated (by doing a visit before each) and not allowing state to build up in between tests.

Looking at your example repo I can see that you are allowing state to be leaked between the tests by not starting at a fresh point. Some of our users do something like an afterEach cy.visit a blank page to prevent outstanding async calls from ever registering. This sucks but it is an option.

Another way is to use the onBeforeLoad callback of cy.visit or the before:window:load event https://docs.cypress.io/api/events/catalog-of-events.html to then synchronously blow away localstorage manually.

[Aligertor]

Sure we can find a workaround for our problem for now.

After reading the related Ticket here my opinion:
I hope clearing the app itself will be the way you go.
Running tests in every order is important for everybody who has a large and growing set of tests.
Most important is the special case of running a subset of tests.
Running subsets will save a developer much more time than every test performance boost ever can.

Tests running independently from each other should always be considered "best practice".
Therefore it should be default behaviour. If somebody decides to have tests that are dependent on execution order he should enable it actively.

[dubbha]

Having the same issue in a real life app test here.
Is there a stable way to make sure no localStorage updates are leaked from one test to another?

[jennifer-shehane]

Another likely reproducible example of this LocalStorage issue:

#2695 (comment)

[emilyrohrbough]

In v12.0.0 (soon-to-be-released), we are introducing the concept of Test Isolation to prevent cases like this. 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

This will prevent DOM and browser state bleed over between tests.

Closing this issue as done and tagging for the v12.0.0 release.

[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.