Cypress Dynamic Fixtures

I’m excited to share my journey building a new npm package, cypress-dynamic-fixtures. This package extends Cypress by overwriting cy.fixture() to load dynamic JavaScript fixtures. In this post, I'll walk you through how we built it, the challenges we faced with ESM vs. CommonJS, and how we tackled module alias issues. Quick Summary Purpose: cypress-dynamic-fixtures extends Cypress to load .js fixtures dynamically. Key Features: Overwrites cy.fixture() for .js files Gathers fixtures at runtime using Node (no Babel config required) Easily integrates with CommonJS Backwards compatible w/ Static .json Challenges Overcome: ESM vs. CommonJS compatibility Handling module aliases in Node Benefits: Flexibility to compute or modify fixture data on the fly Minimal user setup Links: Github Repo - cypress-dynamic-fixtures NPM - cypress-dynamic-fixtures Introduction Cypress is an amazing tool for end-to-end testing, but one limitation is that its built-in cy.fixture() command only supports static JSON or text files. I needed a way to load dynamic JavaScript fixtures—data that can change or be computed at runtime. This inspired the creation of cypress-dynamic-fixtures. cypress-dynamic-fixtures: Overwrites cy.fixture() to handle .js files. Scans your cypress/fixtures folder at runtime using Node. Transforms file paths into keys using a dash-to-camel and slash-to-$ convention. Provides a minimal, zero-config setup for users. How It Works Dynamic Fixture Loading The package works by scanning your cypress/fixtures folder for .js files using the glob package. It then transforms each file’s path into a unique key (e.g., cards/card_valid_visa.js becomes cards$cardValidVisa) and stores the data in config.env.__ALL_JS_FIXTURES__. When you call: cy.fixture('cards/card_valid_visa.js') The overwritten command retrieves the corresponding data object from that mapping. Plugin and Command Overwrite The package is divided into two main parts: Plugin (Node-side): Scans fixture files and registers them in Cypress’ environment. This part uses CommonJS modules. Command Overwrite (Browser-side): Overwrites cy.fixture() to check for a .js extension and return dynamic data if available. Example: Sharing Dynamic Data with futureExpDates.js One of the benefits of dynamic fixtures is the ability to share computed or changing data across multiple files. Suppose we have a utility that calculates a future expiration date: // cypress/utils/futureExpDates.js const moment = require('moment'); const futureMonth = moment().format('MM'); const futureYear = moment().add(2, 'years').format('YY'); const futureExpDate = `${futureMonth}/${futureYear}`; module.exports = { month: futureMonth, year: futureYear, exp_date: futureExpDate, }; Then, in any credit card fixture, we can import and spread that data: // cypress/fixtures/cards/card_valid_visa.js const futureExpDates = require('@/utils/futureExpDates'); module.exports = { name: 'Card Valid Visa', card_number: '4111111111111111', cvv: '111', zip_code: '12345', ...futureExpDates, // merges in the dynamic expiration date }; By calling cy.fixture('cards/card_valid_visa.js') in your tests, you’ll automatically get updated expiration data each time. No more need to manually "bump" static fixture dates / data!

Mar 26, 2025 - 19:49

I’m excited to share my journey building a new npm package, cypress-dynamic-fixtures. This package extends Cypress by overwriting cy.fixture() to load dynamic JavaScript fixtures. In this post, I'll walk you through how we built it, the challenges we faced with ESM vs. CommonJS, and how we tackled module alias issues.

Quick Summary

Purpose: cypress-dynamic-fixtures extends Cypress to load .js fixtures dynamically.
Key Features:
- Overwrites cy.fixture() for .js files
- Gathers fixtures at runtime using Node (no Babel config required)
- Easily integrates with CommonJS
- Backwards compatible w/ Static .json
Challenges Overcome:
- ESM vs. CommonJS compatibility
- Handling module aliases in Node
Benefits:
- Flexibility to compute or modify fixture data on the fly
- Minimal user setup
Links:
- Github Repo - cypress-dynamic-fixtures
- NPM - cypress-dynamic-fixtures

Introduction

Cypress is an amazing tool for end-to-end testing, but one limitation is that its built-in cy.fixture() command only supports static JSON or text files. I needed a way to load dynamic JavaScript fixtures—data that can change or be computed at runtime. This inspired the creation of cypress-dynamic-fixtures.

cypress-dynamic-fixtures:

Overwrites cy.fixture() to handle .js files.
Scans your cypress/fixtures folder at runtime using Node.
Transforms file paths into keys using a dash-to-camel and slash-to-$ convention.
Provides a minimal, zero-config setup for users.

How It Works

Dynamic Fixture Loading

The package works by scanning your cypress/fixtures folder for .js files using the glob package. It then transforms each file’s path into a unique key (e.g., cards/card_valid_visa.js becomes cards$cardValidVisa) and stores the data in config.env.__ALL_JS_FIXTURES__.

When you call:

cy.fixture('cards/card_valid_visa.js')

The overwritten command retrieves the corresponding data object from that mapping.

Plugin and Command Overwrite

The package is divided into two main parts:

Plugin (Node-side):

Scans fixture files and registers them in Cypress’ environment. This part uses CommonJS modules.
Command Overwrite (Browser-side):

Overwrites cy.fixture() to check for a .js extension and return dynamic data if available.

Example: Sharing Dynamic Data with `futureExpDates.js`

One of the benefits of dynamic fixtures is the ability to share computed or changing data across multiple files. Suppose we have a utility that calculates a future expiration date:

// cypress/utils/futureExpDates.js
const moment = require('moment');

const futureMonth = moment().format('MM');
const futureYear = moment().add(2, 'years').format('YY');
const futureExpDate = `${futureMonth}/${futureYear}`;

module.exports = {
  month: futureMonth,
  year: futureYear,
  exp_date: futureExpDate,
};

Then, in any credit card fixture, we can import and spread that data:

// cypress/fixtures/cards/card_valid_visa.js
const futureExpDates = require('@/utils/futureExpDates');

module.exports = {
  name: 'Card Valid Visa',
  card_number: '4111111111111111',
  cvv: '111',
  zip_code: '12345',
  ...futureExpDates, // merges in the dynamic expiration date
};

By calling cy.fixture('cards/card_valid_visa.js') in your tests, you’ll automatically get updated expiration data each time. No more need to manually "bump" static fixture dates / data!