Screenshots and PDFs

Screenshots

Browserbase enables screen view and full-screen 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.

Save a screenshot locally

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://news.ycombinator.com");

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

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

  // Capture the screenshot using CDP
  const { data } = await client.send("Page.captureScreenshot", {
    format: "jpeg",
    quality: 80,
    fullpage: 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 { 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://news.ycombinator.com");

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

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

  // Capture the screenshot using CDP
  const { data } = await client.send("Page.captureScreenshot", {
    format: "jpeg",
    quality: 80,
    fullpage: 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://news.ycombinator.com/")

    print("Taking a screenshot using CDP!")

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

    # Capture the screenshot using CDP
    screenshot_data = client.send("Page.captureScreenshot", {
        "format": "jpeg",
        "quality": 80,
        "fullpage": 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)

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.

PDFs

You can work with PDFs in two ways:

Generate PDFs: Create PDFs from web pages using Playwright’s page.pdf() method (shown below)
Download PDFs: When a PDF is opened in the browser, it will be automatically downloaded and stored in Browserbase’s cloud storage. See the Downloads documentation for information on how to retrieve downloaded PDFs.

Generate a PDF locally

After creating and connecting to a session, here’s how to generate a PDF from a web page using Playwright:

Playwright
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://news.ycombinator.com");

  console.log("Generating PDF...");

  await page.pdf({
    path: "webpage.pdf",
    format: "A4",
  });

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

Playwright
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://news.ycombinator.com");

  console.log("Generating PDF...");

  await page.pdf({
    path: "webpage.pdf",
    format: "A4",
  });

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

Introduction

Fundamentals

Features

Use Cases

Guides

Integrations

Screenshots

Save a screenshot locally

Why use CDP for screenshots?

PDFs

Generate a PDF locally

Introduction

Fundamentals

Features

Use Cases

Guides

Integrations

​Screenshots

​Save a screenshot locally

​Why use CDP for screenshots?

​PDFs

​Generate a PDF locally

Screenshots

Save a screenshot locally

Why use CDP for screenshots?

PDFs

Generate a PDF locally