init

Author: sophie2chance2

README.md

@@ -0,0 +1,53 @@
+# Browserbase Form Fill Examples
+
+This repository contains examples of automating form submissions using Browserbase with different languages and frameworks. These examples accompany the [Browserbase documentation on automating form submissions](/automating-form-submissions).
+
+## Getting Started
+
+1. Clone this repository:
+   ```bash
+   git clone https://github.com/browserbase/example-form-fill.git
+   cd browserbase-form-fill-examples
+   ```
+
+2. Choose your preferred language/framework:
+
+   ### Python (Playwright)
+   Navigate to the Python implementation:
+   ```bash
+   cd python
+   ```
+   Follow the setup instructions in [python/README.md](python/README.md)
+
+   ### Node.js
+   Navigate to the Node.js implementation:
+   ```bash
+   cd node
+   ```
+   
+   Choose between two approaches:
+   - **Playwright**: Traditional Playwright implementation with Browserbase
+   - **Stagehand**: AI-powered automation using Browserbase's Stagehand
+
+   Both examples are in TypeScript and demonstrate form automation with different approaches.
+
+## Environment Setup
+
+Each implementation requires Browserbase credentials. Copy the appropriate `.env.example` file:
+
+```bash
+cp .env.example .env
+```
+
+Then fill in your credentials:
+- `BROWSERBASE_API_KEY`: Your Browserbase API key
+- `BROWSERBASE_PROJECT_ID`: Your Browserbase project ID
+
+## Examples Overview
+
+Each implementation demonstrates how to:
+1. Create a Browserbase session
+2. Navigate to the form
+3. Fill in form fields
+4. Submit the form
+5. View the session replay

node/.env.example

@@ -0,0 +1,4 @@
+BROWSERBASE_API_KEY=
+BROWSERBASE_PROJECT_ID=
+ANTHROPIC_API_KEY=
+OPENAI_API_KEY=

node/playwright/formFill.ts

@@ -0,0 +1,61 @@
+import { chromium } from "playwright-core";
+import Browserbase from "@browserbasehq/sdk";
+import { config } from "dotenv";
+config();
+
+async function createSession() {
+    const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY! });
+    const session = await bb.sessions.create({
+        projectId: process.env.BROWSERBASE_PROJECT_ID!,
+        // Add configuration options here
+      });
+    return session;
+}
+
+async function fillForm(inputs: any) {
+    const session = await createSession()
+    const browser = await chromium.connectOverCDP(session.connectUrl);
+
+    // Getting the default context to ensure the sessions are recorded.
+    const defaultContext = browser.contexts()[0];
+    const page = defaultContext?.pages()[0];
+
+    console.log(`View sessionreplay at https://browserbase.com/sessions/${session.id}`,);
+    // Navigate to page
+    await page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7");
+
+    // fill superpower
+    await page.locator(`[role="radio"][data-value="${inputs.superpower}"]`).click();
+    await page.waitForTimeout(1000);
+
+    // fill features_used
+    for (const feature of inputs.features_used) {
+        await page.locator(`[role="checkbox"][aria-label="${feature}"]`).click();
+    }
+    await page.waitForTimeout(1000);
+
+    // fill coolest_build
+    await page.locator('input[jsname="YPqjbf"]').fill(inputs.coolest_build);
+    await page.waitForTimeout(1000);
+
+    // click submit button
+    await page.locator('div[role="button"]:has-text("Submit")').click();
+
+    // wait 10 seconds
+    await page.waitForTimeout(10000);
+
+    console.log("Shutting down...");
+    await page.close();
+    await browser.close();
+}
+
+const inputs = {
+    "superpower": "Invisibility",
+    "features_used": [
+        "Stealth Mode",
+        "Proxies",
+        "Session Replay"
+    ],
+    "coolest_build": "A bot that automates form submissions across multiple sites.",
+}
+fillForm(inputs);

node/stagehand/formFill.ts

@@ -0,0 +1,55 @@
+import { Stagehand } from "@browserbasehq/stagehand";
+import { z } from "zod";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+async function main() {
+	const stagehand = new Stagehand({
+		env: "BROWSERBASE",
+        verbose: 0,
+	});
+
+	await stagehand.init();
+	const page = stagehand.page;
+
+	async function fillForm(inputs: any) {
+		// Navigate to the form
+		await page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7");
+
+		// You can use the observe method to find the selector with an act command to fill it in
+		const superpowerSelector = await page.observe({
+            instruction: `Find the superpower field: ${inputs.superpower}`,
+            returnAction: true
+        });
+		console.log(superpowerSelector);
+		await page.act(superpowerSelector[0]);
+
+		// You can also explicitly specify the action to take
+		await page.act({action: "Select the features used: " + inputs.features_used.join(", ")});
+		await page.act({action: "Fill in the coolest_build field with the following value: " + inputs.coolest_build});
+
+		await page.act({action: "Click the submit button"});
+		await page.waitForTimeout(5000);
+
+		// Extract to log the status of the form
+		const status = await page.extract({instruction: "Extract the status of the form", schema: z.object({status: z.string()})});
+		console.log(status);
+
+		await stagehand.close();
+	}
+
+	const inputs = {
+		"superpower": "Invisibility",
+		"features_used": [
+			"Stealth Mode",
+			"Proxies",
+			"Session Replay"
+		],
+		"coolest_build": "A bot that automates form submissions across multiple sites.",
+	}
+	
+	await fillForm(inputs);
+}
+
+main().catch(console.error);

python/.env.example

@@ -0,0 +1,2 @@
+BROWSERBASE_API_KEY=
+BROWSERBASE_PROJECT_ID=

python/README.md

@@ -0,0 +1,48 @@
+# Python Form Fill Demo
+
+This demo shows how to automate form filling using Playwright and Browserbase.
+
+## Setup
+
+1. Create and activate a virtual environment:
+
+   **Windows:**
+   ```bash
+   python -m venv venv
+   venv\Scripts\activate
+   ```
+
+   **macOS/Linux:**
+   ```bash
+   python3 -m venv venv
+   source venv/bin/activate
+   ```
+
+2. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. Set up environment variables:
+   - Copy `.env.example` to `.env`
+   - Fill in your API keys:
+     - `BROWSERBASE_API_KEY`: Your Browserbase API key
+     - `BROWSERBASE_PROJECT_ID`: Your Browserbase project ID
+
+## Running the Demo
+
+The `form_fill.py` script demonstrates automated form filling. It will:
+- Create a new Browserbase session
+- Navigate to a Google Form
+- Fill in various fields
+- Submit the form
+
+Run the script:
+```bash
+python form_fill.py
+```
+
+You can modify the input values in the `inputs` dictionary at the bottom of `form_fill.py` to change the form responses.
+
+The script will print a URL where you can view the session replay on Browserbase.
+

python/form_fill.py

@@ -0,0 +1,65 @@
+import os
+from playwright.sync_api import sync_playwright
+from browserbase import Browserbase
+from dotenv import load_dotenv
+
+load_dotenv()
+
+def create_session():
+    """Creates a Browserbase session."""
+    bb = Browserbase(api_key=os.environ["BROWSERBASE_API_KEY"])
+    session = bb.sessions.create(
+        project_id=os.environ["BROWSERBASE_PROJECT_ID"],
+        # Add configuration options here if needed
+    )
+    return session
+
+def fill_form(inputs):
+    """Automates form filling using Playwright with Browserbase."""
+    session = create_session()
+    print(f"View session at https://browserbase.com/sessions/{session.id}")
+
+    with sync_playwright() as p:
+        browser = p.chromium.connect_over_cdp(session.connect_url)
+
+        # Get the default browser context and page
+        context = browser.contexts[0]
+        page = context.pages[0]
+
+        # Navigate to the form page
+        page.goto("https://forms.gle/f4yNQqZKBFCbCr6j7")
+
+        # Select superpower
+        page.locator(f'[role="radio"][data-value="{inputs["superpower"]}"]').click()
+        page.wait_for_timeout(1000)
+
+        # Select features used
+        for feature in inputs["features_used"]:
+            page.locator(f'[role="checkbox"][aria-label="{feature}"]').click()
+        page.wait_for_timeout(1000)
+
+        # Fill in coolest build
+        page.locator('input[jsname="YPqjbf"]').fill(inputs["coolest_build"])
+        page.wait_for_timeout(1000)
+
+        # Click submit button
+        page.locator('div[role="button"]:has-text("Submit")').click()
+
+        # Wait 10 seconds
+        page.wait_for_timeout(10000)
+
+        print("Shutting down...")
+        page.close()
+        browser.close()
+
+if __name__ == "__main__":
+    inputs = {
+        "superpower": "Invisibility",
+        "features_used": [
+            "Stealth Mode",
+            "Proxies",
+            "Session Replay"
+        ],
+        "coolest_build": "A bot that automates form submissions across multiple sites.",
+    }
+    fill_form(inputs)

python/requirements.txt

@@ -0,0 +1,3 @@
+playwright==1.43.0
+python-dotenv==1.0.1
+browserbase==1.2.0