Overview Browserbase provides a consistent, isolated environment for running automated tests. This ensures:
Predictable test execution with fewer flaky tests
Built-in recording and debugging features
Ability to scale testing across concurrent sessions
Adjust browser settings to match your testing needs (viewport, geolocation, etc.)
Login Test Example Let’s create a simple test to validate a login flow using Browserbase with different frameworks.
Follow Along: Web Scraping Example Step-by-step code for web scraping
Code Example import { Stagehand } from "@browserbasehq/stagehand" ; import { z } from "zod" ; import dotenv from "dotenv" ; async function main () { dotenv . config (); // initialize stagehand const stagehand = new Stagehand ({ env: "BROWSERBASE" , }); await stagehand . init (); const page = stagehand . page ; async function automatedLoginTest ( inputs : any ) { // Navigate to the form await page . goto ( "https://www.saucedemo.com/" ); await page . act ( `Input Username: ${ inputs . username } ` ); await page . act ( `Input Password: ${ inputs . password } ` ); await page . act ( "Click Login Button" ); // take a screenshot of the page await page . screenshot ({ path: "login_screenshot.png" }); // log the url return page . url (); } const response = await automatedLoginTest ({ username: "standard_user" , password: "secret_sauce" , }); console . log ( response ); // close the stagehand session await stagehand . close (); } main (). catch ( console . error );
import { Stagehand } from "@browserbasehq/stagehand" ; import { z } from "zod" ; import dotenv from "dotenv" ; async function main () { dotenv . config (); // initialize stagehand const stagehand = new Stagehand ({ env: "BROWSERBASE" , }); await stagehand . init (); const page = stagehand . page ; async function automatedLoginTest ( inputs : any ) { // Navigate to the form await page . goto ( "https://www.saucedemo.com/" ); await page . act ( `Input Username: ${ inputs . username } ` ); await page . act ( `Input Password: ${ inputs . password } ` ); await page . act ( "Click Login Button" ); // take a screenshot of the page await page . screenshot ({ path: "login_screenshot.png" }); // log the url return page . url (); } const response = await automatedLoginTest ({ username: "standard_user" , password: "secret_sauce" , }); console . log ( response ); // close the stagehand session await stagehand . close (); } main (). catch ( console . error );
import os from playwright.async_api import async_playwright from browserbase import Browserbase from dotenv import load_dotenv import asyncio load_dotenv() async 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 async def automated_login_test ( page , inputs ): """Automates login test, takes a screenshot, and returns the final URL.""" await page.goto(inputs[ "url" ]) await page.locator( 'input[data-test="username"]' ).fill(inputs[ "username" ]) await page.locator( 'input[data-test="password"]' ).fill(inputs[ "password" ]) await page.locator( 'input[data-test="login-button"]' ).click() # Take a screenshot await page.screenshot( path = "login_screenshot.png" ) return page.url async def main (): async with async_playwright() as p: session = await create_session() print ( f "View session replay at https://browserbase.com/sessions/ { session.id } " ) browser = await p.chromium.connect_over_cdp(session.connectUrl) # Get the first context & page to ensure session recording context = browser.contexts[ 0 ] page = context.pages[ 0 ] # Run login automation login_response = await automated_login_test(page, { "url" : "https://www.saucedemo.com/" , "username" : "standard_user" , "password" : "secret_sauce" , }) print ( f "Final URL after login: { login_response } " ) # Take a screenshot of the page await page.screenshot( path = "login_screenshot.png" ) # Add a wait for 5 seconds await asyncio.sleep( 5 ) print ( "Shutting down..." ) await page.close() await browser.close() if __name__ == "__main__" : asyncio.run(main()) Configuration Options Set up a Consistent Environment Test in a predictable environment with the same Chrome version every time.
// Create a standardized session const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , // Optional: Configure viewport size (desktop, mobile) browserSettings: { viewport: { width: 1280 , height: 720 } } }); // Create a standardized session const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , // Optional: Configure viewport size (desktop, mobile) browserSettings: { viewport: { width: 1280 , height: 720 } } }); # Create a standardized session session = bb.sessions.create( project_id = os.environ[ "BROWSERBASE_PROJECT_ID" ], # Optional: Configure viewport size (desktop, mobile) browser_settings = { "viewport" : { "width" : 1280 , "height" : 720 } } ) Test from Different Locations Test how your application behaves from different geographic locations:
// Create a session with proxy support const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , proxies: [ { type: "browserbase" , geolocation: { city: "New York" , state: "NY" , country: "US" } } ] }); // Create a session with proxy support const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , proxies: [ { type: "browserbase" , geolocation: { city: "New York" , state: "NY" , country: "US" } } ] }); # Create a session with proxy support session = bb.sessions.create( project_id = os.environ[ "BROWSERBASE_PROJECT_ID" ], proxies = [ { "type" : "browserbase" , "geolocation" : { "city" : "New York" , "state" : "NY" , "country" : "US" } } ] ) Complete Configuration Options Set the viewport, operating system, and full list of configuration options to customize your test environment.
Best Practices Record Sessions Every test session is automatically recorded and available in the Browserbase dashboard. With Session Replay , you can watch the exact test execution to debug failures efficiently.
console . log ( `View session replay at https://browserbase.com/sessions/ ${ session . id } ` ); console . log ( `View session replay at https://browserbase.com/sessions/ ${ session . id } ` ); print ( f "View session replay at https://browserbase.com/sessions/ { session.id } " ) No extra setup required —session recording happens automatically, allowing
you to diagnose flaky tests and failures with ease.
Add metadata for easier organization:
const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , userMetadata: { testName: "login_flow" , suite: "authentication" } }); const session = await bb . sessions . create ({ projectId: process . env . BROWSERBASE_PROJECT_ID , userMetadata: { testName: "login_flow" , suite: "authentication" } }); session = bb.sessions.create( project_id = os.environ[ "BROWSERBASE_PROJECT_ID" ], user_metadata = { "testName" : "login_flow" , "suite" : "authentication" } ) Capture Screenshots Capture screenshots at critical points for easier debugging.
// Take a screenshot await page . screenshot ({ path: "login_screenshot.png" }); // Take a screenshot await page . screenshot ({ path: "login_screenshot.png" }); # Take a screenshot await page.screenshot( path = "login_screenshot.png" ) Next Steps Now that you understand the basics of automated testing with Browserbase, here are some features to explore next:
