CODEWITHSUNDEEP
cypresse2e-testing
Demo Guy
Demo Guy

Reputation: 31

Localstorage is null (Cypress e2e test) using cypress-localstorage-commands

I have a react app that has login page and dashboard page. Only after login, will redirect to dashboard page. If success login, auth info tokens are stored in localstorage.

I'm trying to login once when the cypress run a test file and don't want to relogin after each test cases. so, I am using cypress-localstorage-commands, but it is not working.

cypress ver: 12.17.2 cypress-localstorage-commands ver: 2.2.4

cypress.config.ts

import { defineConfig } from "cypress";

export default defineConfig({
  e2e : {
    setupNodeEvents(on, config) {
      require("cypress-localstorage-commands/plugin")(on, config);
      return config;
    },
    env: {
      LOCAL_STORAGE_MEMORY: "true",
    },
  }
});

cypress/support/e2e.ts

import "./commands";
import 'cypress-localstorage-commands';

cypress/support/commands.ts

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
     login(email ?: string, password ?: string): Chainable<any>;
  }
}

Cypress.Commands.add("login", (email = "[email protected]", password = "admin") : void => {
  cy.visit("http://localhost:3000/login");
  
  cy.get("input[name=\"email\"]").type(email);
  cy.get("input[name=\"password\"]").type(password);
  cy.get("button[type=\"submit\"]").click();

  cy.wait(3000);
});

cypress/e2e/dashboard.ts

describe("Dashboard Page", () => {
  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();
    cy.visit(ANALYTICS_PATH);
  });
  afterEach(() => {
    cy.saveLocalStorage();
  });

  it("should navigate to the dashboard page and see its content", () => {
    cy.contains("Products").should("exist");
    cy.contains("Number of Products").should("exist");
    cy.contains("Carts").should("exist");
  });
});

It successfully login and I can see my dashboard page, but, after wait(3000), it gets back to login page and occurs this error:

Upvotes: 1

Views: 145

Answers (1)

Lola Ichingbola
Lola Ichingbola

Reputation: 4996

The sequence of steps is wrong, looking at this segment

  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();
    cy.visit(ANALYTICS_PATH);
  });

The login sets localstorage value(s), but you are not saving LS until afterEach().

Seems logical to move the save to after the login

  before(() => {
    cy.clearLocalStorageSnapshot();
    cy.login();
    cy.saveLocalStorage();
  });
  
  beforeEach(() => {
    cy.restoreLocalStorage();  // now there is something to restore!
    cy.visit(ANALYTICS_PATH);
  });

But cy.session() is much simpler, and you can get rid of cypress-localstorage-commands.

beforeEach(() => {
  cy.session('login', () => {
    cy.login();
  })
})

The above will only call login once despite being in beforeEach(), because it's a caching command.

Now you can forget about localstorage calls altogether, Cypress session command is handling it all for you.

Upvotes: 2

Related Questions