Local storage management in Cypress - Framework Patterns

Framework Mode - Local storage management

Folder Structure

cypress/
├── e2e/                  # Test specs
│   └── localStorage.spec.js
├── support/              # Custom commands and utilities
│   ├── commands.js       # Custom Cypress commands
│   ├── localStorage.js   # Local storage helper functions
│   └── index.js          # Support file loaded before tests
cypress.config.js         # Cypress configuration file

Test Framework Layers

• Test Specs (cypress/e2e): Contains test files that use local storage commands to verify app behavior.
• Support Layer (cypress/support): Holds reusable code like custom commands and helpers for local storage management.
• Configuration (cypress.config.js): Defines environment settings, base URLs, and browser options.

Configuration Patterns

Use cypress.config.js to set base URLs and environment variables for different environments (dev, staging, prod).

Example snippet to set environment variables for local storage keys:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    env: {
      localStorageKey: 'userSession'
    },
    setupNodeEvents(on, config) {
      // implement node event listeners here
    }
  }
})

Use Cypress.env('localStorageKey') in tests and helpers to access keys dynamically.

Test Reporting and CI/CD Integration

• Use Cypress built-in reporters like spec or integrate with mochawesome for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run Cypress tests headlessly and collect reports.
• Store test artifacts such as screenshots and videos on failure for debugging local storage related issues.

Best Practices

1. Use Custom Commands: Create commands like cy.saveLocalStorage() and cy.restoreLocalStorage() to reuse local storage handling code.
2. Isolate Tests: Clear or reset local storage before each test to avoid state leakage.
3. Use Environment Variables: Manage local storage keys and values via config to keep tests flexible.
4. Explicit Assertions: Always assert local storage state after actions to verify expected behavior.
5. Keep Helpers Modular: Put local storage utilities in separate support files for easy maintenance.

Self Check

Where in this folder structure would you add a new helper function to clear specific local storage items before each test?

Key Result

Organize Cypress tests with support helpers and config to manage local storage cleanly and reliably.