Cypress: Clearing Browser Cache

Product Support
, ,
#1

What is the recommended approach for clearing the browser cache in Cypress tests?

#2

I’ve had quite a bit of experience with clearing browser cache in Cypress tests. One of the recommended methods is to employ cy.clearCookies() and cy.clearLocalStorage() commands. Here’s a polished approach:

BeforeEach, we ensure a clean slate by adding these commands to clear cookies and local storage. It’s like tidying up before starting a new task:

beforeEach(() => {
  cy.clearCookies();
  cy.clearLocalStorage();
});

Then, within your test case, proceed with your testing routine. This ensures that each test begins in a pristine environment, free from any cached data.

#3

I’ve been there, needing to clear cache mid-execution. In such cases, a swift application of cy.clearCookies() and cy.clearLocalStorage() does the trick:


cy.clearCookies();

cy.clearLocalStorage();

These commands can be inserted at strategic points within your test scripts to ensure that cache doesn’t interfere with your test’s flow.

#4

Drawing from my own Cypress plugin adventures, creating a custom plugin for cache clearance can be a game-changer. Here’s how you can do it:

In your cypress/plugins/index.js file, define a task to clear cache:

module.exports = (on, config) => {
  on('task', {
    clearCache () {
      cy.clearCookies();
      cy.clearLocalStorage();
      return null;
    }
  });
};

Now, you can utilize this nifty task in your test files:

beforeEach(() => {
  cy.task('clearCache');
});

This way, you maintain a consistent and reusable method to keep your tests free from any lingering cache residues.