Capturing complete webpage screenshot in single page app using Puppeteer

Other Questions Puppeteer
1

I’m working with a single page web application that has vertical scrolling content. When I try to capture a screenshot of the entire page, I only get the portion that’s currently visible in the viewport instead of the complete page. I need to capture everything including the content that requires scrolling to see.

const browserInstance = await puppeteer.launch(launchOptions);
const webPage = await browserInstance.newPage();
await webPage.goto(targetUrl);
await webPage.screenshot({ path: 'screenshot.png', fullPage: true });
await browserInstance.close();

What am I missing to make this work properly? The fullPage option should capture everything but it seems like it’s not working as expected for my SPA.

2

This sounds like a dynamic rendering issue with your SPA. I’ve hit this before - the screenshot gets taken before the page height calculates properly. Add a wait condition to make sure everything’s loaded first. Try await webPage.waitForFunction(() => document.readyState === 'complete') or wait for specific elements that show the page is done rendering. Bump up your goto timeout too since SPAs take longer to load than static pages. The DOM height calculation runs async in SPAs, so waiting for network idle might fix it.

3

maybe your app is lazy loading stuff. try scrolling to the bottom first, then take the screenshot. use await webPage.evaluate(() => window.scrollTo(0, document.body.scrollHeight)) and give it a sec for everything to load b4 capturing.

4

SPAs are a nightmare for this - content loads all over the place and viewport calculations go haywire. I’ve hit this same problem tons of times.

The real trick is triggering all the lazy loading AND waiting for the DOM height to actually settle. Manual scrolling kinda works but it’s super unreliable with complex apps.

I just automate the whole thing now. Set up triggers for scrolling, wait for content to load, detect when the page is done, then grab everything. You can batch multiple URLs or schedule captures too.

Use this for our dashboards and client demos. Way better than guessing wait times or dealing with each edge case manually.

Latenode makes this bulletproof. Build a workflow that handles any SPA screenshot automatically.

5

Had this exact issue with a React dashboard. Turned out to be infinite scroll components that kept expanding the page height after initial render. Here’s what worked: disable JavaScript entirely before taking the screenshot. I know it sounds backwards, but use await webPage.setJavaScriptEnabled(false) after the page loads but before screenshotting. This stops any height changes from dynamic content. You might need to refresh the page after disabling JS to get the final state. Also check if your SPA has a print stylesheet messing with fullPage calculations. Some frameworks handle print media queries weird and screw up screenshot dimensions.