节点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 = 'https://stackoverflow.com/questions/47616985/node-puppeteer-take-screenshot-full-page-spa'; 

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

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

runTest();