Browserbase enables viewport and full-page screenshots using your desired browser automation framework. For optimal performance, we recommend using CDP (Chrome DevTools Protocol) sessions to capture screenshots, as this method is significantly faster than standard approaches.
Take a Screenshot
First, create a browser session and connect to it using your preferred framework. Then you can take a screenshot using CDP sessions for the 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({
projectId: process.env.BROWSERBASE_PROJECT_ID,
});
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(project_id=os.environ["BROWSERBASE_PROJECT_ID"])
browser = p.chromium.connect_over_cdp(session.connect_url)
context = browser.new_context()
page = context.new_page()
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?
Using CDP (Chrome DevTools Protocol) for taking screenshots offers several advantages:
- 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, we recommend using the CDP approach shown above rather than the standard screenshot methods. 
