Local storage management in Cypress - Build an Automation Script

Verify local storage operations on a web page

Preconditions (4)

Step 1: Open the web page at 'http://localhost:3000/storage-test'

Step 2: Click the button with id 'save-btn' to save the key 'username' with value 'tester' to local storage

Step 3: Verify that the element with id 'storage-value' displays 'tester'

Step 4: Refresh the page

Step 5: Verify that the element with id 'storage-value' still displays 'tester'

Step 6: Click the button with id 'clear-btn' to clear local storage

Step 7: Verify that the element with id 'storage-value' is empty or displays 'No data'

✅ Expected Result: The local storage key 'username' is saved and displayed correctly, persists after refresh, and is cleared when requested.

Automation Requirements - Cypress

Assertions Needed:

Verify displayed value matches expected local storage value after save

Verify value persists after page reload

Verify local storage is cleared and display updates accordingly

Best Practices:

Use cy.visit() to open the page

Use cy.get() with id selectors for buttons and display elements

Use cy.reload() to refresh the page

Use Cypress commands to interact with local storage

Use clear and meaningful assertion messages

Automated Solution

Cypress

describe('Local Storage Management Test', () => {
  const url = 'http://localhost:3000/storage-test';

  beforeEach(() => {
    cy.visit(url);
  });

  it('should save, persist, and clear local storage data correctly', () => {
    // Click save button to store 'username' = 'tester'
    cy.get('#save-btn').click();

    // Verify displayed value is 'tester'
    cy.get('#storage-value').should('have.text', 'tester');

    // Reload the page
    cy.reload();

    // Verify value persists after reload
    cy.get('#storage-value').should('have.text', 'tester');

    // Click clear button to clear local storage
    cy.get('#clear-btn').click();

    // Verify display shows no data
    cy.get('#storage-value').should(($el) => {
      const text = $el.text().trim();
      expect(['', 'No data']).to.include(text);
    });
  });
});

This Cypress test automates the manual test case step-by-step.

beforeEach: Visits the test page before each test to start fresh.

Click save button: Simulates user clicking the button that saves data to local storage.

Assertions: Checks the displayed value matches the expected 'tester' after saving and after page reload to confirm persistence.

Clear local storage: Clicks the clear button and verifies the display updates to show no data.

This approach uses clear selectors, Cypress commands, and assertions to ensure the local storage behavior is correct and visible to the user.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(500) instead of relying on Cypress commands

Using non-unique or complex selectors like XPath instead of simple id selectors

{'mistake': 'Not verifying local storage persistence after page reload', 'why_bad': "Missing this step means you don't confirm data actually stays saved.", 'correct_approach': 'Use cy.reload() and assert the displayed value again to confirm persistence.'}

Bonus Challenge

Now add data-driven testing with 3 different username inputs: 'tester', 'admin', 'guest'

Show Hint