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

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);
});

import puppeteer from "puppeteer-core";
import fs from "fs";
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 puppeteer.connect({
    browserWSEndpoint: session.connectUrl,
  });
  const pages = await browser.pages();
  const page = 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 page.createCDPSession();

  // 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");
  fs.writeFileSync("screenshot.jpeg", buffer);

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

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)

from selenium import webdriver
from selenium.webdriver.remote.remote_connection import RemoteConnection
import os
from browserbase import Browserbase

def run():
    bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
    session = bb.sessions.create()

    # Create a custom connection with the session details
    class CustomRemoteConnection(RemoteConnection):
        def get_remote_connection_headers(self, parsed_url, keep_alive=False):
            headers = super().get_remote_connection_headers(parsed_url, keep_alive)
            headers["x-bb-api-key"] = os.environ["BROWSERBASE_API_KEY"]
            headers["session-id"] = session.id
            return headers

    custom_conn = CustomRemoteConnection(session.selenium_remote_url)
    options = webdriver.ChromeOptions()
    driver = webdriver.Remote(custom_conn, options=options)

    driver.get("https://www.nationalgeographic.com/")

    print("Taking a screenshot...")

    # Take screenshot using Selenium's built-in method
    driver.save_screenshot('screenshot.png')

    # Make sure to quit the driver so your session is ended!
    driver.quit()

run()

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

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);

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

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

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

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.