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.

Practice

1. What is the primary purpose of local storage in a web browser when testing with Cypress?

easy

A. To run JavaScript code on the server

B. To store small amounts of data persistently for a website

C. To style the webpage dynamically

D. To manage network requests

Solution

1. Step 1: Understand local storage role

   Local storage is used by browsers to save small data like user preferences or tokens persistently.

2. Step 2: Connect with Cypress testing

   Cypress can access this storage to verify or manipulate data during tests.

3. Final Answer:

   To store small amounts of data persistently for a website -> Option B

4. Quick Check:

   Local storage = persistent small data [OK]

Hint: Local storage saves small data for the site, not server tasks [OK]

Common Mistakes:

• Confusing local storage with server-side storage
• Thinking local storage runs code
• Mixing local storage with styling or network

2. Which Cypress command is used to access the browser's window object to manage local storage?

easy

A. cy.document()

B. cy.getLocalStorage()

C. cy.localStorage()

D. cy.window()

Solution

1. Step 1: Recall Cypress commands for browser objects

   To access the browser's window object, Cypress provides cy.window().

2. Step 2: Understand local storage access

   Local storage is a property of the window object, so cy.window() is used to reach it.

3. Final Answer:

   cy.window() -> Option D

4. Quick Check:

   Access window with cy.window() [OK]

Hint: Use cy.window() to reach local storage via window object [OK]

Common Mistakes:

• Using non-existent commands like cy.getLocalStorage()
• Confusing cy.document() with window object
• Assuming cy.localStorage() exists

3. What will be the output of the following Cypress code snippet?

cy.window().then(win => {
  win.localStorage.setItem('user', 'Alice');
  const user = win.localStorage.getItem('user');
  cy.wrap(user).should('equal', 'Alice');
});

medium

A. Test will fail due to syntax error in setItem usage

B. Test will fail because localStorage is not accessible

C. Test will pass because 'user' is set and retrieved correctly

D. Test will pass but 'user' will be undefined

Solution

1. Step 1: Analyze localStorage set and get

   The code sets 'user' key to 'Alice' in localStorage, then retrieves it correctly.

2. Step 2: Check assertion correctness

   The assertion checks if retrieved value equals 'Alice', which is true, so test passes.

3. Final Answer:

   Test will pass because 'user' is set and retrieved correctly -> Option C

4. Quick Check:

   Set and get localStorage works, test passes [OK]

Hint: Setting then getting localStorage key returns correct value [OK]

Common Mistakes:

• Assuming localStorage is inaccessible in Cypress
• Thinking setItem syntax is wrong
• Expecting undefined instead of stored value

4. Identify the error in this Cypress code that tries to clear local storage:

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

medium

A. Missing parentheses to call clear method

B. localStorage.clear requires a key argument

C. cy.window() cannot access localStorage

D. clear is not a function of localStorage

Solution

1. Step 1: Check localStorage clear usage

   localStorage.clear is a function and must be called with parentheses: clear()

2. Step 2: Identify missing parentheses error

   The code uses clear without parentheses, so it does not execute the function.

3. Final Answer:

   Missing parentheses to call clear method -> Option A

4. Quick Check:

   Call clear() with parentheses to clear storage [OK]

Hint: Always add () to call localStorage.clear() method [OK]

Common Mistakes:

• Forgetting parentheses when calling functions
• Thinking clear needs a key argument
• Assuming cy.window() can't access localStorage

5. You want to write a Cypress test that saves a token in local storage, reloads the page, and then verifies the token is still present. Which sequence of commands correctly achieves this?

hard

A. cy.window().then(win => win.localStorage.setItem('token', 'abc123')); cy.reload(); cy.window().then(win => expect(win.localStorage.getItem('token')).to.equal('abc123'));

B. cy.setLocalStorage('token', 'abc123'); cy.reload(); cy.getLocalStorage('token').should('equal', 'abc123');

C. cy.window().then(win => win.localStorage.setItem('token', 'abc123')); cy.reload(); cy.window().its('localStorage.token').should('equal', 'abc123');

D. cy.window().then(win => win.localStorage.clear()); cy.reload(); cy.window().its('localStorage.token').should('be.null');

Solution

1. Step 1: Save token in localStorage correctly

   Using cy.window().then(win => win.localStorage.setItem('token', 'abc123')) correctly sets the token.

2. Step 2: Reload and verify token presence

   After cy.reload(), accessing localStorage via cy.window().then and asserting with expect ensures token is still 'abc123'.

3. Step 3: Evaluate other options

   cy.window().then(win => win.localStorage.setItem('token', 'abc123')); cy.reload(); cy.window().its('localStorage.token').should('equal', 'abc123'); uses incorrect property access for localStorage token; cy.setLocalStorage('token', 'abc123'); cy.reload(); cy.getLocalStorage('token').should('equal', 'abc123'); uses non-existent commands; cy.window().then(win => win.localStorage.clear()); cy.reload(); cy.window().its('localStorage.token').should('be.null'); clears storage and checks for null, which is not the goal.

4. Final Answer:

   Use cy.window() to set, reload, then check with expect -> Option A

5. Quick Check:

   Set, reload, then assert with cy.window() and expect [OK]

Hint: Set token, reload, then check with cy.window() and expect [OK]

Common Mistakes:

• Using wrong localStorage property access
• Using non-existent Cypress commands
• Clearing storage instead of verifying token