TL;DR: To screenshot a website programmatically, drive a headless browser (a real Chrome running without a visible window) and call its screenshot method. Load the page, wait for it to render, then capture. The code below takes a full-page screenshot in a few lines with Playwright, and the same call works through Stagehand. The hard part is not the capture, it is getting the page to render the same way every time, which is where a cloud browser earns its keep.

You need an image of a web page and you need it from code, not from hitting the screenshot key. Maybe you are archiving what a page looked like on a given day, generating link previews, feeding a visual to a model, or checking that a deploy did not break a layout. A person taking the screenshot by hand does not scale to a thousand URLs, and it does not run on a schedule at 3am.

The capture itself is one method call. What makes it reliable is everything around that call, a real browser engine, a page that has finished loading, and an environment that renders fonts and images the same way on every run.

What does it mean to screenshot a website programmatically?

It means rendering the page in a headless browser and asking that browser for an image of what it drew. A headless browser is a full browser, the same engine that ships in Chrome, running without a visible window so your code can control it. Because it runs the real rendering pipeline, it executes JavaScript, applies CSS, loads web fonts, and paints the page exactly as a user would see it. Screenshot tools built on raw HTTP requests cannot do this, because they never render anything.

For a fuller primer on the engine underneath, see our guide on what a headless browser is.

What do you need before you start?

You need a browser automation library and a browser for it to drive. Playwright is the most common choice. Locally it can download and run its own Chromium. To run the same code against a cloud browser on Browserbase, install the SDK alongside it.

npm i playwright-core @browserbasehq/sdk

Set your Browserbase API key in the environment as BROWSERBASE_API_KEY, and you are ready to connect.

How do you take a full-page screenshot?

Create a session, connect Playwright to it, navigate to the page, and call screenshot with fullPage set to true. The fullPage flag captures the entire scrollable page, not just the part visible in the viewport.

import { chromium } from "playwright-core";
import Browserbase from "@browserbasehq/sdk";

const bb = new Browserbase({
  apiKey: process.env.BROWSERBASE_API_KEY,
});

(async () => {
  const session = await bb.sessions.create();
  const browser = await chromium.connectOverCDP(session.connectUrl);
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto("https://www.browserbase.com/", {
    waitUntil: "domcontentloaded",
  });

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

  await page.close();
  await browser.close();
})();

The waitUntil option tells Playwright how long to wait before it considers the navigation done. domcontentloaded fires when the HTML is parsed. For pages that paint late, wait on a real signal instead, covered below.

The same in Python

from playwright.sync_api import sync_playwright
from browserbase import Browserbase
import os

bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])

with sync_playwright() as playwright:
    session = bb.sessions.create()
    browser = playwright.chromium.connect_over_cdp(session.connect_url)
    context = browser.contexts[0]
    page = context.pages[0]

    page.goto("https://browserbase.com/")
    page.screenshot(full_page=True, path="screenshot.png")

    page.close()
    browser.close()

How do you screenshot with Stagehand?

If your agent is already driving the browser with Stagehand, you do not need a separate library to capture an image. The page object exposes the same screenshot method, so you can grab a frame at any point in a run.

const image = await page.screenshot({ fullPage: true });

That returns the image as a buffer you can write to disk, upload, or pass straight to a model. It is the natural way to capture visual state mid-run, right after an act or extract step.

Why do screenshots come out blank or half-rendered?

The most common failure is capturing before the page finished rendering. Modern pages load their shell first, then fill in content with JavaScript. If you screenshot the moment the HTML parses, you catch a skeleton. Wait for a real signal that the content is present, an element you know appears late, rather than a fixed sleep.

await page.goto("https://example.com", { waitUntil: "networkidle" });
await page.waitForSelector("main");
await page.screenshot({ fullPage: true, path: "screenshot.png" });

Two other culprits show up at scale. Fonts and emoji that are installed on your laptop but missing on a server render as boxes, so the image differs between environments. And sites that block automated traffic can serve a challenge page instead of the real content, so your screenshot captures the block, not the site.

Local browser vs cloud browser for screenshots

A local browser is the fastest way to capture a handful of screenshots on your own machine. It falls down when you need many, on a schedule, or from a consistent environment. Here is how the two compare on the things that break screenshot jobs.

How do you run screenshot capture at scale?

Once you need screenshots of many pages, on a schedule, or from a stable environment, the browser becomes the thing you have to operate. That is what Browserbase runs for you. The code above already points at a cloud session, so scaling from one screenshot to thousands is a matter of creating more sessions, not rebuilding your pipeline. Each session records automatically, so when a capture looks wrong you can replay exactly what the browser saw.

Last updated: August 2026.

Ready to capture screenshots at scale? Start with the Playwright quickstart and point your code at a cloud browser.