@capillarytech/cap-ui-dev-tools 0.0.4 → 1.2.0

package/src/capvision-recorder/core/ReportEnhancer.js

@@ -0,0 +1,506 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * Report Enhancer Configuration
+ * @typedef {Object} ReportEnhancerConfig
+ * @property {boolean} [ENABLE_FEATURE] - Master feature flag - if false, replay enhancement is completely disabled (default: true)
+ * @property {string} [recordingsDir] - Directory where recordings are stored
+ * @property {string} [reportsDir] - Directory where HTML reports are located
+ * @property {string} [playerCSSPath] - Path to CapVision player CSS file
+ * @property {string} [playerScriptPath] - Path to CapVision player script file
+ * @property {string} [consoleReplayPluginPath] - Path to console replay plugin
+ * @property {string} [networkReplayPluginPath] - Path to network replay plugin
+ * @property {number} [playerWidth] - Player width in pixels
+ * @property {number} [playerHeight] - Player height in pixels
+ * @property {boolean} [autoPlay] - Auto-play recordings on load
+ * @property {string[]} [enabledClusters] - Only enhance for these clusters (empty = all)
+ * @property {string[]} [enabledModules] - Only enhance for these modules (empty = all)
+ */
+
+/**
+ * Recording Data Interface
+ * @typedef {Object} RecordingData
+ * @property {string} filename - Recording filename
+ * @property {Object} data - Recording data object
+ * @property {string} data.testName - Test name
+ * @property {number} data.recordingNumber - Recording number/sequence
+ * @property {string} data.timestamp - ISO timestamp
+ * @property {number} data.totalEvents - Total events in recording
+ * @property {Array} data.events - Array of CapVision events
+ */
+
+/**
+ * Default Configuration
+ * @type {ReportEnhancerConfig}
+ */
+const DEFAULT_ENHANCER_CONFIG = {
+  ENABLE_FEATURE: true,
+  recordingsDir: path.join(process.cwd(), 'reports', 'recordings'),
+  reportsDir: path.join(process.cwd(), 'reports', 'html-reports'),
+  playerCSSPath: path.join(__dirname, '../assets/capvision-player.css'),
+  playerScriptPath: path.join(__dirname, '../assets/capvision-player.min.js'),
+  consoleReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/console-replay.min.js'),
+  networkReplayPluginPath: path.join(__dirname, '../assets/capvision-plugins/network-replay.min.js'),
+  playerWidth: 800,
+  playerHeight: 460,
+  autoPlay: false,
+  enabledClusters: [],
+  enabledModules: []
+};
+
+/**
+ * Report Enhancer Class
+ * Enhances HTML reports with CapVision player functionality
+ * @class
+ */
+class ReportEnhancer {
+  /**
+   * Create a new Report Enhancer instance
+   * @param {ReportEnhancerConfig} [config={}] - Enhancer configuration
+   */
+  constructor(config = {}) {
+    /** @type {ReportEnhancerConfig} */
+    this.config = { ...DEFAULT_ENHANCER_CONFIG, ...config };
+  }
+
+  /**
+   * Update configuration
+   * @param {Partial<ReportEnhancerConfig>} config - Configuration updates
+   */
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+  }
+
+  /**
+   * Get current configuration
+   * @returns {ReportEnhancerConfig} Current configuration object
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+
+  /**
+   * Check if enhancement should be enabled for current cluster
+   * @private
+   * @param {string} [cluster] - Override cluster (defaults to process.env.cluster)
+   * @returns {boolean} True if enabled for cluster
+   */
+  isEnabledForCluster(cluster) {
+    if (this.config.enabledClusters.length === 0) {
+      return true;
+    }
+
+    const currentCluster = cluster || process.env.cluster;
+    return currentCluster ? this.config.enabledClusters.includes(currentCluster) : false;
+  }
+
+  /**
+   * Check if enhancement should be enabled for current module
+   * @private
+   * @param {string} [module] - Override module (defaults to process.env.module)
+   * @returns {boolean} True if enabled for module
+   */
+  isEnabledForModule(module) {
+    if (this.config.enabledModules.length === 0) {
+      return true;
+    }
+
+    const currentModule = module || process.env.module;
+    return currentModule ? this.config.enabledModules.includes(currentModule) : false;
+  }
+
+  /**
+   * Check if enhancement is enabled
+   * @param {string} [cluster] - Override cluster check
+   * @param {string} [module] - Override module check
+   * @returns {boolean} True if enhancement enabled
+   */
+  isEnhancementEnabled(cluster, module) {
+    return this.isEnabledForCluster(cluster) && this.isEnabledForModule(module);
+  }
+
+  /**
+   * Get available recordings
+   * @private
+   * @returns {RecordingData[]} Array of recording data objects
+   */
+  getAvailableRecordings() {
+    try {
+      if (!fs.existsSync(this.config.recordingsDir)) {
+        return [];
+      }
+
+      const files = fs.readdirSync(this.config.recordingsDir);
+      const recordingFiles = files.filter(file => file.endsWith('.json'));
+
+      const recordings = [];
+      for (const file of recordingFiles) {
+        try {
+          const filePath = path.join(this.config.recordingsDir, file);
+          const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+          recordings.push({
+            filename: file,
+            data: data
+          });
+        } catch (error) {
+          console.error(`🔴 Failed to read recording file ${file}:`, error.message);
+        }
+      }
+
+      return recordings;
+    } catch (error) {
+      console.error('🔴 Failed to get recordings:', error.message);
+      return [];
+    }
+  }
+
+  /**
+   * Add inline recording players to HTML content
+   * @private
+   * @param {string} htmlContent - Original HTML content
+   * @param {RecordingData[]} recordings - Array of recordings to add
+   * @returns {string} Modified HTML content with players
+   */
+  addInlineRecordingPlayers(htmlContent, recordings) {
+    if (recordings.length === 0) {
+      return htmlContent;
+    }
+
+    const testHeaderRegex = /(<tr class="test-header">[\s\S]*?<\/tr>)/;
+
+    return htmlContent.replace(testHeaderRegex, (match) => {
+      const recordingPlayersHTML = recordings.map((recording, index) => {
+        const testName = recording.data.testName || 'Unknown Test';
+        const recordingNumber = recording.data.recordingNumber || (index + 1);
+        const displayName = recording.data.testName
+          ? `${testName} (Recording #${recordingNumber})`
+          : recording.filename;
+
+        return `
+                    <tr class="test-row recording">
+                        <td colspan="2">
+                            <div class="recordingWrapper" style="padding: 15px; background: #f8f9fa; margin: 10px 0;">
+                                <h4 style="margin: 0 0 10px 0; color: #007bff; font-size: 16px;">
+                                    🎬 Session Recording: ${displayName}
+                                </h4>
+                                <div class="recording-info" style="margin-bottom: 10px; font-size: 12px; color: #666;">
+                                    Events: ${recording.data.totalEvents} | Timestamp: ${recording.data.timestamp} | File: ${recording.filename}
+                                </div>
+                                <div id="capvision-player-inline-${index}" class="capvision-player-inline" style="width: 100%; max-width: ${this.config.playerWidth + 200}px; height: ${this.config.playerHeight + 100}px; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
+                                    <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">
+                                        Loading recording player...
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>`;
+      }).join('');
+
+      return match + recordingPlayersHTML;
+    });
+  }
+
+  /**
+   * Generate CapVision player HTML and JavaScript
+   * @private
+   * @param {RecordingData[]} recordings - Array of recordings to embed
+   * @returns {string} HTML/JavaScript string to inject
+   */
+  generateCapVisionPlayerHTML(recordings) {
+    // Read bundled assets
+    let playerCSS = '';
+    try {
+      playerCSS = fs.readFileSync(this.config.playerCSSPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load CapVision player CSS:', error.message);
+    }
+
+    let playerScript = '';
+    try {
+      playerScript = fs.readFileSync(this.config.playerScriptPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load CapVision player script:', error.message);
+    }
+
+    let consoleReplayPlugin = '';
+    try {
+      consoleReplayPlugin = fs.readFileSync(this.config.consoleReplayPluginPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load console replay plugin:', error.message);
+    }
+
+    // Read bundled network replay plugin
+    let networkReplayPlugin = '';
+    try {
+      networkReplayPlugin = fs.readFileSync(this.config.networkReplayPluginPath, 'utf8');
+    } catch (error) {
+      console.warn('⚠️ Failed to load network replay plugin:', error.message);
+    }
+
+    return `
+    <!-- CapVision Player CSS (Bundled) -->
+    <style>
+      ${playerCSS}
+    </style>
+    
+    <!-- CapVision Player Script (Bundled) -->
+    <script>
+      ${playerScript}
+    </script>
+    
+    <!-- Console Replay Plugin (Bundled) -->
+    <script>
+      ${consoleReplayPlugin}
+    </script>
+    
+    <!-- Network Replay Plugin (Bundled) -->
+    <script>
+      ${networkReplayPlugin}
+    </script>
+    
+    <script>
+      // CapVision Player Integration Script for Inline Players
+      (function() {
+        const recordings = ${JSON.stringify(recordings)};
+        let players = [];
+        
+        // Initialize all inline players
+        function initializeInlinePlayers() {
+          recordings.forEach((recording, index) => {
+            const playerContainer = document.getElementById(\`capvision-player-inline-\${index}\`);
+            if (playerContainer) {
+              try {
+                console.log('🟡 Initializing inline player for recording:', recording.filename);
+                
+                // Clear loading message
+                playerContainer.innerHTML = '';
+                
+                // Build plugins array for replay
+                const plugins = [];
+                
+                // Add console replay plugin if available
+                if (window.rrwebPluginConsoleReplay) {
+                  try {
+                    const replayOptions = { level: ['log', 'info', 'warn', 'error'] };
+                    let consolePlugin;
+                    
+                    // Handle different export patterns
+                    if (typeof window.rrwebPluginConsoleReplay === 'function') {
+                      consolePlugin = window.rrwebPluginConsoleReplay(replayOptions);
+                    } else if (window.rrwebPluginConsoleReplay.getReplayConsolePlugin) {
+                      consolePlugin = window.rrwebPluginConsoleReplay.getReplayConsolePlugin(replayOptions);
+                    } else if (window.rrwebPluginConsoleReplay.default) {
+                      consolePlugin = window.rrwebPluginConsoleReplay.default(replayOptions);
+                    }
+                    
+                    if (consolePlugin) {
+                      plugins.push(consolePlugin);
+                    }
+                  } catch (error) {
+                    console.warn('⚠️ Failed to initialize console replay plugin:', error.message);
+                  }
+                }
+                
+                // Add network replay plugin if available
+                if (window.rrwebPluginNetworkReplay) {
+                  try {
+                    console.log('🟡 Initializing network replay plugin...');
+                    const networkReplayOptions = {
+                      showPanel: true,
+                      maxEntries: 100,
+                      position: 'bottom-right'
+                    };
+                    let networkPlugin;
+                    
+                    // Handle different export patterns
+                    if (typeof window.rrwebPluginNetworkReplay === 'function') {
+                      networkPlugin = window.rrwebPluginNetworkReplay(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (function pattern)');
+                    } else if (window.rrwebPluginNetworkReplay.getReplayNetworkPlugin) {
+                      networkPlugin = window.rrwebPluginNetworkReplay.getReplayNetworkPlugin(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (getReplayNetworkPlugin pattern)');
+                    } else if (window.rrwebPluginNetworkReplay.default) {
+                      networkPlugin = window.rrwebPluginNetworkReplay.default(networkReplayOptions);
+                      console.log('🟢 Network replay plugin initialized (default pattern)');
+                    }
+                    
+                    if (networkPlugin) {
+                      console.log('🟡 Network plugin structure:', {
+                        hasHandler: typeof networkPlugin.handler === 'function',
+                        hasOnBuild: typeof networkPlugin.onBuild === 'function',
+                        keys: Object.keys(networkPlugin)
+                      });
+                      plugins.push(networkPlugin);
+                      console.log('🟢 Network replay plugin added to plugins array');
+                    } else {
+                      console.warn('⚠️ Network replay plugin is null or undefined');
+                    }
+                  } catch (error) {
+                    console.error('🔴 Failed to initialize network replay plugin:', error);
+                    console.error('🔴 Error stack:', error.stack);
+                  }
+                } else {
+                  console.warn('⚠️ window.rrwebPluginNetworkReplay not found');
+                }
+                
+                // Create RRWeb player
+                const player = new rrwebPlayer({
+                  target: playerContainer,
+                  props: {
+                    events: recording.data.events,
+                    width: ${this.config.playerWidth},
+                    height: ${this.config.playerHeight},
+                    autoPlay: ${this.config.autoPlay},
+                    speed: 1,
+                    showController: true,
+                    mouseTail: true,
+                    plugins: plugins.length > 0 ? plugins : undefined,
+                    insertStyleRules: [
+                      '.replayer-wrapper { border-radius: 8px; width: 100%; height: 100%; }',
+                      '.replayer-mouse { z-index: 1000; }',
+                      '.replayer-controller { background: rgba(0,0,0,0.8); border-radius: 4px; }',
+                      '.replayer-controller button { color: white; }',
+                      '.replayer-wrapper { background: white; }'
+                    ]
+                  }
+                });
+                
+                players[index] = player;
+                
+                console.log('🟢 Successfully initialized inline player for recording:', recording.filename);
+                
+              } catch (error) {
+                console.error('🔴 Failed to initialize inline player for recording:', recording.filename, error);
+                playerContainer.innerHTML = \`
+                  <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #dc3545; font-size: 16px; flex-direction: column;">
+                    <div>❌ Failed to load recording</div>
+                    <div style="font-size: 12px; margin-top: 5px;">\${error.message}</div>
+                  </div>
+                \`;
+              }
+            }
+          });
+        }
+        
+        // Initialize players when DOM is ready
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initializeInlinePlayers);
+        } else {
+          initializeInlinePlayers();
+        }
+        
+        // Cleanup function
+        window.addEventListener('beforeunload', function() {
+          players.forEach(player => {
+            if (player && player.destroy) {
+              player.destroy();
+            }
+          });
+        });
+        
+        console.log('🟢 CapVision Player integration loaded with', recordings.length, 'recording(s)');
+        
+      })();
+    </script>
+    `;
+  }
+
+  /**
+   * Enhance a single HTML report with CapVision player
+   * @async
+   * @param {string} reportPath - Path to HTML report file
+   * @returns {Promise<void>}
+   */
+  async enhanceReport(reportPath) {
+    try {
+      // Check master feature flag first
+      if (this.config.ENABLE_FEATURE === false) {
+        console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false), skipping report enhancement');
+        return;
+      }
+
+      console.log('🟡 Enhancing HTML report with CapVision player:', reportPath);
+
+      if (!fs.existsSync(reportPath)) {
+        console.log('🟡 HTML report not found, skipping enhancement');
+        return;
+      }
+
+      const recordings = this.getAvailableRecordings();
+      if (recordings.length === 0) {
+        console.log('🟡 No CapVision recordings found, skipping enhancement');
+        return;
+      }
+
+      let htmlContent = fs.readFileSync(reportPath, 'utf8');
+
+      // Add inline players
+      htmlContent = this.addInlineRecordingPlayers(htmlContent, recordings);
+
+      // Add player scripts and CSS
+      const capVisionPlayerHTML = this.generateCapVisionPlayerHTML(recordings);
+      const bodyEndIndex = htmlContent.lastIndexOf('</body>');
+      
+      if (bodyEndIndex === -1) {
+        console.log('🟡 Could not find </body> tag, appending to end');
+        htmlContent += capVisionPlayerHTML;
+      } else {
+        htmlContent = htmlContent.slice(0, bodyEndIndex) + capVisionPlayerHTML + htmlContent.slice(bodyEndIndex);
+      }
+
+      fs.writeFileSync(reportPath, htmlContent);
+
+      console.log('🟢 Successfully enhanced HTML report with CapVision player');
+      console.log(`🟢 Found ${recordings.length} recording(s) to integrate`);
+
+    } catch (error) {
+      console.error('🔴 Failed to enhance HTML report:', error.message);
+    }
+  }
+
+  /**
+   * Enhance all HTML reports in the reports directory
+   * @async
+   * @returns {Promise<void>}
+   */
+  async enhanceAllReports() {
+    try {
+      // Check master feature flag first
+      if (this.config.ENABLE_FEATURE === false) {
+        console.log('🟡 CapVision feature disabled (ENABLE_FEATURE=false), skipping report enhancement');
+        return;
+      }
+
+      if (!this.isEnhancementEnabled()) {
+        console.log('🟡 Skipping report enhancement (disabled for current cluster/module)');
+        return;
+      }
+
+      if (!fs.existsSync(this.config.reportsDir)) {
+        console.log('🟡 Reports directory not found');
+        return;
+      }
+
+      const files = fs.readdirSync(this.config.reportsDir);
+      const htmlFiles = files.filter(file => file.endsWith('.html'));
+
+      for (const htmlFile of htmlFiles) {
+        const reportPath = path.join(this.config.reportsDir, htmlFile);
+        await this.enhanceReport(reportPath);
+      }
+
+      console.log('🟢 Enhanced all HTML reports with CapVision player');
+
+    } catch (error) {
+      console.error('🔴 Failed to enhance reports:', error.message);
+    }
+  }
+}
+
+// Export class and default config
+module.exports = {
+  ReportEnhancer,
+  DEFAULT_ENHANCER_CONFIG
+};
+

package/src/capvision-recorder/index.js

@@ -0,0 +1,58 @@
+/**
+ * CapVision Recorder Module for @capillarytech/cap-ui-dev-tools
+ * 
+ * Session recording and playback functionality for WebdriverIO tests
+ * 
+ * @module capvision-recorder
+ */
+
+const path = require('path');
+
+// Import core modules
+const { CapVisionRecorder, DEFAULT_CONFIG: CAPVISION_DEFAULT_CONFIG } = require('./core/CapVisionRecorder');
+const { ReportEnhancer, DEFAULT_ENHANCER_CONFIG } = require('./core/ReportEnhancer');
+const {
+  WebdriverIOBrowserExecutor,
+  WebdriverIOCapVisionRecorder,
+  createWDIOCapVisionHooks
+} = require('./adapters/WebdriverIOAdapter');
+
+// Update default asset paths to match cap-ui-dev-tools structure
+const ASSET_BASE_PATH = path.join(__dirname, 'assets');
+
+CAPVISION_DEFAULT_CONFIG.capVisionScriptPath = path.join(ASSET_BASE_PATH, 'capvision.min.js');
+CAPVISION_DEFAULT_CONFIG.consoleRecordPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/console-record.min.js');
+CAPVISION_DEFAULT_CONFIG.consoleReplayPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/console-replay.min.js');
+CAPVISION_DEFAULT_CONFIG.networkRecordPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/network-record.min.js');
+CAPVISION_DEFAULT_CONFIG.networkReplayPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/network-replay.min.js');
+
+DEFAULT_ENHANCER_CONFIG.playerCSSPath = path.join(ASSET_BASE_PATH, 'capvision-player.css');
+DEFAULT_ENHANCER_CONFIG.playerScriptPath = path.join(ASSET_BASE_PATH, 'capvision-player.min.js');
+DEFAULT_ENHANCER_CONFIG.consoleReplayPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/console-replay.min.js');
+DEFAULT_ENHANCER_CONFIG.networkReplayPluginPath = path.join(ASSET_BASE_PATH, 'capvision-plugins/network-replay.min.js');
+
+/**
+ * Export all CapVision recorder components
+ */
+module.exports = {
+  // Core classes
+  CapVisionRecorder,
+  ReportEnhancer,
+  
+  // WebdriverIO adapters
+  WebdriverIOBrowserExecutor,
+  WebdriverIOCapVisionRecorder,
+  
+  // Convenience helpers
+  createWDIOCapVisionHooks,
+  
+  // Default configurations
+  CAPVISION_DEFAULT_CONFIG,
+  DEFAULT_ENHANCER_CONFIG
+};
+
+/**
+ * Default export - most commonly used function
+ */
+module.exports.default = createWDIOCapVisionHooks;
+

package/src/index.js

@@ -1,7 +1,34 @@
-import '@shared-ui-lib/index.js';
+/**
+ * @capillarytech/cap-ui-dev-tools
+ * 
+ * Development tools for Capillary UI projects
+ * 
+ * @module cap-ui-dev-tools
+ */
 
-console.log("Webpack entry point loaded.");
+// Webpack Plugin for library hot-reloading
+const LibraryWatcherPlugin = require('./LibraryWatcherPlugin');
 
-if (module.hot) {
-  module.hot.accept();
-}
+// CapVision Recorder for test session recording
+const capVisionRecorder = require('./capvision-recorder');
+
+/**
+ * Main exports for cap-ui-dev-tools
+ */
+module.exports = {
+  // Webpack plugin (existing functionality)
+  LibraryWatcherPlugin,
+  
+  // CapVision recorder module (new functionality)
+  capVisionRecorder,
+  
+  // Convenience exports for CapVision (most commonly used)
+  createWDIOCapVisionHooks: capVisionRecorder.createWDIOCapVisionHooks,
+  CapVisionRecorder: capVisionRecorder.CapVisionRecorder,
+  ReportEnhancer: capVisionRecorder.ReportEnhancer
+};
+
+/**
+ * Default export - LibraryWatcherPlugin for backward compatibility
+ */
+module.exports.default = LibraryWatcherPlugin;