Screenshots

Browserbase supports viewport and full-page screenshots with any browser automation framework. For best performance, use CDP (Chrome DevTools Protocol) to capture screenshots; it’s significantly faster than standard approaches.

Take a screenshot

First, create a browser session and connect to it. Then take a screenshot using CDP for best performance:

Node.js

Node.js Playwright

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

(async () => {
  console.log("Starting remote browser...");
  const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY });
  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.nationalgeographic.com/");

  console.log("Taking a screenshot using CDP...");

  // Create a CDP session for faster screenshots
  const client = await defaultContext.newCDPSession(page);

  // Capture a full-page screenshot using CDP
  const { data } = await client.send("Page.captureScreenshot", {
    format: "jpeg",
    quality: 80,
    captureBeyondViewport: true,
  });

  // Convert base64 to buffer and save
  const buffer = Buffer.from(data, "base64");
  writeFileSync("screenshot.jpeg", buffer);

  console.log("Shutting down...");
  await page.close();
  await browser.close();
})().catch((error) => {
  console.error(error);
});

Python

Python Playwright

from playwright.sync_api import sync_playwright, Playwright
import os
import base64
from browserbase import Browserbase


def main(p: Playwright):
    print("Starting remote browser...")
    bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
    session = bb.sessions.create()

    browser = p.chromium.connect_over_cdp(session.connect_url)
    context = browser.contexts[0]
    page = context.pages[0]

    page.goto("https://www.nationalgeographic.com/")

    print("Taking a screenshot using CDP!")

    # Create a CDP session for faster screenshots
    client = context.new_cdp_session(page)

    # Capture a full-page screenshot using CDP
    screenshot_data = client.send(
        "Page.captureScreenshot",
        {
            "format": "jpeg",
            "quality": 80,
            "captureBeyondViewport": True,
        },
    )

    # Convert base64 to bytes and save
    image_data = base64.b64decode(screenshot_data["data"])
    with open("screenshot.jpeg", "wb") as f:
        f.write(image_data)

    print("Shutting down...")
    browser.close()


with sync_playwright() as playwright:
    main(playwright)

For a viewport-only screenshot (just what’s visible on screen) with CDP, remove captureBeyondViewport or set it to false.

CDP screenshot reference

Just the CDP screenshot code:

Node.js

Node.js Playwright

// Create CDP session
const client = await defaultContext.newCDPSession(page);

// Capture screenshot
const { data } = await client.send("Page.captureScreenshot", {
  format: "jpeg",
  quality: 80,
  captureBeyondViewport: true,
});

// Save
const buffer = Buffer.from(data, "base64");
writeFileSync("screenshot.jpeg", buffer);

Python

Python Playwright

# Create CDP session
client = context.new_cdp_session(page)

# Capture screenshot
screenshot_data = client.send(
    "Page.captureScreenshot",
    {
        "format": "jpeg",
        "quality": 80,
        "captureBeyondViewport": True,
    },
)

# Save
image_data = base64.b64decode(screenshot_data["data"])
with open("screenshot.jpeg", "wb") as f:
    f.write(image_data)

Why use CDP for screenshots?

CDP (Chrome DevTools Protocol) offers several advantages for screenshots:

1. Performance: CDP screenshots are significantly faster than traditional methods
2. Memory efficiency: Uses less memory as it directly communicates with the browser’s debugging protocol
3. Quality control: Provides more control over image quality and format settings
4. Reliability: More stable for full-page screenshots of complex web applications

For most use cases, the CDP approach shown above outperforms standard screenshot methods.

Related guides

Create PDFs

Save browser pages as PDF documents.

Session replay

Review completed browser sessions and debug failures.