Node puppeteer截图整个页面SPA

Question

我有一个单页滚动应用程序。我正在尝试截取整个页面的屏幕截图，但它只给了我可见的部分。如何使其拍摄整个页面？

  const browser = await puppeteer.launch(options);
  const page = await browser.newPage();
  await page.goto(url);
  await page.screenshot({ path: 'page.png', fullPage: true })
  await browser.close();

Answer 1

您的代码看起来正确。你传递什么选项？

页面真的启动了吗？尝试关闭无头浏览器以检查：

const browser = await puppeteer.launch({
    headless: false
});

以下内容适合我截取整页屏幕截图：

const puppeteer = require('puppeteer');

async function run() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://yahoo.com');
  await page.screenshot({ path: 'yahooPage.png', fullPage: true });

  browser.close();
}

run();

Answer 2

实际上，这里发生的事情是您的页面可能需要一段时间才能完全加载。因此，我们必须增加超时时间。在进行屏幕截图之前，请先短暂休息500毫秒，然后再进行全屏截图。尝试下面的代码。

const puppeteer = require('puppeteer');

async function runTest() {
const browser = await puppeteer.launch({
    headless: false,
    timeout: 100000
});

const page = await browser.newPage();
const url = '/sf/ask/3333188981/';

await page.goto(url, {
    waitUntil: 'networkidle2'
});
await page.waitFor(500);

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

runTest();