Local storage management in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to clear all local storage data before each test.

Cypress

beforeEach(() => {
  cy.[1]();
});

Drag options to blanks, or click blank then click option'

AclearLocalStorage

BclearLocalStorage()

CclearLocalStorage.clear

DclearLocalStorage.clear()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the parentheses when calling the function.

Using incorrect method chaining.

In Cypress, cy.clearLocalStorage() is the correct command to clear all local storage data. It is a function and must be called with parentheses.

2fill in blank

medium

Complete the code to set a local storage item with key 'token' and value 'abc123'.

Cypress

cy.window().then((win) => {
  win.localStorage.[1]('token', 'abc123');
});

Drag options to blanks, or click blank then click option'

AsetItem

BgetItem

CremoveItem

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using getItem instead of setItem.

Trying to call clear which removes all items.

The setItem method stores a key-value pair in local storage. Here, it sets the key 'token' with the value 'abc123'.

3fill in blank

hard

Fix the error in the code to correctly assert that local storage has a key 'user' with value 'admin'.

Cypress

cy.window().then((win) => {
  expect(win.localStorage.[1]('user')).to.equal('admin');
});

Drag options to blanks, or click blank then click option'

AremoveItem

BsetItem

CgetItem

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using setItem which sets a value instead of getting it.

Using removeItem or clear which do not return values.

The getItem method retrieves the value for a given key from local storage. To check the value of 'user', we must use getItem('user').

4fill in blank

hard

Fill both blanks to create a test that sets a local storage item and then verifies it.

Cypress

cy.window().then((win) => {
  win.localStorage.[1]('session', 'xyz789');
  expect(win.localStorage.[2]('session')).to.equal('xyz789');
});

Drag options to blanks, or click blank then click option'

AsetItem

BgetItem

CremoveItem

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping setItem and getItem.

Using removeItem or clear incorrectly.

First, setItem stores the key 'session' with value 'xyz789'. Then, getItem retrieves it to verify the value.

5fill in blank

hard

Fill all three blanks to create a test that removes a local storage item and confirms it no longer exists.

Cypress

cy.window().then((win) => {
  win.localStorage.[1]('authToken', 'token123');
  win.localStorage.[2]('authToken');
  expect(win.localStorage.[3]('authToken')).to.be.null;
});

Drag options to blanks, or click blank then click option'

AsetItem

BgetItem

CremoveItem

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using clear instead of removeItem to delete a single key.

Checking the value before removing the item.

First, setItem adds the 'authToken'. Then, removeItem deletes it. Finally, getItem returns null confirming removal.