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:
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);
});
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:
// 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
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:
- Performance: CDP screenshots are significantly faster than traditional methods
- Memory efficiency: Uses less memory as it directly communicates with the browser’s debugging protocol
- Quality control: Provides more control over image quality and format settings
- Reliability: More stable for full-page screenshots of complex web applications
For most use cases, the CDP approach shown above outperforms standard screenshot methods. 
