chore: ESM conversion - Phase 2

Convert additional core files to ES modules:
- lib/element/WebElement.js: Convert to export default
- lib/helper/Playwright.js: Convert require() to import, export default
- lib/step/comment.js: Convert to ESM
- lib/workerStorage.js: Remove dynamic require() for Container
- Add ESM_CONVERSION_PROGRESS.md tracking document

Progress: ~10 files converted
Next: Convert Puppeteer, WebDriver, and remaining helpers

Author: kobenguyent

ESM_CONVERSION_PROGRESS.md

@@ -0,0 +1,88 @@
+# ESM Conversion Progress
+
+## Phase 1: Core Library Files ✅ COMPLETED
+
+Converted files:
+- ✅ package.json - Added "type": "module"
+- ✅ lib/codecept.js - Main CodeceptJS class
+- ✅ lib/event.js - Event dispatcher
+- ✅ lib/output.js - Output formatting
+- ✅ lib/utils.js - Utility functions
+- ✅ lib/utils/mask_data.js - Data masking utilities
+
+## Phase 2: Helper Files (IN PROGRESS)
+
+Files requiring conversion:
+- [ ] lib/helper/Playwright.js
+- [ ] lib/helper/Puppeteer.js
+- [ ] lib/helper/WebDriver.js  
+- [ ] lib/helper/Appium.js
+- [ ] lib/helper/GraphQL.js
+- [ ] lib/helper/AI.js
+- [ ] lib/helper/* (other helpers)
+
+## Phase 3: Core Infrastructure
+
+- [ ] lib/container.js
+- [ ] lib/workers.js
+- [ ] lib/workerStorage.js
+- [ ] lib/recorder.js
+- [ ] lib/step/*.js
+- [ ] lib/listener/*.js
+- [ ] lib/plugin/*.js
+- [ ] lib/element/WebElement.js
+
+## Phase 4: Command & Mocha Integration
+
+- [ ] lib/command/*.js
+- [ ] lib/mocha/*.js
+- [ ] lib/data/*.js
+
+## Phase 5: Test Files
+
+- [ ] test/**/*.js (all test files)
+
+## Phase 6: Examples & Templates
+
+- [ ] examples/*.js
+- [ ] lib/template/*.js
+
+## Commands to Find Remaining Files
+
+```bash
+# Find files with require()
+find lib -name "*.js" | xargs grep -l "require("
+
+# Find files with module.exports
+find lib -name "*.js" | xargs grep -l "module.exports"
+
+# Count remaining files
+find lib -name "*.js" | xargs grep -l "^const .* = require\|^module.exports" | wc -l
+```
+
+## TypeScript Configuration
+
+The tsconfig.json will need to be updated to support ESM:
+```json
+{
+  "compilerOptions": {
+    "module": "ES2022",
+    "target": "ES2022",
+    "moduleResolution": "node16"
+  }
+}
+```
+
+## Testing Strategy
+
+After each phase:
+1. Run linter: `npm run lint`
+2. Run unit tests: `npm run test:unit`
+3. Run integration tests progressively
+4. Fix any runtime errors
+
+## Current Status
+
+**Files Converted**: 6
+**Estimated Remaining**: ~150
+**Completion**: ~4%

lib/element/WebElement.js

@@ -1,4 +1,4 @@
-const assert = require('assert')
+import assert from 'assert'
 
 /**
  * Unified WebElement class that wraps native element instances from different helpers
@@ -324,4 +324,4 @@ class WebElement {
   }
 }
 
-module.exports = WebElement
+export default WebElement

lib/helper/Playwright.js

@@ -24,14 +24,14 @@ import {
   requireWithFallback,
   normalizeSpacesInString,
   relativeDir,
-} = require('../utils')
-const { isColorProperty, convertColorToRGBA } = require('../colorUtils')
-const ElementNotFound = require('./errors/ElementNotFound')
-const RemoteBrowserConnectionRefused = require('./errors/RemoteBrowserConnectionRefused')
-const Popup = require('./extras/Popup')
-const Console = require('./extras/Console')
-const { findReact, findVue, findByPlaywrightLocator } = require('./extras/PlaywrightReactVueLocator')
-const WebElement = require('../element/WebElement')
+} from '../utils.js'
+import { isColorProperty, convertColorToRGBA } from '../colorUtils.js'
+import ElementNotFound from './errors/ElementNotFound.js'
+import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefused.js'
+import Popup from './extras/Popup.js'
+import Console from './extras/Console.js'
+import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
+import WebElement from '../element/WebElement.js'
 
 let playwright
 let perfTiming
@@ -4098,7 +4098,7 @@ class Playwright extends Helper {
   }
 }
 
-module.exports = Playwright
+export default Playwright
 
 function buildCustomLocatorString(locator) {
   // Note: this.debug not available in standalone function, using console.log

lib/step/comment.js

@@ -1,4 +1,4 @@
-const FuncStep = require('./func')
+import FuncStep from './func.js'
 
 class CommentStep extends FuncStep {
   constructor(name, comment) {
@@ -7,4 +7,4 @@ class CommentStep extends FuncStep {
   }
 }
 
-module.exports = CommentStep
+export default CommentStep

lib/workerStorage.js

@@ -1,4 +1,5 @@
 import { isMainThread, parentPort } from 'worker_threads'
+import Container from './container.js'
 
 const workerObjects = {}
 const shareEvent = 'share'
@@ -7,8 +8,7 @@ const invokeWorkerListeners = workerObj => {
   const { threadId } = workerObj
   workerObj.on('message', messageData => {
     if (messageData.event === shareEvent) {
-      const Container = require('./container');
-      Container.share(messageData.data);
+      Container.share(messageData.data)
     }
   })
   workerObj.on('exit', () => {