Day: 3 May 2022

Cypress clears localStorage between tests by default, which can be a concern if you’re testing out features that use localStorage. However, there is a Cypress package that lets you preserve your localStorage data across tests. Using the cypress-localstorage-commands plugin, you may utilize all browser localStorage methods through Cypress commands, and it will be saved between tests. It can also be used to make it appear as if localStorage is disabled in the browser. Follow the steps below to enable Cypress to preserve localStorage sessions across tests.

Step 1: Installation

The cypress package is distributed via npm which is bundled with node and can be installed as one of your project’s devDependencies by typing the following lines of code in your console:

npm i --save-dev cypress-localstorage-commands

Step 2: Usage

To use the Cypress localStorage package after installation, you need to import it into your projects by adding the following line of code to your cypress/support/commands.js file:

import "cypress-localstorage-commands"

Step 3: Using the commands

Now that you have rightly installed and imported the package, you can now use the following commands to use Cypress to interact with localStorage:

cy.saveLocalStorage(): Enables current localStorage values to be saved in an internal “snapshot.”

cy.restoreLocalStorage(): Causes localStorage to be restored to its previous “snapshot” saved values.

cy.clearLocalStorageSnapshot(): Clears the “snapshot” values in localStorage, cleaning out previously recorded data.

cy.getLocalStorage(item): Gets the item from the localStorage. It is the same as localStorage.getItem in Javascript. Item is the data we would like to retrieve from the localStorage.

cy.setLocalStorage(item, value): Sets the value of the localStorage item. It’s the same as localStorage.setItem in Javascript. The item parameter is the name we would like to use to store the value in localStorage while value is the data we would like to save in localStorage.

cy.removeLocalStorage(item): Deletes an item from localStorage where item refers to the name of the item to be removed.

cy.disableLocalStorage(options): This disables localStorage. It produces localStorage methods to throw errors.

Here is an Example

Suppose we would like to test an “Add To Cart” button of an eCommerce website that saves the data of the shopper to localStorage, we can perform this test by writing the following lines of code:

describe("Add to cart button", () => {
  const ADD_TO_CART_BUTTON = "#save-user-data";

  before(() => {
    cy.clearLocalStorageSnapshot();
  });

  beforeEach(() => {
    cy.restoreLocalStorage();
    cy.visit("/");
  });

  afterEach(() => {

    cy.saveLocalStorage();
  });

  it("should be visible", () => {
    cy.get(ADD_TO_CART_BUTTON).should("be.visible");
  });

  it("should not be visible after clicked", () => {
    cy.get(ADD_TO_CART_BUTTON).click();
    cy.get(ADD_TO_CART_BUTTON).should("not.be.visible");
  });

  it("should not be visible after reloading", () => {
    cy.get(ADD_TO_CART_BUTTON).should("not.be.visible");
  });
});