How to Clear Cache between tests in Cypress

If you are working on creating web applications, you are using cookies, local storage, and session storage. When you use Javascript to create your web applications, you are using all these three mechanisms to store data on the client. 

These means of storing information affect your testing methodology. No matter the type of testing that you are performing – functional testing, performance testing, penetration testing, accessibility testing, etc, you will need to deal with these mechanisms. Your Cypess E2E tests or component tests must run on a clean machine to simulate the unique test cases they cater to. 

Different Types of Cache Storage

Let’s understand each of these mechanisms.

Cookies

Cookies are used to save information about the user, such as name, password, and settings. The storage capacity is limited to a few kilobytes of data. Cookies are a good option for storing data that should not be stored for a long time, such as session IDs. Data is sent with the client’s request to the server. Data is stored only in the browser.

Session Storage

Session storage is a type of web storage that allows web applications to store data locally in the user’s browser. Unlike cookies, the information and data stored in session memory are specific to the website for which it was created and is not shared with other websites. Data is stored only for the duration of the session and is deleted when the browser is closed. 

Session memory is useful for storing sensitive information such as login credentials. Information is not sent to the server at the request of the client. Data is stored only in the browser.

Local Storage

Local storage is a type of online storage that allows JavaScript to store and access data directly in the browser. This is especially useful if you save information that you want to keep even when the user closes the browser (e.g. settings or preferences). 

In-memory data is stored as key/value pairs. The key is like the name of the data, and the value is like the data itself. You can think of it as a JavaScript variable. To save data to local storage, you must first generate a key. You can then store the information you want under that key. Saved data is not deleted when closing the browser. This is especially useful if you save information that you want to keep even when the user closes the browser (e.g. settings or preferences). Information is not sent to the server at the request of the client. The data is  stored in the browser and the system.

Cache storage in Cypress

By default, Cypress automatically clears the cache between tests, namely cookies, local storage, and session storage, to prevent the state from building up. You can preserve session details across tests using the cy.session() command.

Though Cypress automatically clears cookies, local storage, and session storage before each test, it also provides specific commands in case you’re using it to clear a specific cookie inside a single test or test isolation is disabled.

How to clear the cache between tests in Cypress 

Use the following examples to see how Cypress clears each of the test data with the commands.

Method 1: Using cy.clearCookies() command

The following script opens amazon.com and gets cookies. After we run the cy.clearCookies() command, you can see that the cookie storage is empty. 

it('Browserstack cookies', () =>{
cy.visit('https://www.amazon.com')
cy.wait(10000)
cy.getCookies().should('not.be.empty')
cy.clearCookies()
cy.getCookies().should('be.empty')
})

The following image shows the result of the cy.getCookies() command returning an array of 8 objects, while after clearing cookies, an empty array is returned.

Method 2: Using cy.clearLocalStorage() command

Though Cypress clears local storage between tests, we will see how to clear local storage intentionally. The following script opens amazon.com and asserts to check that the local storage is not empty. After we run the cy.clearLocalStorage()command, the assertion to check that the local storage is empty verifies itself.

it('Browserstack local storage', () =>{
cy.visit('https://www.amazon.com')
cy.wait(10000)
cy.getAllLocalStorage().should('not.be.empty')
cy.clearLocalStorage()
cy.getAllLocalStorage().should('be.empty')
})

The following image shows the result of the cy.clearLocalStorage() command resulting in the assertion being verified.

Method 3: cy.clearAllSessionStorage() command

Talk to an Expert

The following script opens the https://www.bstackdemo.com/signin page and signs in with a valid username and password. After the cy.clearAllSessionStorage() command executes and the script tries to open the same page, the page requests for the credentials again. 

it('BstackDemo clear session storage', () =>{
cy.visit('https://www.bstackdemo.com/signin/')
cy.get("#username").click();
cy.xpath("//div[text()='demouser']").click();
cy.get("#password").click();
cy.xpath("//div[text()='testingisfun99']").click();
cy.get("#login-btn").click();
cy.wait(5000);
cy.clearAllSessionStorage({log: true})
cy.visit('https://www.bstackdemo.com/signin/')
})

The following image shows the signed-in user when credentials are entered:

After the cy.clearAllSessionStorage() command executes, the following sign-in page appears:

Best Practices for clearing cache between tests in Cypress

Some of the best practices that you must note when using these three commands are:

• Commands require being chained off of cy
• Commands cannot have any assertions chained
• Commands should never time out

Conclusion

This article explained how Cypress has the inbuilt ability to clear cache data between test runs in a single spec file. Though Cypress is robust and offers ease of creating tests, it does limit the range of browsers and devices that you can test in real-time situations. 

For stable testing, you must simulate real-world condition and for that using a real device cloud, such as BrowserStack for Cypress, is a great option. Access to multiple devices helps you predict and handle issues before your product reaches production. BrowserStack Automate provides access to an array of web browsers and OS for you to test your applications.

Try BrowserStack Now