@vibecheckai/cli 3.2.5 → 3.3.0

package/bin/runners/lib/replay/player.js

@@ -1,348 +1,348 @@
-/**
- * Replay Player
- * Replays recorded user interactions and verifies behavior
- */
-
-const { EventEmitter } = require('events');
-const { performance } = require('perf_hooks');
-const fs = require('fs').promises;
-const path = require('path');
-const debug = require('debug')('vibecheck:replay:player');
-
-class ReplayPlayer extends EventEmitter {
-  constructor(options = {}) {
-    super();
-    this.options = {
-      speed: 1.0,
-      headless: true,
-      viewport: { width: 1280, height: 800 },
-      waitForNetworkIdle: true,
-      networkIdleTimeout: 500,
-      waitForSelectorTimeout: 30000,
-      ...options
-    };
-    
-    this.state = 'idle';
-    this.currentStep = 0;
-    this.stats = {
-      totalSteps: 0,
-      passed: 0,
-      failed: 0,
-      skipped: 0,
-      startTime: null,
-      endTime: null,
-      duration: 0
-    };
-    
-    this.page = null;
-    this.capsule = null;
-  }
-
-  async loadCapsule(capsulePath) {
-    this.state = 'loading';
-    
-    try {
-      // Load from file if it's a path
-      if (typeof capsulePath === 'string') {
-        const data = await fs.readFile(capsulePath, 'utf8');
-        this.capsule = JSON.parse(data);
-      } 
-      // Or use the provided capsule object
-      else if (capsulePath.metadata && Array.isArray(capsulePath.steps)) {
-        this.capsule = capsulePath;
-      } 
-      // Or load from a directory containing metadata.json and steps.json
-      else if (typeof capsulePath === 'object' && capsulePath.path) {
-        const [metadata, steps] = await Promise.all([
-          fs.readFile(path.join(capsulePath.path, 'metadata.json'), 'utf8')
-            .then(JSON.parse),
-          fs.readFile(path.join(capsulePath.path, 'steps.json'), 'utf8')
-            .then(JSON.parse)
-        ]);
-        this.capsule = { metadata, steps };
-      } else {
-        throw new Error('Invalid capsule format');
-      }
-      
-      this.stats.totalSteps = this.capsule.steps.length;
-      this.state = 'loaded';
-      this.emit('loaded', { steps: this.stats.totalSteps });
-      
-      return this.capsule;
-    } catch (error) {
-      this.state = 'error';
-      this.emit('error', { error, phase: 'load' });
-      throw error;
-    }
-  }
-
-  async setupPlaywright(browser) {
-    if (this.page) return this.page;
-    
-    try {
-      const context = await browser.newContext({
-        viewport: this.capsule.metadata.viewport || this.options.viewport,
-        userAgent: this.capsule.metadata.userAgent,
-        ignoreHTTPSErrors: true
-      });
-      
-      this.page = await context.newPage();
-      
-      // Set up request/response tracking
-      this._setupNetworkMonitoring();
-      
-      return this.page;
-    } catch (error) {
-      this.state = 'error';
-      this.emit('error', { error, phase: 'setup' });
-      throw error;
-    }
-  }
-
-  _setupNetworkMonitoring() {
-    if (!this.page) return;
-    
-    this.pendingRequests = new Set();
-    
-    this.page.on('request', request => {
-      if (this.options.waitForNetworkIdle) {
-        this.pendingRequests.add(request);
-      }
-    });
-    
-    this.page.on('requestfinished', request => {
-      this.pendingRequests.delete(request);
-    });
-    
-    this.page.on('requestfailed', request => {
-      this.pendingRequests.delete(request);
-    });
-  }
-
-  async waitForNetworkIdle() {
-    if (!this.options.waitForNetworkIdle || !this.page) return;
-    
-    const start = performance.now();
-    let hasPending = false;
-    
-    do {
-      hasPending = this.pendingRequests.size > 0;
-      
-      if (hasPending) {
-        await new Promise(r => setTimeout(r, 50));
-      }
-      
-      if (performance.now() - start > this.options.networkIdleTimeout) {
-        debug(`Network idle timeout after ${this.options.networkIdleTimeout}ms`);
-        break;
-      }
-    } while (hasPending);
-  }
-
-  async play() {
-    if (this.state !== 'loaded') {
-      throw new Error('No capsule loaded. Call loadCapsule() first.');
-    }
-    
-    this.state = 'playing';
-    this.currentStep = 0;
-    this.stats.startTime = performance.now();
-    this.stats.passed = 0;
-    this.stats.failed = 0;
-    this.stats.skipped = 0;
-    
-    this.emit('start', { steps: this.stats.totalSteps });
-    
-    try {
-      for (const step of this.capsule.steps) {
-        this.currentStep++;
-        this.emit('stepStart', { step: this.currentStep, total: this.stats.totalSteps, type: step.type });
-        
-        try {
-          await this._executeStep(step);
-          this.stats.passed++;
-          this.emit('stepPass', { 
-            step: this.currentStep, 
-            type: step.type,
-            duration: performance.now() - (step.timestamp || 0)
-          });
-        } catch (error) {
-          this.stats.failed++;
-          this.emit('stepFail', { 
-            step: this.currentStep, 
-            type: step.type,
-            error,
-            duration: performance.now() - (step.timestamp || 0)
-          });
-          
-          if (this.options.stopOnFailure) {
-            throw error;
-          }
-        }
-        
-        // Apply speed factor to timing
-        if (this.currentStep < this.capsule.steps.length - 1) {
-          const nextStep = this.capsule.steps[this.currentStep];
-          const currentTime = step.timestamp || 0;
-          const nextTime = nextStep.timestamp || 0;
-          const delay = (nextTime - currentTime) / this.options.speed;
-          
-          if (delay > 0) {
-            await new Promise(resolve => setTimeout(resolve, delay));
-          }
-        }
-      }
-      
-      this.stats.endTime = performance.now();
-      this.stats.duration = this.stats.endTime - this.stats.startTime;
-      this.state = 'completed';
-      
-      const result = {
-        ...this.stats,
-        success: this.stats.failed === 0,
-        capsule: this.capsule.metadata
-      };
-      
-      this.emit('complete', result);
-      return result;
-    } catch (error) {
-      this.state = 'error';
-      this.emit('error', { 
-        error, 
-        step: this.currentStep,
-        phase: 'playback'
-      });
-      throw error;
-    }
-  }
-
-  async _executeStep(step) {
-    if (!this.page) {
-      throw new Error('No page available. Call setupPlaywright() first.');
-    }
-    
-    debug(`Executing step: ${step.type}`, { step });
-    
-    switch (step.type) {
-      case 'navigation':
-        await this.page.goto(step.url, { 
-          waitUntil: 'networkidle',
-          timeout: this.options.waitForSelectorTimeout
-        });
-        break;
-        
-      case 'click':
-        if (step.selector) {
-          await this.page.waitForSelector(step.selector, {
-            state: 'visible',
-            timeout: this.options.waitForSelectorTimeout
-          });
-          await this.page.click(step.selector, {
-            button: step.button,
-            clickCount: step.clickCount || 1,
-            delay: 50
-          });
-        } else if (step.x !== undefined && step.y !== undefined) {
-          await this.page.mouse.click(step.x, step.y, {
-            button: step.button,
-            clickCount: step.clickCount || 1,
-            delay: 50
-          });
-        } else {
-          throw new Error('Click step requires either selector or x,y coordinates');
-        }
-        break;
-        
-      case 'input':
-        if (!step.selector) {
-          throw new Error('Input step requires a selector');
-        }
-        
-        await this.page.waitForSelector(step.selector, {
-          state: 'visible',
-          timeout: this.options.waitForSelectorTimeout
-        });
-        
-        // Clear existing value first
-        await this.page.$eval(step.selector, el => {
-          if (el) el.value = '';
-        });
-        
-        // Type the new value
-        await this.page.type(step.selector, step.value || '', {
-          delay: 20 // Simulate realistic typing
-        });
-        break;
-        
-      case 'keypress':
-        if (step.key) {
-          await this.page.keyboard.press(step.key, {
-            delay: 20
-          });
-        }
-        break;
-        
-      case 'network_request':
-        // Just verify the request was made, no action needed
-        break;
-        
-      case 'network_response':
-        // Verify response status if expected
-        if (step.expectedStatus && step.status !== step.expectedStatus) {
-          throw new Error(`Expected status ${step.expectedStatus} but got ${step.status}`);
-        }
-        break;
-        
-      case 'custom_assert':
-        // Execute custom assertion
-        if (typeof step.assert === 'function') {
-          const result = await step.assert(this.page);
-          if (result === false) {
-            throw new Error('Custom assertion failed');
-          } else if (result && result.message) {
-            throw new Error(`Assertion failed: ${result.message}`);
-          }
-        }
-        break;
-        
-      default:
-        debug(`Skipping unsupported step type: ${step.type}`);
-        this.stats.skipped++;
-    }
-    
-    // Wait for network to be idle after each step
-    await this.waitForNetworkIdle();
-  }
-  
-  async takeScreenshot(options = {}) {
-    if (!this.page) return null;
-    
-    const defaultPath = path.join(
-      process.cwd(),
-      'screenshots',
-      `screenshot-${Date.now()}.png`
-    );
-    
-    const screenshotPath = options.path || defaultPath;
-    await fs.mkdir(path.dirname(screenshotPath), { recursive: true });
-    
-    await this.page.screenshot({
-      path: screenshotPath,
-      fullPage: options.fullPage !== false,
-      ...options
-    });
-    
-    return screenshotPath;
-  }
-  
-  async close() {
-    if (this.page) {
-      await this.page.close().catch(console.error);
-      this.page = null;
-    }
-    
-    this.state = 'idle';
-  }
-}
-
-module.exports = ReplayPlayer;
+/**
+ * Replay Player
+ * Replays recorded user interactions and verifies behavior
+ */
+
+const { EventEmitter } = require('events');
+const { performance } = require('perf_hooks');
+const fs = require('fs').promises;
+const path = require('path');
+const debug = require('debug')('vibecheck:replay:player');
+
+class ReplayPlayer extends EventEmitter {
+  constructor(options = {}) {
+    super();
+    this.options = {
+      speed: 1.0,
+      headless: true,
+      viewport: { width: 1280, height: 800 },
+      waitForNetworkIdle: true,
+      networkIdleTimeout: 500,
+      waitForSelectorTimeout: 30000,
+      ...options
+    };
+    
+    this.state = 'idle';
+    this.currentStep = 0;
+    this.stats = {
+      totalSteps: 0,
+      passed: 0,
+      failed: 0,
+      skipped: 0,
+      startTime: null,
+      endTime: null,
+      duration: 0
+    };
+    
+    this.page = null;
+    this.capsule = null;
+  }
+
+  async loadCapsule(capsulePath) {
+    this.state = 'loading';
+    
+    try {
+      // Load from file if it's a path
+      if (typeof capsulePath === 'string') {
+        const data = await fs.readFile(capsulePath, 'utf8');
+        this.capsule = JSON.parse(data);
+      } 
+      // Or use the provided capsule object
+      else if (capsulePath.metadata && Array.isArray(capsulePath.steps)) {
+        this.capsule = capsulePath;
+      } 
+      // Or load from a directory containing metadata.json and steps.json
+      else if (typeof capsulePath === 'object' && capsulePath.path) {
+        const [metadata, steps] = await Promise.all([
+          fs.readFile(path.join(capsulePath.path, 'metadata.json'), 'utf8')
+            .then(JSON.parse),
+          fs.readFile(path.join(capsulePath.path, 'steps.json'), 'utf8')
+            .then(JSON.parse)
+        ]);
+        this.capsule = { metadata, steps };
+      } else {
+        throw new Error('Invalid capsule format');
+      }
+      
+      this.stats.totalSteps = this.capsule.steps.length;
+      this.state = 'loaded';
+      this.emit('loaded', { steps: this.stats.totalSteps });
+      
+      return this.capsule;
+    } catch (error) {
+      this.state = 'error';
+      this.emit('error', { error, phase: 'load' });
+      throw error;
+    }
+  }
+
+  async setupPlaywright(browser) {
+    if (this.page) return this.page;
+    
+    try {
+      const context = await browser.newContext({
+        viewport: this.capsule.metadata.viewport || this.options.viewport,
+        userAgent: this.capsule.metadata.userAgent,
+        ignoreHTTPSErrors: true
+      });
+      
+      this.page = await context.newPage();
+      
+      // Set up request/response tracking
+      this._setupNetworkMonitoring();
+      
+      return this.page;
+    } catch (error) {
+      this.state = 'error';
+      this.emit('error', { error, phase: 'setup' });
+      throw error;
+    }
+  }
+
+  _setupNetworkMonitoring() {
+    if (!this.page) return;
+    
+    this.pendingRequests = new Set();
+    
+    this.page.on('request', request => {
+      if (this.options.waitForNetworkIdle) {
+        this.pendingRequests.add(request);
+      }
+    });
+    
+    this.page.on('requestfinished', request => {
+      this.pendingRequests.delete(request);
+    });
+    
+    this.page.on('requestfailed', request => {
+      this.pendingRequests.delete(request);
+    });
+  }
+
+  async waitForNetworkIdle() {
+    if (!this.options.waitForNetworkIdle || !this.page) return;
+    
+    const start = performance.now();
+    let hasPending = false;
+    
+    do {
+      hasPending = this.pendingRequests.size > 0;
+      
+      if (hasPending) {
+        await new Promise(r => setTimeout(r, 50));
+      }
+      
+      if (performance.now() - start > this.options.networkIdleTimeout) {
+        debug(`Network idle timeout after ${this.options.networkIdleTimeout}ms`);
+        break;
+      }
+    } while (hasPending);
+  }
+
+  async play() {
+    if (this.state !== 'loaded') {
+      throw new Error('No capsule loaded. Call loadCapsule() first.');
+    }
+    
+    this.state = 'playing';
+    this.currentStep = 0;
+    this.stats.startTime = performance.now();
+    this.stats.passed = 0;
+    this.stats.failed = 0;
+    this.stats.skipped = 0;
+    
+    this.emit('start', { steps: this.stats.totalSteps });
+    
+    try {
+      for (const step of this.capsule.steps) {
+        this.currentStep++;
+        this.emit('stepStart', { step: this.currentStep, total: this.stats.totalSteps, type: step.type });
+        
+        try {
+          await this._executeStep(step);
+          this.stats.passed++;
+          this.emit('stepPass', { 
+            step: this.currentStep, 
+            type: step.type,
+            duration: performance.now() - (step.timestamp || 0)
+          });
+        } catch (error) {
+          this.stats.failed++;
+          this.emit('stepFail', { 
+            step: this.currentStep, 
+            type: step.type,
+            error,
+            duration: performance.now() - (step.timestamp || 0)
+          });
+          
+          if (this.options.stopOnFailure) {
+            throw error;
+          }
+        }
+        
+        // Apply speed factor to timing
+        if (this.currentStep < this.capsule.steps.length - 1) {
+          const nextStep = this.capsule.steps[this.currentStep];
+          const currentTime = step.timestamp || 0;
+          const nextTime = nextStep.timestamp || 0;
+          const delay = (nextTime - currentTime) / this.options.speed;
+          
+          if (delay > 0) {
+            await new Promise(resolve => setTimeout(resolve, delay));
+          }
+        }
+      }
+      
+      this.stats.endTime = performance.now();
+      this.stats.duration = this.stats.endTime - this.stats.startTime;
+      this.state = 'completed';
+      
+      const result = {
+        ...this.stats,
+        success: this.stats.failed === 0,
+        capsule: this.capsule.metadata
+      };
+      
+      this.emit('complete', result);
+      return result;
+    } catch (error) {
+      this.state = 'error';
+      this.emit('error', { 
+        error, 
+        step: this.currentStep,
+        phase: 'playback'
+      });
+      throw error;
+    }
+  }
+
+  async _executeStep(step) {
+    if (!this.page) {
+      throw new Error('No page available. Call setupPlaywright() first.');
+    }
+    
+    debug(`Executing step: ${step.type}`, { step });
+    
+    switch (step.type) {
+      case 'navigation':
+        await this.page.goto(step.url, { 
+          waitUntil: 'networkidle',
+          timeout: this.options.waitForSelectorTimeout
+        });
+        break;
+        
+      case 'click':
+        if (step.selector) {
+          await this.page.waitForSelector(step.selector, {
+            state: 'visible',
+            timeout: this.options.waitForSelectorTimeout
+          });
+          await this.page.click(step.selector, {
+            button: step.button,
+            clickCount: step.clickCount || 1,
+            delay: 50
+          });
+        } else if (step.x !== undefined && step.y !== undefined) {
+          await this.page.mouse.click(step.x, step.y, {
+            button: step.button,
+            clickCount: step.clickCount || 1,
+            delay: 50
+          });
+        } else {
+          throw new Error('Click step requires either selector or x,y coordinates');
+        }
+        break;
+        
+      case 'input':
+        if (!step.selector) {
+          throw new Error('Input step requires a selector');
+        }
+        
+        await this.page.waitForSelector(step.selector, {
+          state: 'visible',
+          timeout: this.options.waitForSelectorTimeout
+        });
+        
+        // Clear existing value first
+        await this.page.$eval(step.selector, el => {
+          if (el) el.value = '';
+        });
+        
+        // Type the new value
+        await this.page.type(step.selector, step.value || '', {
+          delay: 20 // Simulate realistic typing
+        });
+        break;
+        
+      case 'keypress':
+        if (step.key) {
+          await this.page.keyboard.press(step.key, {
+            delay: 20
+          });
+        }
+        break;
+        
+      case 'network_request':
+        // Just verify the request was made, no action needed
+        break;
+        
+      case 'network_response':
+        // Verify response status if expected
+        if (step.expectedStatus && step.status !== step.expectedStatus) {
+          throw new Error(`Expected status ${step.expectedStatus} but got ${step.status}`);
+        }
+        break;
+        
+      case 'custom_assert':
+        // Execute custom assertion
+        if (typeof step.assert === 'function') {
+          const result = await step.assert(this.page);
+          if (result === false) {
+            throw new Error('Custom assertion failed');
+          } else if (result && result.message) {
+            throw new Error(`Assertion failed: ${result.message}`);
+          }
+        }
+        break;
+        
+      default:
+        debug(`Skipping unsupported step type: ${step.type}`);
+        this.stats.skipped++;
+    }
+    
+    // Wait for network to be idle after each step
+    await this.waitForNetworkIdle();
+  }
+  
+  async takeScreenshot(options = {}) {
+    if (!this.page) return null;
+    
+    const defaultPath = path.join(
+      process.cwd(),
+      'screenshots',
+      `screenshot-${Date.now()}.png`
+    );
+    
+    const screenshotPath = options.path || defaultPath;
+    await fs.mkdir(path.dirname(screenshotPath), { recursive: true });
+    
+    await this.page.screenshot({
+      path: screenshotPath,
+      fullPage: options.fullPage !== false,
+      ...options
+    });
+    
+    return screenshotPath;
+  }
+  
+  async close() {
+    if (this.page) {
+      await this.page.close().catch(console.error);
+      this.page = null;
+    }
+    
+    this.state = 'idle';
+  }
+}
+
+module.exports = ReplayPlayer;