How to Screenshot Single-Page Applications (React, Vue, Angular) with an API

How to Screenshot Single-Page Applications (React, Vue, Angular) with an API You're trying to screenshot a React app. Puppeteer launches. The page renders. You get a blank screenshot because the lazy-loaded content hasn't loaded yet. This is the SPA screenshot problem. SPAs are everywhere (React, Vue, Angular, Svelte). But they break traditional screenshot tools because the content is rendered by JavaScript, not HTML. The Problem: Puppeteer Can't Wait Long Enough Typical Puppeteer approach to screenshot an SPA: const puppeteer = require ( ' puppeteer ' ); ( async () => { const browser = await puppeteer . launch (); const page = await browser . newPage (); await page . goto ( ' https://example.com/dashboard ' ); // Wait for initial render await page . waitForTimeout ( 3000 ); // But lazy-loaded content still isn't visible await page . screenshot ({ path : ' screenshot.png ' }); await browser . close (); })(); Issues: You don't know how long to wait. Is 3 seconds enough? 10? Lazy-loaded