dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix empty Advanced Vitals data extraction

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-29 12:25:43 +11:00
parent 65383788b1
commit ae92d4769a
3 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
lib/runner.js
View File

@@ -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,
clsShifts: lhr.audits['layout-shifts']?.details?.items || [],
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 || lhr.audits['cumulative-layout-shift']?.details?.items || [],
longTasks: lhr.audits['long-tasks']?.details?.items || []
}
};

33
scripts/debug_vitals.js Normal file
View File

@@ -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();

25
vitals.html
View File

@@ -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`?
// Actually, items have `score` and `affectedWindows`.
// Wait, `layout-shifts` or `cumulative-layout-shift` details structure:
// It lists the shifts.
// Let's assume standard properties or robust fallback.
const time = shift.startTime ? (shift.startTime).toFixed(0) + 'ms' : '-';
const score = shift.score ? shift.score.toFixed(4) : '0';
const nodes = (shift.impactedNodes || []).map(n => n.node?.snippet).join('<br>') || 'Unknown';
// Handle different Lighthouse versions / audit structures
// Sometimes it's shift.score, sometimes it's inside an object.
// Usually: { score: 0.05, startTime: 1200, impactedNodes: [...] }
const time = (shift.startTime !== undefined) ? (shift.startTime).toFixed(0) + 'ms' : '-';
const score = (shift.score !== undefined) ? shift.score.toFixed(4) : (shift.value ? shift.value.toFixed(4) : '0');
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);