Puppeteer中Headless与Non Headless configuration的截图不同

Question

如果我给出选项{ URL：false}，我正在尝试获得这个无头=>的屏幕截图/pdf-生成正确的屏幕截图，但在无头模式下，一些图像不会在屏幕截图中呈现(一个人可以在屏幕截图中看到try it按钮，但在无头模式下看不到图像)。

无头=> HEADLESS_PNG

非头=> NON_HEADLESS_PNG

代码是

`(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36');
    await page.setExtraHTTPHeaders({
        'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8'
    })
    await page.goto(URL, {waitUntil: 'networkidle2', timeout: 0});
    await autoScroll(page);
    await delay(10000);
    await page.screenshot({path: 'non_headless.png', fullPage: true});
    await browser.close();
})();
async function delay(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(1);
        }, ms)
    });
}
async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;
                if(totalHeight >= scrollHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}`

如能在无头模式下获得相同的屏幕截图，将不胜感激。

Answer 1

您可以尝试将等待时间增加几秒(如果图像未在屏幕截图之前加载)或设置视口：

await page.setViewport({ width: yourWidth, height: yourHeight });