为何Puppeteer无法加载LibreNMS仪表板小部件图表图片？

1. 强制重新加载图表图片并等待加载完成 #

LibreNMS的图表图片可能因会话缓存或加载时机问题未正确渲染，可以在登录后手动触发图片重新加载，并等待所有图片加载完成：

// 替换原脚本中截图前的代码
await page.waitForSelector('.minigraph-image');

// 重新加载所有图表图片
const graphImgs = await page.$$('.minigraph-image');
for (const img of graphImgs) {
    await img.evaluate(el => el.src = el.src);
}

// 等待所有图片加载完成
await page.waitForFunction(() => {
    const imgs = document.querySelectorAll('.minigraph-image');
    return Array.from(imgs).every(img => img.complete && img.naturalWidth > 0);
});

await page.screenshot({path: 'report.png'});

2. 关闭无头模式排查实际加载情况 #

先禁用无头模式，直接查看浏览器中的加载状态和控制台错误，确认图表请求是否正常：

// 修改launch参数
const browser = await puppeteer.launch({ headless: false });

打开开发者工具的「网络」面板，查看graph.php请求的返回状态码和响应内容，排查是否有权限验证失败、参数错误等问题。

3. 调整等待逻辑，增加图片加载缓冲 #

将原有的等待导航逻辑替换为等待图表元素+固定缓冲时间，确保图片有足够时间渲染：

await page.click('#login');
await page.waitForNavigation({ waitUntil: 'networkidle2' }); // 放宽网络等待条件
await page.waitForSelector('.minigraph-image', { visible: true });
await page.waitForTimeout(3000); // 增加3秒缓冲时间

4. 检查视口与页面重绘 #

图表可能因视口高度不足未触发渲染，尝试调大视口并触发页面重绘：

await page.setViewport({width: 1920, height: 2000}); // 调高页面高度
await page.evaluate(() => window.dispatchEvent(new Event('resize'))); // 触发重绘

内容的提问来源于stack exchange，提问作者Library Hostage