get-data-from-cache

A Cypress plugin that allows storing data in a cache to be used across multiple tests. This enhances test execution efficiency and consistency by sharing common setup data between tests. Ideal for scenarios where you need to reuse data without redundant API calls, improving overall test reliability and reducing flakiness.

Installation

Install the plugin via npm:

npm install get-data-from-cache

TypeScript Configuration

Ensure your tsconfig.json is properly configured to include Cypress types and the plugin's types:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "declaration": true,
    "declarationMap": true,
    "types": ["cypress"]
  },
  "include": ["src/**/*.ts", "cypress/**/*.ts"]
}

Usage

To use the get-data-from-cache plugin, you need to configure it in your Cypress configuration file and create tasks for putting and getting data from the cache.

Configure Cypress Add the following configuration to your cypress.config.ts file:

const { defineConfig } = require('cypress');
const cachePlugin = require('get-data-from-cache');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      cachePlugin(on, config);
      return config;
    }
  }
});

Simple Examples

Step 1: Putting Data in Cache

// cypress/e2e/putDataInCache.spec.ts
describe('Cache Plugin - Put Data', () => {
  it('should put data in cache', () => {
    cy.task('putDataInCache', { key: 'username', data: 'testuser' });
  });
});

Step 2: Get Data from Cache

// cypress/e2e/getDataFromCache.spec.ts
describe('Cache Plugin - Get Data', () => {
  it('should get data from cache', () => {
    cy.task('getDataFromCache', 'username').then((data) => {
      expect(data).to.equal('testuser');
    });
  });

  it('should handle non-existent cache keys', () => {
    cy.task('getDataFromCache', 'nonexistentkey').then((data) => {
      expect(data).to.equal('');
    });
  });
});

Example: Testing a Multi-Step Analytics Dashboard Setup Process

Step 1: Create Dashboard

Create a new dashboard and cache the dashboard ID

// cypress/e2e/dashboardStep1.cy.ts
describe('Analytics Dashboard Setup - Step 1: Create Dashboard', () => {
  it('should create a new dashboard and cache the dashboard ID', () => {
    cy.request('POST', '/api/dashboards', {
      name: 'Test Dashboard'
    }).then((response) => {
      expect(response.status).to.eq(201);
      cy.task('putDataInCache', { key: 'dashboardId', data: response.body.dashboardId });
    });
  });
});

Step 2: Add Widgets

Add widgets to the dashboard using the cached dashboard ID.

// cypress/e2e/dashboardStep2.cy.ts
describe('Analytics Dashboard Setup - Step 2: Add Widgets', () => {
  it('should add widgets to the dashboard using the cached dashboard ID', () => {
    cy.task('getDataFromCache', 'dashboardId').then((dashboardId) => {
      cy.request({
        method: 'POST',
        url: `/api/dashboards/${dashboardId}/widgets`,
        body: {
          widgets: [
            { type: 'chart', config: { title: 'Sales Over Time', dataSource: 'salesData' } },
            { type: 'table', config: { title: 'Top Products', dataSource: 'productData' } }
          ]
        }
      }).then((response) => {
        expect(response.status).to.eq(201);
      });
    });
  });
});

Step 3: Configure Filters

Configure filters for the dashboard using the cached dashboard ID.

// cypress/e2e/dashboardStep3.cy.ts
describe('Analytics Dashboard Setup - Step 3: Configure Filters', () => {
  it('should configure filters for the dashboard using the cached dashboard ID', () => {
    cy.task('getDataFromCache', 'dashboardId').then((dashboardId) => {
      cy.request({
        method: 'POST',
        url: `/api/dashboards/${dashboardId}/filters`,
        body: {
          filters: [
            { type: 'dateRange', config: { startDate: '2021-01-01', endDate: '2021-12-31' } },
            { type: 'category', config: { category: 'Electronics' } }
          ]
        }
      }).then((response) => {
        expect(response.status).to.eq(200);
      });
    });
  });
});

Step 4: Verify Dashboard Data

Verify that the dashboard displays the correct data using the cached dashboard ID.

// cypress/e2e/dashboardStep4.cy.ts
describe('Analytics Dashboard Setup - Step 4: Verify Dashboard Data', () => {
  it('should verify the dashboard displays correct data', () => {
    cy.task('getDataFromCache', 'dashboardId').then((dashboardId) => {
      cy.request({
        method: 'GET',
        url: `/api/dashboards/${dashboardId}/data`
      }).then((response) => {
        expect(response.status).to.eq(200);
        expect(response.body.widgets).to.have.length(2);
        expect(response.body.filters).to.have.length(2);
      });
    });
  });
});

Additional Scenarios

• Session Management: Cache session tokens or authentication tokens to avoid logging in repeatedly for each test.
• Data-Driven Testing: Store complex data sets and reuse them across multiple tests to validate different scenarios.
• API Testing: Cache API responses and use them across different tests to validate downstream services without hitting the upstream API repeatedly.
• Form Submissions: Store form data after submission in one test and use it to validate that the data persists across different parts of the application.
• E-commerce Flows: Cache cart contents after adding items in one test and verify the contents in subsequent tests for checkout flows.
• Performance Testing: Cache performance metrics or benchmarking data to compare results across different test runs without rerunning the performance tests.

Benefits

• Efficiency: Reduces redundant API calls and setup steps across tests, speeding up test execution.
• Consistency: Ensures consistent state and data across different tests, reducing flakiness.
• Modularity: Facilitates breaking down complex test scenarios into smaller, manageable tests.