Playwright
Direct Upload
For Playwright, you can upload files directly from your local path. After creating and connecting to a session, follow these steps:- Make sure your file is available where you’re running your Playwright code
- Use the
setInputFilesmethod to upload the file - The file path should be relative to your current working directory
- Node.js
- Python
Playwright
Copy
Ask AI
import { chromium } from "playwright-core"; import { Browserbase } from "@browserbasehq/sdk"; (async () => { 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://browser-tests-alpha.vercel.app/api/upload-test"); const fileInput = page.locator("#fileUpload"); // logo.png is available relative to the current working directory await fileInput.setInputFiles("logo.png"); })().catch((error) => console.error(error)); Playwright
Copy
Ask AI
from playwright.sync_api import sync_playwright from browserbase import Browserbase import os bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"]) session = bb.sessions.create(project_id=os.environ["BROWSERBASE_PROJECT_ID"]) with sync_playwright() as playwright: browser = playwright.chromium.connect_over_cdp(session.connect_url) context = browser.contexts[0] page = context.pages[0] page.goto("https://browser-tests-alpha.vercel.app/api/upload-test") file_input = page.locator("#fileUpload") file_input.set_input_files("logo.png") Large Files Upload
For larger files, you can use the Session Uploads API. Follow this example:- Node.js
- Python
Copy
Ask AI
// ⭐️⭐️⭐️ IMPORTANT: Set your file name below const fileName = "YOUR_FILE_NAME.EXAMPLE"; // ⭐️⭐️⭐️ import { chromium } from "playwright-core"; import { Browserbase } from "@browserbasehq/sdk"; import * as fs from "fs"; const apiKey = process.env.BROWSERBASE_API_KEY!; const projectId = process.env.BROWSERBASE_PROJECT_ID!; async function upload() { // 1. Initialize Browserbase Client console.log("✨ Initializing Browserbase client"); const bb = new Browserbase({ apiKey }); // 2. Create Browser Session console.log("🚀 Creating new browser session"); const session = await bb.sessions.create({ projectId }); // 3. Upload file via the Uploads API console.log("⬆️ Uploading file"); try { const fileStream = fs.createReadStream(fileName); const result = await bb.sessions.uploads.create(session.id, { file: fileStream, }); console.log(`✅ Upload successful: ${JSON.stringify(result)}`); } catch (error) { console.error(`❌ Upload failed... exiting: ${error}`); return; } // 4. Connect to the Session console.log("🔗 Connecting to browser session"); const browser = await chromium.connectOverCDP(session.connectUrl); const defaultContext = browser.contexts()[0]; const page = defaultContext.pages()[0]; // 5. Get Live View link for remote debugging const liveViews = await bb.sessions.debug(session.id); console.log("🔍 Live View link:", liveViews.debuggerUrl); // 6. Use the Browser console.log("🌐 Navigating to page: upload-test"); await page.goto("https://browser-tests-alpha.vercel.app/api/upload-test", { waitUntil: "domcontentloaded", }); // Set up CDP client for additional controls const cdpSession = await defaultContext.newCDPSession(page); const root = await cdpSession.send("DOM.getDocument"); // Then find our input element const inputNode = await cdpSession.send("DOM.querySelector", { nodeId: root.root.nodeId, selector: "#fileUpload", }); // Use DOM.setFileInputFiles CDP command const remoteFilePath = `/tmp/.uploads/${fileName}`; await cdpSession.send("DOM.setFileInputFiles", { files: [remoteFilePath], nodeId: inputNode.nodeId, }); console.log("⌛ Waiting for 60 seconds: allow time for 1) file upload and 2) to see the file upload..."); await new Promise((resolve) => setTimeout(resolve, 60000)); // 7. Cleanup console.log("👋 Closing browser session"); await page.close(); await browser.close(); // 8. Session Recording Link console.log("\n" + "─".repeat(60)); console.log(` 🎥 Your session dashboard is ready https://www.browserbase.com/sessions/${session.id}`); } // Execute the main function upload().catch((error) => console.error(error)); Copy
Ask AI
# ⭐️⭐️⭐️ IMPORTANT: Set your file name below file_name = "YOUR_FILE_NAME.EXAMPLE" # ⭐️⭐️⭐️ import os from browserbase import Browserbase from playwright.sync_api import sync_playwright import time api_key = os.environ.get("BROWSERBASE_API_KEY") project_id = os.environ.get("BROWSERBASE_PROJECT_ID") def upload(playwright): # 1. Initialize Browserbase Client # ─────────────────────────────── print("✨ Initializing Browserbase client") bb = Browserbase(api_key=api_key) # 2. Create Browser Session # ─────────────────────────── print("🚀 Creating new browser session") session = bb.sessions.create(project_id=project_id) # 3. Upload file via the Uploads API: https://docs.browserbase.com/reference/api/create-session-uploads # ─────────────────────── print("⬆️ Uploading file") try: with open(file_name, 'rb') as file: result = bb.sessions.uploads.create( id=session.id, file=file ) print(f"✅ Upload successful: {result}") except Exception as e: print(f"❌ Upload failed... exiting: {str(e)}") return # 4. Connect to the Session # ─────────────────────── print("🔗 Connecting to browser session") browser = playwright.chromium.connect_over_cdp(session.connect_url) default_context = browser.contexts[0] page = default_context.pages[0] # 5. Get Live View link for remote debugging # ─────────────────────────────── live_views = bb.sessions.debug(session.id) print("🔍 Live View link:", live_views.debugger_url) # 6. Use the Browser # ───────────────────────── print("🌐 Navigating to page: upload-test") page.goto("https://browser-tests-alpha.vercel.app/api/upload-test", wait_until="domcontentloaded") # Set up CDP client for additional controls cdp_session = default_context.new_cdp_session(page) root = cdp_session.send('DOM.getDocument') # Then find our input element input_node = cdp_session.send('DOM.querySelector', { 'nodeId': root['root']['nodeId'], 'selector': '#fileUpload' }) # Use DOM.setFileInputFiles CDP command with the found nodeId and set the remote file path remote_file_path = f"/tmp/.uploads/{file_name}"; cdp_session.send('DOM.setFileInputFiles', { 'files': [remote_file_path], 'nodeId': input_node['nodeId'] }) print("⌛ Waiting for 60 seconds: allow time for 1) file upload and 2) to see the file upload...") time.sleep(60) # 7. Cleanup # ─────────────────────── print("👋 Closing browser session") page.close() browser.close() # 8. Session Recording Link # ──────────────────────────── print("\n" + "─" * 60) print(f""" 🎥 Your session dashboard is ready https://www.browserbase.com/sessions/{session.id}""") # Execute the main function if __name__ == "__main__": with sync_playwright() as playwright: upload(playwright) Session Uploads API
Learn more about the available params and response fields