If you've ever taken a screenshot of a real-world webpage with Puppeteer, you've seen the ugly truth: cookie banners, sticky headers frozen at weird positions, collapsed FAQ accordions, and "Subscribe!" popups.

Here are four small Puppeteer helpers I use to get clean, presentable screenshots. Each is one function, drop-in ready.

1. Kill cookie banners

async function hideCookieBanners ( page , customSelectors = []) { await page . evaluate (( selectors ) => { // Known cookie-banner elements [ ' CookieReportsPanel ' , ' CookieReportsOverlay ' , ' CookieReportsBannerAZ ' ] . forEach ( id => document . getElementById ( id )?. remove ());

document . querySelectorAll ( ' [class*="wscr"],[id*="CookieReport"] ' ) . forEach ( el => el . remove ());

// Reset body scroll locks the banner often sets document . body . style . overflow = '' ; document . documentElement . style . overflow = '' ;

// User-defined selectors (if they know their site) selectors . forEach ( sel => { try { document .…