Fix empty Advanced Vitals data extraction

lib/runner.js

@@ -176,8 +176,8 @@ async function _executeTest(url, options) {
       isMobile: isMobile,
       filmstrip: captureFilmstrip ? (lhr.audits['screenshot-thumbnails']?.details?.items || []) : [],
       details: {
-          lcpElement: lhr.audits['largest-contentful-paint-element']?.details?.items?.[0] || null,
+          lcpElement: lhr.audits['largest-contentful-paint-element']?.details?.items?.[0] || lhr.audits['lcp-lazy-loaded']?.details?.items?.[0] || null,
-          clsShifts: lhr.audits['layout-shifts']?.details?.items || [],
+          clsShifts: lhr.audits['layout-shifts']?.details?.items || lhr.audits['cumulative-layout-shift']?.details?.items || [],
           longTasks: lhr.audits['long-tasks']?.details?.items || []
       }
     };

scripts/debug_vitals.js

@@ -0,0 +1,33 @@
+const runner = require('../lib/runner');
+const fs = require('fs');
+const path = require('path');
+
+async function debug() {
+    console.log("Starting debug test...");
+    const url = "https://web-page-performance-test.beyondcloud.technology/";
+    
+    try {
+        // Run test
+        const result = await runner.runTest(url, { isMobile: false, captureFilmstrip: true });
+        
+        console.log("Test finished.");
+        console.log("Extracted Details:", JSON.stringify(result.metrics.details, null, 2));
+        
+        // Also let's look at the raw LHR to see where the data actually is
+        // The runner saves the report to reports/<id>.json but that's the summary.
+        // It also saves <id>.html.
+        // We need to inspect the raw LHR object inside runner.js, but since I can't easily modify runner.js logging without potentially breaking things or noisy output,
+        // I will rely on checking the result object first.
+        
+        if (!result.metrics.details || !result.metrics.details.lcpElement) {
+            console.error("❌ LCP Element is missing!");
+        } else {
+            console.log("✅ LCP Element found.");
+        }
+
+    } catch (e) {
+        console.error("Test failed:", e);
+    }
+}
+
+debug();

vitals.html

@@ -141,15 +141,22 @@
                 const tbody = document.getElementById('cls-tbody');
                 details.clsShifts.forEach(shift => {
                     const row = document.createElement('tr');
-                    // shift.node might be undefined if it's not element based or structured differently
+                    
-                    // Lighthouse CLS structure varies. usually items has `score`, `startTime`, `rects`?
+                    // Handle different Lighthouse versions / audit structures
-                    // Actually, items have `score` and `affectedWindows`.
+                    // Sometimes it's shift.score, sometimes it's inside an object.
-                    // Wait, `layout-shifts` or `cumulative-layout-shift` details structure:
+                    // Usually: { score: 0.05, startTime: 1200, impactedNodes: [...] }
-                    // It lists the shifts.
+                    
-                    // Let's assume standard properties or robust fallback.
+                    const time = (shift.startTime !== undefined) ? (shift.startTime).toFixed(0) + 'ms' : '-';
-                    const time = shift.startTime ? (shift.startTime).toFixed(0) + 'ms' : '-';
+                    const score = (shift.score !== undefined) ? shift.score.toFixed(4) : (shift.value ? shift.value.toFixed(4) : '0');
-                    const score = shift.score ? shift.score.toFixed(4) : '0';
+                    
-                    const nodes = (shift.impactedNodes || []).map(n => n.node?.snippet).join('<br>') || 'Unknown';
+                    let nodes = 'Unknown';
+                    // layout-shifts audit typically uses 'items' with 'node' or 'caused shifts'
+                    // but often it's just `items` array of shifts.
+                    if (shift.impactedNodes) {
+                        nodes = shift.impactedNodes.map(n => n.node?.snippet || n.node?.selector || 'Node').join('<br>');
+                    } else if (shift.node) {
+                        nodes = shift.node.snippet || shift.node.selector || 'Node';
+                    }
                     
                     row.innerHTML = `<td>${time}</td><td>${score}</td><td>${nodes}</td>`;
                     tbody.appendChild(row);