粘性导航栏出现在使用 Puppeteer 的全页屏幕截图中间

Question

我正在使用 Puppeteer 截取网站的全页屏幕截图，但遇到了一个问题：应保留在顶部的粘性导航栏出现在屏幕截图的中间，超出了其通常的位置。我尝试引用特定的导航栏类来尝试将其保持在适当的位置，但没有成功。迄今为止，我最好的版本是我将导航栏全部隐藏在一起，并且它没有显示在输出中，但理想情况下它会显示。

代码片段：

const puppeteer = require('puppeteer');

async function takeFullPageScreenshot(url, outputPath) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 2 });
    await page.goto(url, { waitUntil: 'networkidle2' });

    await incrementalScroll(page);

    await hideNavbar(page);

    await page.screenshot({ path: outputPath, fullPage: true });

    await browser.close();
    console.log(`Screenshot saved to ${outputPath}`);
}

async function incrementalScroll(page) {
    const scrollStep = 500;
    const scrollDelay = 100; 

    await page.evaluate(async (step, delay) => {
        const getScrollHeight = () => document.body.scrollHeight;
        let currentPosition = 0;

        while (currentPosition < getScrollHeight()) {
            window.scrollBy(0, step);
            currentPosition += step;
            await new Promise(resolve => setTimeout(resolve, delay));
        }
    }, scrollStep, scrollDelay);

    await page.evaluate(() => window.scrollTo(0, 0));
}

async function hideNavbar(page) {
    await page.evaluate(() => {
        const navbar = document.querySelector('.navbar.fixed-top');
        if (navbar) {
            navbar.style.display = 'none'; 
        }
    });
}

takeFullPageScreenshot('https://hunter-ed.com', 'hq-screenshot.png');

电流输出： 粘性导航栏在屏幕截图中的页面中间可见。

所需输出： 中间没有粘性导航栏的全页屏幕截图。导航栏应该位于顶部。

如何解决这个问题？

Answer 1

虽然不是完美的解决方案，但我设法通过强制这些元素的样式为相对样式来解决这个问题。

await page.evaluate(() => {
const style = document.createElement('style');
document.head.appendChild(style);
if (style.sheet) {
  style.sheet.insertRule(
    '*[style*="position: sticky"], *[style*="position: fixed"] { position: relative !important; }',
    0
  );
}

});