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.
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:
Copy
Ask AI
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);});
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.