Local storage management in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following Cypress test code that interacts with local storage. What will be the value of storedValue logged in the test?

Cypress

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

cy.window().then(win => {
  const storedValue = win.localStorage.getItem('token');
  cy.log(storedValue);
});

A abc123

B null

C undefined

D Throws an error

💡 Hint

Remember that localStorage stores string values and persists within the same window context.

The code sets the localStorage item 'token' to 'abc123' and then retrieves it. The value logged is 'abc123'.

❓ assertion

intermediate

Which assertion correctly verifies a localStorage key value in Cypress?

You want to assert that the localStorage key 'user' has the value 'admin'. Which Cypress assertion is correct?

A cy.getLocalStorage('user').should('equal', 'admin');

B cy.window().should('have.property', 'localStorage.user', 'admin');

C cy.window().then(win => expect(win.localStorage.getItem('user')).to.equal('admin'));

D cy.window().its('localStorage.user').should('eq', 'admin');

💡 Hint

Use win.localStorage.getItem() to access localStorage values.

Option C correctly uses win.localStorage.getItem('user') and asserts its value with expect(...).to.equal(...).

🔧 Debug

advanced

Why does this Cypress test fail to clear localStorage?

This test tries to clear localStorage but fails. Identify the reason.

Cypress

cy.window().then(win => {
  win.localStorage.clear();
});

cy.window().then(win => {
  const length = win.localStorage.length;
  cy.log(length);
});

A localStorage.clear is not a valid method.

B The test runs asynchronously and clears after checking length.

C localStorage.clear requires a parameter to work.

D The clear method is not called because parentheses are missing.

💡 Hint

Check how methods are invoked in JavaScript.

The code references win.localStorage.clear without parentheses, so the method is not executed.

❓ framework

advanced

Which Cypress command best resets localStorage before each test?

You want to ensure localStorage is empty before each test runs. Which approach is best?

A Use <code>beforeEach(() => { cy.clearLocalStorage(); });</code>

B Use <code>beforeEach(() => { cy.window().then(win => win.localStorage.clear()); });</code>

C Use <code>before(() => { cy.clearLocalStorage(); });</code>

D Use <code>afterEach(() => { cy.clearLocalStorage(); });</code>

💡 Hint

Resetting before each test ensures clean state.

Option A uses the built-in Cypress command cy.clearLocalStorage() inside beforeEach to clear localStorage before every test.

🧠 Conceptual

expert

What is a key limitation of testing localStorage in Cypress across multiple test files?

When running Cypress tests split across multiple spec files, what is a common limitation related to localStorage?

A localStorage cannot be accessed in Cypress tests due to browser security.

B localStorage is cleared between spec files, so data does not persist across them.

C localStorage data is shared globally across all spec files causing test interference.

D Cypress automatically mocks localStorage, so real data is never stored.

💡 Hint

Think about test isolation and browser context resets.

Cypress clears localStorage between spec files to isolate tests, so data does not persist across them.