Implement high-res video capture with Puppeteer integration in test runner

lib/runner.js

@@ -186,6 +186,24 @@ async function _executeTest(url, options) {
     const optPath = path.join(reportDir, `${testId}.optimizations.json`);
     fs.writeFileSync(optPath, JSON.stringify(optimizations, null, 2));
 
+    // Capture High-Res Video (Run separate pass if needed or extraction)
+    // We already have chrome running. Let's try to capture detailed video.
+    // Note: Lighthouse has finished. We can use the browser instance for a quick video pass.
+    // But ideally we want the video of the FIRST load. 
+    // Since we can't easily hook into Lighthouse's run, we accept that we record a "Second Load" 
+    // OR we rely on this separate pass for visual record.
+    // Alternatively, if this was the only run, we use it.
+    // For now, let's run a dedicated video capture pass to guarantee quality.
+    let highResFrames = [];
+    try {
+        console.log('Starting High-Res Video Capture pass...');
+        const videoCapture = require('./video-capture');
+        // We reuse the running chrome instance
+        highResFrames = await videoCapture.captureVideo(url, chrome.port);
+    } catch (vidErr) {
+        console.error('High-res video capture failed, falling back to thumbnails:', vidErr);
+    }
+
     await chrome.kill();
     
     // Cleanup User Data Dir
@@ -195,26 +213,32 @@ async function _executeTest(url, options) {
         console.error('Failed to cleanup temp profile:', e);
     }
 
-    // Insert into Database
-    // We expect user_uuid and user_ip to be passed in options, or handle gracefully if not
-    const userUuid = options.userUuid || 'anonymous';
-    const userIp = options.userIp || '0.0.0.0';
+    // Use High-Res frames if available, otherwise fallback to Lighthouse thumbnails
+    const filmstripData = (highResFrames && highResFrames.length > 5) ? highResFrames : (lhr.audits['screenshot-thumbnails']?.details?.items || []);
 
-    const insertQuery = `
-      INSERT INTO test_results (id, url, timestamp, is_mobile, scores, metrics, user_uuid, user_ip, filmstrip)
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
-    `;
-    const values = [
-      testId,
-      summary.url,
-      summary.timestamp,
-      isMobile,
-      summary.scores,
-      summary.metrics,
-      userUuid,
-      userIp,
-      JSON.stringify(summary.filmstrip) // Ensure it's a JSON string
-    ];
+    const summary = {
+      id: testId,
+      url: lhr.finalUrl,
+      timestamp: lhr.fetchTime,
+      scores: {
+        performance: lhr.categories.performance.score * 100,
+        accessibility: lhr.categories.accessibility.score * 100,
+        bestPractices: lhr.categories['best-practices'].score * 100,
+        seo: lhr.categories.seo.score * 100,
+      },
+      metrics: {
+        lcp: lhr.audits['largest-contentful-paint'].numericValue,
+        cls: lhr.audits['cumulative-layout-shift'].numericValue,
+        tbt: lhr.audits['total-blocking-time'].numericValue,
+      },
+      userAgent: lhr.userAgent,
+      isMobile: isMobile,
+      filmstrip: filmstripData
+    };
+    
+    // Update summary file with new filmstrip
+    const jsonPath = path.join(reportDir, `${testId}.json`);
+    fs.writeFileSync(jsonPath, JSON.stringify(summary, null, 2));
 
     try {
       const db = require('../lib/db');