How to assert localStorage in Cypress

Asserting localStorage in Cypress is a common requirement, primarily used to verify whether a web application correctly stores necessary information. The following outlines the steps and examples for asserting localStorage in Cypress:

Step 1: Accessing and Asserting localStorage

Cypress offers a straightforward approach to access and verify values in localStorage against expectations. This can be achieved by using the cy.window() command to access the window object, followed by the its() command to access localStorage.

Example Code:

javascript
describe('localStorage Assertion Example', () => {
  beforeEach(() => {
    // Visit the test page
    cy.visit('https://example.com');
  });

  it('should store correct user information in localStorage', () => {
    // Trigger actions such as login, which may store data in localStorage
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');
    cy.get('form').submit();

    // Assert a specific value in localStorage
    cy.window().its('localStorage').invoke('getItem', 'userInfo').should('eq', '{"username":"testuser","role":"admin"}');
  });
});

Step 2: Clearing localStorage

Clearing localStorage after each test is a best practice, which can be implemented by using cy.clearLocalStorage() within the afterEach hook. This ensures test independence by preventing data leakage from previous tests.

Example Code:

javascript
describe('localStorage Assertion Example', () => {
  beforeEach(() => {
    cy.visit('https://example.com');
  });

  afterEach(() => {
    // Clear localStorage
    cy.clearLocalStorage();
  });

  it('should store correct user information in localStorage', () => {
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password123');
    cy.get('form').submit();

    cy.window().its('localStorage').invoke('getItem', 'userInfo').should('eq', '{"username":"testuser","role":"admin"}');
  });
});

Notes

• Ensure relevant operations (e.g., logging in or filling forms) have triggered data storage before performing localStorage assertions.
• Using invoke('getItem', 'key') directly retrieves an item from localStorage, where key is the data's identifier.
• Use should('eq', 'expectedValue') to verify that the retrieved value matches expectations.

By employing this method, you can effectively assert localStorage in Cypress, ensuring your web application functions correctly with client-side data storage.