setInputFiles
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));
// ⭐️⭐️⭐️ 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));
Was this page helpful?