I’m working with a single page app that has a lot of content requiring vertical scrolling. When I try to capture a screenshot of the complete page, I only get the portion that’s currently visible in the viewport instead of the entire scrollable content.
Here’s my current code:
const browserInstance = await puppeteer.launch(launchOptions);
const newPage = await browserInstance.newPage();
await newPage.goto(targetUrl);
await newPage.screenshot({ path: 'screenshot.png', fullPage: true });
await browserInstance.close();
Even though I’m using the fullPage option set to true, it’s still not working as expected. What am I missing to capture the complete scrollable content of my SPA?
the fullpage option should work, but SPAs have some weird CSS that messes with it. check if you use height: 100vh or overflow: hidden on body/html - this can mess with puppeteer’s height calculations. also try setting a larger viewport with setViewport before taking the screenshot, fixed it for me on varios projects.
Had the same issue with a React app last year. SPAs load content dynamically, so Puppeteer grabs the screenshot before everything renders. I fixed it by adding a wait condition before capturing. Try await newPage.waitForSelector('your-bottom-element-selector') or await newPage.waitForTimeout(3000) to let the page finish loading. Also check for lazy loading - that’ll hide content until you scroll to it. If that’s the case, you’ll need to simulate scrolling first to trigger all content sections before taking the fullPage screenshot.
Had this exact issue with an Angular SPA a few months ago. The problem was dynamic height calculations - Puppeteer couldn’t figure out the real page dimensions before taking the screenshot. Fixed it by scrolling to the bottom first, then back to top: await newPage.evaluate(() => window.scrollTo(0, document.body.scrollHeight)) then await newPage.evaluate(() => window.scrollTo(0, 0)). Forces the browser to calculate the actual content height. Also watch out for infinite scroll - it’ll completely break fullPage screenshots.