Dynamic Import Service for WebdriverIO

This service automatically configures Babel to transform static imports to dynamic imports with cache busting for reliable test execution.

Features

• 🔄 Cache busting - Forces fresh module loading on every import
• 🔧 Automatic Babel configuration - No manual setup required
• 🧩 Simple integration - Just add to your services
• 🧪 Reliable testing - Ensure tests always use the latest code

Installation

npm install dynamic-import-service --save-dev

Usage

Add the service to your wdio.conf.ts file:

// wdio.conf.ts
import type { Options } from '@wdio/types';
import DynamicImportService from 'dynamic-import-service';

export const config: Options.Testrunner = {
  // Other WebdriverIO configuration...
  
  services: [
    [DynamicImportService, {
      // Configuration options (all optional)
      enableBabelTransform: true,
      include: ['.spec.ts', '.test.ts', '.e2e.ts'],
      exclude: ['node_modules', '@wdio', 'webdriverio'],
      debug: false
    }]
  ],
  
  // The service will automatically configure Babel
};

Refresh Modes

The service supports different refresh modes to control when modules are reloaded:

Command-level Refreshing ('command')

• Refreshes modules after each WebdriverIO command
• Provides immediate updates after interactions
• Higher overhead but most responsive

// wdio.conf.ts
import DynamicImportService from 'dynamic-import-service';

export const config = {
  // ...
  services: [
    [DynamicImportService, {
      refreshMode: 'command'  // Refresh after each command
    }]
  ]
};

Test-level Refreshing ('test' - Default)

• Refreshes modules before each test case
• Good balance of freshness and performance
• Ensures consistent module state within each test

// wdio.conf.ts
import DynamicImportService from 'dynamic-import-service';

export const config = {
  // ...
  services: [
    [DynamicImportService, {
      refreshMode: 'test'  // Refresh before each test (default)
    }]
  ]
};

Manual Refreshing ('manual')

• Only refreshes modules when explicitly requested
• Maximum control and performance
• Requires manual API calls

// wdio.conf.ts
import DynamicImportService from 'dynamic-import-service';

export const config = {
  // ...
  services: [
    [DynamicImportService, {
      refreshMode: 'manual'  // Only refresh when explicitly called
    }]
  ]
};

// In test file:
describe('My Test', () => {
  it('should refresh modules at strategic points', async () => {
    // Get service instance
    const service = browser.getService('DynamicImportService');
    
    // Run tests...
    
    // Explicitly refresh modules at a strategic point
    await service.refreshModules();
    
    // Continue with fresh modules...
  });
});

Disabled Refreshing ('never')

• Never automatically refreshes modules
• File watching is disabled
• Use when you only want the Babel transformation

// wdio.conf.ts
import DynamicImportService from 'dynamic-import-service';

export const config = {
  // ...
  services: [
    [DynamicImportService, {
      refreshMode: 'never'  // Disable automatic refreshing
    }]
  ]
};

How It Works

The service works in two ways:

1. Automatic Babel Transformation (Default)

When you write normal imports in your test files:

// Your test file
import { MyPage } from '../pages/MyPage';

describe('My Test', () => {
  it('should work with transformed imports', async () => {
    // Use MyPage...
  });
});

The Babel plugin transforms them to dynamic imports:

// What it's transformed to
const { MyPage } = await dynamicImport('../pages/MyPage', import.meta.url);

describe('My Test', () => {
  it('should work with transformed imports', async () => {
    // Use MyPage...
  });
});

2. Direct Dynamic Import Usage

You can also use the dynamicImport function directly:

// Direct usage
import { dynamicImport } from 'dynamic-import-service';

describe('My Test', () => {
  it('should work with direct dynamic imports', async () => {
    const { MyPage } = await dynamicImport('./pages/MyPage', import.meta.url);
    // Use MyPage...
  });
});

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enableBabelTransform | boolean | true | Enable Babel transformation | | include | string[] | ['.spec.ts', '.test.ts', '.e2e.ts'] | File patterns to include in transformation | | exclude | string[] | ['node_modules', '@wdio', 'webdriverio'] | File patterns to exclude from transformation | | debug | boolean | false | Enable debug logging | | refreshMode | string | 'test' | When to automatically refresh modules. Options: 'command', 'test', 'manual', 'never' | | watchPaths | string[] | ['./test/**/*.ts', './src/**/*.ts'] | File patterns to watch for changes |

Benefits

• No stale modules - Always get fresh code when tests run
• Cross-platform compatibility - Works on Windows and Linux
• Zero configuration - Just add the service
• Framework agnostic - Works with Mocha, Jasmine, and Cucumber

License

MIT