Skip to main content

​
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:
  • Node.js
  • Python
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);
});

​
Why use CDP for screenshots?

Using CDP (Chrome DevTools Protocol) for taking screenshots offers several advantages:
  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, we recommend using the CDP approach shown above rather than the standard screenshot methods.

​
PDFs

You can work with PDFs in a few ways:
  1. Generate PDFs: Create PDFs from web pages using Playwright’s page.pdf() method (shown below)
  2. Download PDFs: When a URL of a PDF is opened in the browser, the browser’s default behavior is to automatically download and store the PDF file in Browserbase’s cloud storage. See the Downloads documentation for information on how to retrieve downloaded PDFs.
  3. View PDFs in browser: If you’d like to view a PDF directly in the browser tab rather than download the PDF automatically, you can do so by turning on the enablePdfViewer property in your browser settings (shown below).

​
Generate a PDF locally

After creating and connecting to a session, here’s how to generate a PDF from a web page using Playwright:
  • Node.js
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);
});

​
Download a PDF from a URL

When you navigate to a PDF URL, Browserbase automatically downloads the PDF file and cancels the navigation. The downloaded PDF is stored in Browserbase’s cloud storage for later retrieval.
  • Node.js
  • Python
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];

  // Configure download behavior
  const client = await defaultContext.newCDPSession(page);
  await client.send("Browser.setDownloadBehavior", {
    behavior: "allow",
    downloadPath: "downloads",
    eventsEnabled: true,
  });

  // Navigate to PDF and trigger download
  console.log("Attempting to download PDF...");
  const [download] = await Promise.all([
    page.waitForEvent("download"),
    page.goto("https://constitutioncenter.org/media/files/constitution.pdf").catch(() => {
      console.log("Navigation cancelled due to download (expected behavior)");
    })
  ]);

  let downloadError = await download.failure();
  if (downloadError !== null) {
    console.log("Error happened on download:", downloadError);
    throw new Error(downloadError);
  }

  console.log("PDF download completed successfully");

  console.log("Shutting down...");
  await page.close();
  await browser.close();
})().catch((error) => {
  console.error(error);
});
After the PDF is downloaded, you can retrieve it from Browserbase’s cloud storage. See the Downloads documentation for information on how to access your downloaded files.

​
View a PDF in browser

To view a PDF in the browser tab instead of automatically downloading it, you can set the enablePdfViewer property to true as follows:
  • Node.js
  • Python
const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY });
const session = await bb.sessions.create({
  projectId: process.env.BROWSERBASE_PROJECT_ID,
  browserSettings: {
    enablePdfViewer: true,
  }
});
⌘I