update quickstart to use new sdks and remove iife

index.ts

@@ -1,65 +1,44 @@
 import { chromium } from "playwright-core";
+import Browserbase from "@browserbasehq/sdk";
 
-let sessionId: string;
+const PROJECT_ID = process.env.BROWSERBASE_PROJECT_ID;
+const API_KEY = process.env.BROWSERBASE_API_KEY;
 
-async function createSession() {
- const response = await fetch(`https://www.browserbase.com/v1/sessions`, {
- method: "POST",
- headers: {
- 'x-bb-api-key': `${process.env.BROWSERBASE_API_KEY}`,
- "Content-Type": "application/json",
- },
- body: JSON.stringify({
- projectId: process.env.BROWSERBASE_PROJECT_ID,
- }),
- });
- const json = await response.json();
- return json;
+if (!API_KEY) {
+ throw new Error("BROWSERBASE_API_KEY is not set");
 }
 
-async function retrieveDebugConnectionURL(sessionId: string) {
- const response = await fetch(
- `https://www.browserbase.com/v1/sessions/${sessionId}/debug`,
- {
- method: "GET",
- headers: {
- 'x-bb-api-key': `${process.env.BROWSERBASE_API_KEY}`,
- },
- },
- );
- const json = await response.json();
- return json.debuggerFullscreenUrl;
+if (!PROJECT_ID) {
+ throw new Error("BROWSERBASE_PROJECT_ID is not set");
 }
 
-(async () => {
- const { id } = await createSession();
- sessionId = id;
+const bb = new Browserbase({
+ apiKey: API_KEY,
+});
 
- 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];
+const session = await bb.sessions.create({
+ projectId: PROJECT_ID,
+});
+console.log(`Session created, id: ${session.id}`);
 
- await page.goto("https://www.browserbase.com", {
- // let's make sure the page is fully loaded before asking for the live debug URL
- waitUntil: "domcontentloaded",
- });
+console.log("Starting remote browser...");
+const browser = await chromium.connectOverCDP(session.connectUrl);
+const defaultContext = browser.contexts()[0];
+const page = defaultContext.pages()[0];
 
- const debugUrl = await retrieveDebugConnectionURL(sessionId);
- console.log(`Session started, live debug accessible here: ${debugUrl}.`);
+await page.goto("https://www.browserbase.com", {
+ // let's make sure the page is fully loaded before asking for the live debug URL
+ waitUntil: "domcontentloaded",
+});
 
- console.log("Taking a screenshot!")
- await page.screenshot({ fullPage: true })
+const debugUrls = await bb.sessions.debug(session.id);
+console.log(
+ `Session started, live debug accessible here: ${debugUrls.debuggerUrl}.`,
+);
 
- console.log("Shutting down...")
- await page.close();
- await browser.close();
-})().catch((error) => {
- console.log(
- `Session failed, replay is accessible here: https://www.browserbase.com/sessions/${sessionId}.`,
- );
- console.error(error.message);
-});
+console.log("Taking a screenshot!");
+await page.screenshot({ fullPage: true });
+
+console.log("Shutting down...");
+await page.close();
+await browser.close();

package.json

@@ -3,6 +3,7 @@
  "version": "0.0.1",
  "description": "A template to use Playwright with Browserbase",
  "main": "index.js",
+ "type": "module",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
@@ -18,6 +19,7 @@
  },
  "homepage": "https://github.com/browserbase/quickstart-playwright-js#readme",
  "dependencies": {
+ "@browserbasehq/sdk": "^2.0.0",
  "playwright-core": "^1.43.1"
  },
  "devDependencies": {

tsconfig.json

@@ -1,7 +1,7 @@
 {
  "compilerOptions": {
- "target": "es2016",
- "module": "commonjs",
+ "target": "es2022",
+ "module": "nodenext",
  "esModuleInterop": true,
  "forceConsistentCasingInFileNames": true,
  "strict": true,