Cypress localStorage commands
Extends Cypress' cy commands with localStorage methods. Allows preserving localStorage between tests.
The problem
You want to preserve localStorage between Cypress tests.
This solution
This solution allows you to use all browser localStorage methods through Cypress commands, and preserve it between tests.
Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:
npm i --save-dev cypress-localstorage-commands
Usage
cypress-localstorage-commands
extends Cypress' cy command.
Add this line to your project's cypress/support/commands.js
:
import "cypress-localstorage-commands"
You can now use all next commands:
Commands
Save current localStorage values into an internal "snapshot":
cy.saveLocalStorage();
Restore localStorage to previously "snapshot" saved values:
cy.restoreLocalStorage();
Clear localStorage "snapshot" values:
cy.clearLocalStorageSnapshot();
Get localStorage item. Equivalent to localStorage.getItem
in browser:
cy.getLocalStorage("item");
Set localStorage item. Equivalent to localStorage.setItem
in browser:
cy.setLocalStorage("item", "value");
Remove localStorage item. Equivalent to localStorage.removeItem
in browser:
cy.removeLocalStorage("item");
Preserving local storage between tests
Use saveLocalStorage
to save a snapshot of current localStorage
at the end of one test, and use the restoreLocalStorage
command to restore it at the beginning of another one. The usage of beforeEach
and afterEach
is recommended for this purpose.
Examples
Cookies button example
Next example shows how this package can be used to test a "cookies button" (which theorically sets a flag into localStorage
and can be clicked only once)
describe("Accept cookies button", () => {
const COOKIES_BUTTON = "#accept-cookies";
before(() => {
cy.clearLocalStorageSnapshot();
});
beforeEach(() => {
cy.restoreLocalStorage();
cy.visit("/");
});
afterEach(() => {
cy.saveLocalStorage();
});
it("should be visible", () => {
cy.get(COOKIES_BUTTON).should("be.visible");
});
it("should not be visible after clicked", () => {
cy.get(COOKIES_BUTTON).click();
cy.get(COOKIES_BUTTON).should("not.be.visible");
});
it("should not be visible after reloading", () => {
cy.get(COOKIES_BUTTON).should("not.be.visible");
});
});
Note the usage of beforeEach
and afterEach
for preserving localStorage
between all tests. Also clearLocalStorageSnapshot
is used in the before
statement to avoid possible conflicts with other test files preserving localStorage.
localStorage assertions
Based on the previous example, assertions could be added to check values of localStorage
:
describe("localStorage cookies-accepted item", () => {
beforeEach(() => {
cy.restoreLocalStorage();
cy.visit("/");
});
afterEach(() => {
cy.saveLocalStorage();
});
it("should be null first time page is visited", () => {
cy.getLocalStorage("cookies-accepted").should("equal", null);
});
it("should be true after clicking cookies button", () => {
cy.get("#accept-cookies").click();
cy.getLocalStorage("cookies-accepted").should("equal", "true");
});
it("should be true after reloading", () => {
cy.getLocalStorage("cookies-accepted").then(cookiesAccepted => {
expect(cookiesAccepted).to.equal("true");
});
});
});
Contributing
Contributors are welcome.
Please read the contributing guidelines and code of conduct.
License
MIT, see LICENSE for details.