如何使用 puppeteer page.screenshot() 方法捕获影子根元素？

Question

我正在尝试使用 puppeteer page.screenshot 方法捕获网页的屏幕截图。但是当我看到输出屏幕截图时，它错过了页面的某些部分，即 html 中的影子根元素。 我怎样才能 也可以使用 puppeteer screenshot 方法捕获阴影根元素。我目前正在使用以下代码。示例 URL 为 https://www.buybuybaby.com/

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.setExtraHTTPHeaders({
      'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
      accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9'
    })


await page.goto("https://www.buybuybaby.com/", {    //URL with shadow root element
            waitUntil: 'networkidle2',
            timeout: 160000   
})

await page.setViewport({
    width: 1600,
    height: 20000
  })

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

await browser.close(); 

Answer 1

页面似乎在延迟加载链接/产品，试试这个很棒的answer

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.buybuybaby.com/', { waitUntil: 'load' });
    await page.setViewport({
        width: 1200,
        height: 800
    });

    const element = await page.$("#trendingProductsList"); 

    await autoScroll(page);

    await page.screenshot({
        path: 'yoursite.png',
        fullPage: true
    });

    await browser.close();
})();

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);
        });
    });
}

this is my screenshot