How to Clear Cache between Tests in Cypress: A Comprehensive Guide

As an app and browser testing expert with over 10 years of experience testing web apps on 3,500+ real devices and browsers, properly clearing cache between tests is essential for reliable test automation.

In this comprehensive guide, I‘ll explain how to effectively clear cookies, local storage, and session storage in Cypress – with code examples, best practices, and tips learned from running thousands of test automation projects.

Why Clear Cache Between Tests

Before jumping into the how-to, let‘s briefly cover why cache management matters in test automation:

• Prevent state build up: Clearing cache ensures each test has a clean state and is not polluted by previous tests.

• Accurate test isolation: Resetting cache isolates the behavior being tested, avoiding dependencies across tests.

• Mimic real user conditions: Clearing cache mimics a new user with no existing session or local data.

Proper cache handling leads to dependable, reproducible tests reflecting real usage – crucial as your test suite and team scales.

Browser Cache Storage Types

As background, websites rely heavily on browser storage to persist data client-side. Common cache types are:

Cookies

Store session IDs, user settings, form data. Limited to 4KB in size. Persist based on expiration or browser session.

Local Storage

Larger storage up to 5MB+. Persists beyond browser sessions. Used for long-term data like user preferences.

Session Storage

Temporary storage cleared when browser tab closed. Helps link pages within single site visit.

All three can impact application state and testing if not properly handled.

Cypress Default Cache Handling

By default, Cypress clears all cache data between test runs:

• Cookies cleared before each test
• Local storage cleared before each test
• Session storage cleared before each test

This handles cache clearing automatically without any extra effort.

However, you may need to manually clear cache within certain test cases using Cypress commands.

Clearing Cache Manually with Cypress

Cypress provides test commands allowing you to clear each cache type during a test:

Clear Cookies

cy.clearCookies()

Clears browser cookies set by the application under test. Useful for testing login/logout flows:

it(‘logs user out after clearing cookies‘, () => {

  // Log user in
  cy.login(user) 

  // Test user is logged in
  cy.contains(‘Welcome, Test User‘)

  // Clear cookies  
  cy.clearCookies()

  // Assert user is logged out
  cy.contains(‘Login‘)
})

Clear Local Storage

cy.clearLocalStorage()

Clears all local storage set by the application. Helpful for clearing persistent user data:

it(‘clears local storage‘, () => {

  // Application code that sets local storage
  localStorage.setItem(‘user‘, {name: ‘Mary‘})

  // Confirm local storage is set
  expect(localStorage.length).to.eq(1) 

  // Clear local storage
  cy.clearLocalStorage()

  // Assert local storage is empty
  expect(localStorage.length).to.eq(0) 
})

Clear Session Storage

cy.clearAllSessionStorage() 

Clears any session storage values. Useful for clearing temporary session data:

it(‘session storage is cleared‘, () => {

  // Session storage is set 
  sessionStorage.setItem(‘token‘, ‘12345‘)

  // Verify token exists
  expect(sessionStorage.token).to.eq(‘12345‘)

  // Clear session storage
  cy.clearAllSessionStorage()  

  // Session storage should be empty
  expect(sessionStorage.length).to.eq(0)
})

These commands enable precise control over cache within tests.

When to Manually Clear Cache

While Cypress handles cache clearing automatically between tests, there are situations where you‘ll want to manually clear cache:

• Before critical actions – Clear cookies before testing login to ensure previous state doesn‘t influence behavior.

• Isolating specific user flows – Clear local storage before checking new user registration to remove other test data.

• Testing expiration – Manually clear session storage to test whether session properly expired.

• Within page object methods – Clear cookies in logout() helper to ensure user is fully logged out after calling from tests.

The context of what you‘re testing will determine if and when manual cache clearing is beneficial.

Best Practices

Follow these best practices when clearing cache within Cypress tests:

Chain off cy instance

Always chain cache clearing commands off the cy instance:

cy.clearCookies() // ✅ Good

clearCookies() // ❌ Avoid

No assertions on cache commands

Don‘t include assertions chained directly off cache clearing commands. Separate any assertions:

cy.clearCookies().should(cookies => { // ❌ Avoid
  expect(cookies.length).to.eq(0) 
})

cy.clearCookies() 

cy.getCookies().should(cookies => { // ✅ Good
  expect(cookies.length).to.eq(0)
})

This avoids test failures due to assertions running before completion.

Handle delays

Account for browser delays when clearing cache to prevent timeouts:

cy.clearAllSessionStorage({timeout: 10000}) // 10 seconds 

cy.session() for persistence

To persist data across tests, use cy.session() instead of local storage. cy.session() is not cleared on test exit.

Conclusion

As a tester managing thousands of test runs, having reliable cache handling is critical for stability at scale.

Cypress offers powerful built-in cache clearing between test runs. Combine this with manual cache clearing within specific tests using cy.clearCookies(), cy.clearLocalStorage(), and cy.clearAllSessionStorage() for best results.

Implementing these cache best practices will lead to fast, repeatable test suites.

While Cypress offers robust browser testing capabilities, running tests across thousands of real devices and browsers at scale brings added complexity. Leveraging cloud-based real device testing solutions can provide instant access to a vast matrix of mobile devices and browsers – taking your cross-browser test automation to the next level.

Hopefully this guide gives you the cache clearing techniques needed to write reliable Cypress tests. Happy testing!