Screenshots, PDFs, Downloads, and Uploads

import { writeFileSync } from "fs";
import { chromium } from "playwright-core";

(async () => {
  console.log("Starting remote browser...")
  const browser = await chromium.connectOverCDP(
      // we connect to a Session created via the API
      `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${sessionId}`,
  );
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto("https://www.browserbase.com", {
      // let's make sure the page is fully loaded before taking the screenshot
      waitUntil: "domcontentloaded",
  });

  console.log("Taking a screenshot!")

  const buf = await page.screenshot({ fullPage: true })
  writeFileSync('screenshot.jpeg', buf)

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

import { chromium } from "playwright-core";
import { writeFileSync } from "node:fs";

async function saveDownloadsOnDisk(sessionId: string, retryForSeconds: number) {
  return new Promise<void>((resolve, reject) => {
    let pooler;
    const timeout = setTimeout(() => {
      if (pooler) {
        clearInterval(pooler);
      }
    }, retryForSeconds);
    async function fetchDownloads() {
      try {
        const response = await fetch(
          `https://api.browserbase.com/v1/sessions/${sessionId}/downloads`,
          {
            method: "GET",
            headers: {
              "x-bb-api-key": process.env.BROWSERBASE_API_KEY!,
            },
          },
        );
        const arrayBuffer = await response.arrayBuffer();
        if (arrayBuffer.byteLength > 0) {
          const buffer = Buffer.from(arrayBuffer);
          writeFileSync("downloads.zip", buffer);
          clearInterval(pooler);
          clearTimeout(timeout);
          resolve();
        }
      } catch (e) {
        clearInterval(pooler);
        clearTimeout(timeout);
        reject(e);
      }
    }
    pooler = setInterval(fetchDownloads, 2000);
  });
}

(async () => {
  // `createSession()` performs a call to the Sessions API
  const { id: sessionId } = await createSession();
  const browser = await chromium.connectOverCDP(
    // we connect to a Session created via the API
    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${sessionId}`,
  );
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  // Required to avoid playwright overriding location
  const client = await defaultContext.newCDPSession(page);
  await client.send("Browser.setDownloadBehavior", {
    behavior: "allow",
    downloadPath: "downloads",
    eventsEnabled: true,
  });

  await page.goto("https://browser-tests-alpha.vercel.app/api/download-test");

  const [download] = await Promise.all([
    page.waitForEvent("download"),
    page.locator("#download").click(),
  ]);

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

  await page.close();
  await browser.close();

  if (!downloadError) {
    // wait up to 20s to save the downloaded files locally
    await saveDownloadsOnDisk(sessionId, 20000);
  }
})().catch((error) => console.error(error.message));

import { chromium } from "playwright-core";

(async () => {
  const url = "https://browser-tests-alpha.vercel.app/api/upload-test";
  const browser = await chromium.connectOverCDP(
    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}`,
  );

  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto(url);

  const fileInput = page.locator("#fileUpload");
  // logo.png is available relative to the current working directory
  await fileInput.setInputFiles("logo.png");

  await browser.close();
})().catch((error) => console.error(error.message));

import axios from "axios";
import path from "path";
import puppeteer, { ElementHandle } from "puppeteer-core";
import fs from "fs";
import FormData from "form-data";

async function createUpload(
  sessionId: string,
  filePath: string,
): Promise<void> {
  const apiKey = process.env.BROWSERBASE_API_KEY;
  if (!apiKey) {
    console.error("Browserbase API key is not defined.");
  }

  try {
    const form = new FormData();
    form.append("file", fs.createReadStream(filePath));

    const options = {
      method: "POST",
      url: `https://api.browserbase.com/v1/sessions/${sessionId}/uploads`,
      headers: {
        "x-bb-api-key": apiKey,
        "Content-Type": "multipart/form-data",
      },
      data: form,
    };

    const response = await axios(options);
    console.log(response.data);
  } catch (error) {
    console.error(`Failed to create upload: ${error}`);
    throw error;
  }
}

(async () => {
  const session = await createSession();

  const localFilePath = path.join(process.cwd(), "logo.png");
  const remoteFilePath = "/tmp/.uploads/logo.png";

  await createUpload(session.id, localFilePath);

  const url = "https://browser-tests-alpha.vercel.app/api/upload-test";

  // Launch a browser instance
  const browser = await puppeteer.connect({
    browserWSEndpoint: `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${session.id}`,
  });

  // Create a new page
  const page = await browser.newPage();

  // Navigate to the page containing the form
  await page.goto(url);

  // Locate the file input element and upload the file
  const input = (await page.$("#fileUpload")) as ElementHandle<any>;
  await input.uploadFile(remoteFilePath);

  await browser.close();
})().catch((error) => console.error(error.message));