Cypress Dynamic Fixtures

by Greg Jacobs

A simple Cypress command overwrite that allows loading .js fixture files. It scans your cypress/fixtures folder at test runtime and maps them to cy.fixture('my_fixture.js').

View the repository on Github

⇲ Installation

npm install --save-dev cypress-dynamic-fixtures

⛭ Setup

1. Load the plugin in Cypress config

In your cypress.config.js (Cypress 10+), load our plugin so we can scan .js fixtures:

// cypress.config.js
const { defineConfig } = require('cypress');
const { dynamicFixturePlugin } = require('cypress-dynamic-fixtures/plugin');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Hook up the plugin
      return dynamicFixturePlugin(on, config);
    },
  },
});

2. Import

In your cypress/support/e2e.js, just import the package to register the cy.fixture() overwrite command:

// cypress/support/e2e.js
import 'cypress-dynamic-fixtures';

3. Done!

You are all setup to use .js files for dynamic fixture data.

⃕ Usage

1. Example Fixture.js

Create your new dynamic .js fixture file example:

// cypress/fixtures/subfolders_optional/dynamic_date_fixture.js
const now = new Date();

module.exports = {
    todaysDate: now,
};

2. Example Spec.js

Use your dynamic data from fixtures in your test files using cy.fixture()

• Be sure to include the .js extension

// ./example_spec.js
Then('I expect todays date to exist', () => {
    cy.fixture('dynamic_date_fixture.js') // NOTICE the inclusion of .js
        .then((fixture) => cy.contains(fixture.todaysDate).should('exist'));
});

⃔ Backwards compatible

In your existing project, you can use cy.fixture() with static .json data just as before. Nothing breaks.

• cypress/fixtures/static_data.json

  {
      "staticDate": "2025-03-25"
  }

• ./existing_spec.js

  Then('I expect a static date to exist', () => {
      cy.fixture('static_data') // NOTICE no file extension required (optional: static_data.json)
          .then((fixture) => cy.contains(fixture.staticDate).should('exist'));
  });

Troubleshooting

Module System Compatibility: CommonJS vs ESM

Our package, cypress-dynamic-fixtures, is built using CommonJS. This means that all internal modules are loaded using require() and exported using module.exports. This approach works seamlessly in the default Node.js and Cypress environments.

For CommonJS Users

If your project is configured with CommonJS (the default for many Node.js projects), you can use our package as shown in the examples without any extra configuration. For example:

• In your cypress.config.js:

  const { dynamicFixturePlugin } = require('cypress-dynamic-fixtures/plugin');
  
  module.exports = defineConfig({
    e2e: {
      setupNodeEvents(on, config) {
        return dynamicFixturePlugin(on, config);
      },
    },
  });

_

For ESM Users

If your project is using ECMAScript Modules (ESM), you may need to adjust your import statements slightly. For example:

1. Update your package.json:

   • Make sure your project’s package.json includes "type": "module" to enable native ESM support.

2. Importing the Plugin:

   • Use the ESM import syntax. For example:

   // cypress.config.js
   import { defineConfig } from 'cypress';
   import { dynamicFixturePlugin } from 'cypress-dynamic-fixtures/plugin';
          
   export default defineConfig({
       e2e: {
           async setupNodeEvents(on, config) {
               return await dynamicFixturePlugin(on, config);
           },
        },
    });

3. If you run into issues, you might try a dynamic import:

   const { dynamicFixturePlugin } = await import('cypress-dynamic-fixtures/plugin');

4. Using in Support Files:

   • Similarly, in your support file, use the ESM import:

   // cypress/support/e2e.js
   import 'cypress-dynamic-fixtures';

Summary: CommonJS vs ESM

• CommonJS: Use require() and module.exports as shown in our examples.

• ESM: Ensure your project supports ESM (e.g., via "type": "module" in your package.json) and update your import statements accordingly.

If you encounter any issues with module resolution or environment configuration, please refer to the Node.js ESM documentation or open an issue on our project repository.

Alias Problems

If you encounter issues with resolving module aliases (e.g., Cannot find module '@/utils/someUtil.js'), here is a possible solution:

Optional: Use the module-alias Package

If you prefer to keep using alias paths (such as @/utils/someUtil.js), follow these steps:

1. Install module-alias:

npm install --save-dev module-alias

2. Configure your package.json:

• Add an _moduleAliases section to map your alias:

{
    "_moduleAliases": {
        "@": "cypress"
    }
}

3. Register module-alias at runtime:

• At the very top of your main entry file (e.g., in your cypress.config.js), be sure to register module-alias package to use your aliases:

require('module-alias/register'); // NOTE: Registers runtime module aliases (Babel aliases only work during transpilation)
const { dynamicFixturePlugin } = require('cypress-dynamic-fixtures/plugin');

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

This ensures that when your fixture files use aliases, Node can correctly resolve them at runtime.

📝 Final Notes:

That’s it! Just install, reference the plugin in cypress.config.js, and import cypress-dynamic-fixtures in your support file. You’re all set to enjoy dynamic .js fixture data in Cypress.

🔗 Reference Links:

• Cypress
• Cypress.io - Plugins & Fixtures
• GitHub - cypress-dynamic-fixtures
• Node.js ESM