Puppeteer screenshots: full page, elements and mobile

npm install puppeteer
npx puppeteer browsers install   # downloads Chrome for Testing if the install didn't

// screenshot.mjs
import puppeteer from "puppeteer";

const browser = await puppeteer.launch();
try {
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto("https://example.com", { waitUntil: "networkidle2" });
  await page.screenshot({ path: "example.png" });
  await page.screenshot({ path: "example-full.png", fullPage: true });
} finally {
  await browser.close();
}

// full-page.mjs
import puppeteer from "puppeteer";

const browser = await puppeteer.launch();
try {
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto("https://example.com", { waitUntil: "networkidle2" });

  // Scroll one screen at a time so lazy images start loading, then back to the top
  await page.evaluate(async () => {
    for (let y = 0; y < document.body.scrollHeight; y += window.innerHeight) {
      window.scrollTo(0, y);
      await new Promise((resolve) => setTimeout(resolve, 100));
    }
    window.scrollTo(0, 0);
  });
  await page.waitForFunction(() => [...document.images].every((img) => img.complete));
  await page.evaluate(() => document.fonts.ready); // web fonts, not fallback fonts

  // Hide what should not be in the picture
  await page.addStyleTag({
    content: "#cookie-banner, .chat-launcher { display: none !important; }",
  });

  await page.screenshot({ path: "full.png", fullPage: true });
} finally {
  await browser.close();
}

await page.screenshot({ path: "page.jpg", type: "jpeg", quality: 80 });
await page.screenshot({ path: "page.webp", type: "webp", quality: 80 });
await page.screenshot({ path: "top.png", clip: { x: 0, y: 0, width: 1280, height: 400 } });
await page.screenshot({ path: "transparent.png", omitBackground: true });
const png = await page.screenshot(); // a Uint8Array, for uploading instead of saving
const base64 = await page.screenshot({ encoding: "base64" }); // for a data: URL or JSON

await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 2 });
await page.screenshot({ path: "retina.png" }); // 2560 × 1600 pixels

const pricing = await page.waitForSelector("#pricing");
await pricing.screenshot({ path: "pricing.png" });

// mobile.mjs
import puppeteer, { KnownDevices } from "puppeteer";

const browser = await puppeteer.launch();
try {
  const page = await browser.newPage();
  await page.emulate(KnownDevices["iPhone 15 Pro"]); // viewport, scale factor, touch, user agent
  await page.goto("https://example.com", { waitUntil: "networkidle2" });
  await page.screenshot({ path: "iphone-15-pro.png" });

  await page.emulateMediaFeatures([{ name: "prefers-color-scheme", value: "dark" }]);
  await page.screenshot({ path: "iphone-15-pro-dark.png" });
} finally {
  await browser.close();
}

// screenshot-service.mjs — one browser, a new page per request, at most 4 at a time
import http from "node:http";
import puppeteer from "puppeteer";

const browser = await puppeteer.launch();
const MAX_PAGES = 4;
let open = 0;

async function screenshot(url) {
  const page = await browser.newPage();
  try {
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto(url, { waitUntil: "networkidle2", timeout: 30_000 });
    return await page.screenshot({ type: "png" });
  } finally {
    await page.close(); // always, or every failed page keeps its memory
  }
}

http
  .createServer(async (req, res) => {
    const target = new URL(req.url, "http://localhost").searchParams.get("url");
    if (!target?.startsWith("https://")) return res.writeHead(400).end("url must be https://");
    if (open >= MAX_PAGES) return res.writeHead(503, { "Retry-After": "1" }).end("busy");
    open++;
    try {
      const png = await screenshot(target);
      res.writeHead(200, { "Content-Type": "image/png" }).end(png);
    } catch (err) {
      res.writeHead(502).end(String(err.message));
    } finally {
      open--;
    }
  })
  .listen(8080);

curl -G https://api.screenshotbase.com/v1/take \
  -H "apikey: $SCREENSHOTBASE_KEY" \
  --data-urlencode "url=https://example.com" \
  -d full_page=1 \
  -d dark_mode=1 \
  -d block_cookie_banners=1 \
  -o example.png

// api-screenshot.mjs — no browser on your side
import { writeFile } from "node:fs/promises";

const params = new URLSearchParams({
  url: "https://example.com",
  full_page: "1", // scrolls first, so lazy images load
  viewport_width: "1280",
  block_cookie_banners: "1",
  format: "webp",
});
const res = await fetch(`https://api.screenshotbase.com/v1/take?${params}`, {
  headers: { apikey: process.env.SCREENSHOTBASE_KEY },
  signal: AbortSignal.timeout(120_000), // a render may take up to 110 seconds
});
if (!res.ok) {
  const body = await res.json().catch(() => ({}));
  throw new Error(`screenshotbase ${res.status} ${body.error?.code}: ${body.message}`);
}
await writeFile("example.webp", Buffer.from(await res.arrayBuffer()));