Browser Bro

📖 Shorthand Scripting Reference Manual

Table of Contents

What is it? – Overview & purpose
The Delimiter – Using the | character
Browser Array Targeting – Target specific browsers
Variables – Using ~variables
DOM References – Element targeting methods
Comments – Using // syntax
Format – Command structure
Tips & Best Practices – DO’s and DON’Ts
Custom Shorthand – Reusable snippets

The Commands

AssertVisible – Verify element visibility
Ask – Prompt user for input
Click – Mouse click on element
Focus – Set focus on element
Get – Retrieve DOM element value
Go – Navigate URLs/history
Js – Execute JavaScript code
Loop – Create command loops
Press – Keyboard key presses
Reload – Refresh webpage
Scroll – Scroll page/to element
Select – Choose dropdown option
Set – Assign variable values
Shell – Run shell commands
Snapshot – Take screenshots
Type – Type text into element
Wait – Add delays/pauses
Zoom – Zoom In or Out
SmoothZoom – Zoom with Animation
Custom – Run saved JS snippet

What is it?

The Browser Bro Shorthand Language is a simple, human-friendly scripting language designed to automate common tasks in a browser, such as clicking buttons, typing into fields or forms, scrolling, navigating, and more. Each instruction is on its own line, and the browser executes these lines in sequence. It is intended to create deterministic workflows on webpages. Its power is designed for automating tedious, laborious, exact, and predetermined tasks in the browser.

The Delimiter

Each command line is divided into parts (the command and its parameters) using the pipe character |. We chose | because it’s not commonly used in HTML attributes or content, making it easy to visually separate each piece of the command and keep things clear. 
command|parameter1|parameter2|...

Browser Array Targeting

You can target specific browsers in the Browser Bro Array by prefixing your command with the number. If no number is specified, the command executes in the Scripting Output Browser. 
// Execute in browser instance 1
1|Click|ID|submitButton

// Execute in browser instance 2  
2|Type|ID|username|John

// Execute in default instance
Click|ID|loginButton

Variables

Variables allow you to store and reuse information throughout your script. They are always referenced using a tilde (~) before the variable name. For example, ~myVar refers to a variable named myVar. You can set a variable to a fixed value, load its content from a file, or get it from the text editor. Once set, you can reference that variable in commands later in the script.
Example: 
// Set a variable to a fixed string:
set|~myVar|Hello World

// Use that variable in a Type command:
Type|ID|usernameField|~myVar

// Set a variable from a file:
set|~myFileVar|file|path/to/file.txt

// Set a variable from text editor:
set|~editorContent|text editor

// Get a value from the page and store in variable:
get|ID|emailField|~userEmail

Referencing Elements in the DOM

In order to do something on a page, we need a way to reference the controls on it. The shorthand language supports multiple ways of referencing elements:
  1. ID: By element id
  2. name: By name attribute
  3. class: By CSS class name
  4. aria: By aria-label attribute
  5. xpath: By XPath selector
  6. css: By generic CSS selector
  7. text: By visible text content
  8. placeholder: By placeholder attribute
  9. data: By data attributes (e.g. data-testid)
NOTE: Using the Type command, you may need to add “.innerhtml” to the reference type to set HTML content instead of input values.

Comments

If you need to add notes or temporarily disable certain instructions, start a line with //. 
// This line is a comment and won't be executed

Format

Each command line follows this pattern: 
command|param1|param2|...
Remember to use Wait between actions to avoid performing tasks too rapidly and risking bans or blocks from websites.

Custom Shorthand Commands

Extend Shorthand with reusable JavaScript snippets. Define snippets once in Browser Bro, use them anywhere with a single line.
custom|[snippetName]|[arg1]|[arg2]|...
  • Placeholders: Inside a saved snippet, use <<<BBSH_1>>>, <<<BBSH_2>>>, … to mark insertion points. Arguments map by position.
  • Variables: Arguments can reference variables with ~ (e.g., ~user).
Example: 
// Saved snippet contains: document.querySelector('input[name="q"]').value = "<<<BBSH_1>>>";
custom|search|Selenium tips

set|~user|alice@example.com
set|~pwd|s3cret
custom|loginWith|~user|~pwd
Available in PRO, ADVANCED, and MASTER license tiers.

Commands Reference

Below is the comprehensive documentation for all available commands in the Browser Bro Shorthand Language.

AssertVisible
Purpose: Validates that an element is present and visible on the screen. It operates in two modes: Assertion (Hard Stop) or Check (Variable Storage).
AssertVisible|[selector]|[value]|[Label OR ~Variable]
Modes:
  • Hard Stop (Label): If the last parameter is a string (e.g., “Check Login”), the script stops immediately if the element is not visible. An AssertTriggered message is sent to the engine.
  • Soft Check (~Variable): If the last parameter is a variable (e.g., ~result), the script continues. The variable is updated with "true" (success) or an error message (failure).
Selector Type Syntax
By ID AssertVisible|ID|myID|Label
By name AssertVisible|name|myName|~status
By class AssertVisible|class|myClass|Label
By Text AssertVisible|text|Content|Label
By XPath AssertVisible|xpath|//div|~var
Examples: 
// 1. Hard Stop: Ensure login succeeded before continuing
Click|ID|login_btn
Wait|2
AssertVisible|ID|user_dashboard|Login Validation Failed

// 2. Hard Stop: Verify specific text appeared
AssertVisible|text|"Order Confirmed"|Order Confirmation Check

// 3. Soft Check: Check for an optional popup (script continues)
AssertVisible|class|promo-popup|~hasPopup
// (Later custom JS can check if ~hasPopup is "true")
Ask
Purpose: Display a dialog box to prompt the user for input and store the response in a variable
ask|[prompt message]|~variableName
ask|Please enter your username|~username
ask|What is your age?|~userAge
ask|Enter search term|~searchQuery
Click
Purpose: Simulate a mouse click on an element using various selector methods.
Click|[reference_type]|[reference_value]
Selector Type Syntax
By ID Click|ID|elementID
By name Click|name|elementName
By class Click|class|elementClass
By aria Click|aria|ariaLabel
By XPath Click|xpath|//tag[@attr='val']
By CSS Click|css|div > .btn
By Text Click|text|Button Text
By Placeholder Click|placeholder|Enter Search
By Data Attr Click|data|testid=submit-btn 
Click|ID|submitButton
Click|class|btn-primary
Click|xpath|//button[contains(text(),'Submit')]
Click|css|.container > button.active
Click|text|Add to Cart
Click|data|testid=submit-order
Click|placeholder|Click to search
Focus
Purpose: Set the focus on an element so it becomes active.
Focus|[reference_type]|[reference_value]
Selector Type Syntax
By ID Focus|ID|elementID
By name Focus|name|elementName
By class Focus|class|elementClass
By aria Focus|aria|ariaLabel
By XPath Focus|xpath|//input[@type='text']
By CSS Focus|css|#form > input.email 
Focus|ID|usernameField
Focus|xpath|//div[@id='modal']//input
Focus|css|.login-form input[type='password']
Focus|aria|Email Address
Get
Purpose: Retrieve the value (or text content) from a DOM element and store it in a variable.
get|[reference_type]|[reference_value]|~variableName
Selector Type Syntax
By ID get|ID|elementID|~var
By name get|name|elementName|~var
By class get|class|elementClass|~var
By aria get|aria|ariaLabel|~var
By XPath get|xpath|//tag[@id='val']|~var
By CSS get|css|.price > span|~var
By Data Attr get|data|key=val|~var 
get|ID|emailField|~userEmail
get|xpath|//div[@class='total']|~totalPrice
get|css|span.username|~currentUser
get|data|testid=product-id|~pid
Go
Purpose: Navigate through browser history, load a new URL with optional parameters, or navigate to the Browser Bro Array with optional layout configuration.
  • Go|Array – Navigate to the Browser Bro Array view
  • Go|Array|[layout] – Navigate to Array with specific layout (e.g., 2×2, 1×3, 4×1)
  • Go|Forward – Go forward in history
  • Go|Back – Go back in history
  • Go|[URL] – Navigate to URL
  • Go|[URL]|param|key1|value1|key2|value2 – URL with query parameters
  • Go|[URL]|path|segment1|segment2 – URL with path segments
Array Layout Options: Specify browser array layouts from 1×1 (minimum) to 4×4 (maximum). Format is [columns]x[rows].
Go|Array
Go|Array|2x2
Go|Array|1x2
Go|Array|3x1
Go|Array|4x4
Go|https://www.example.com
Go|Forward
Go|Back
Go|https://api.example.com|param|apiKey|~myKey|format|json
Go|https://example.com|path|users|~userId|profile
Note: Array layouts support configurations from 1×1 up to 4×4. Examples: 1×1, 1×4, 2×2, 3×2, 4×1, 4×4, etc.
Js
Purpose: Execute raw JavaScript code.
js|[JavaScript code]
js|console.log('Hello world!')
js|document.title = 'New Title'
js|alert('Script executed successfully!')
Loop
Purpose: Create loops to repeat commands. Must be closed with loop|end.
  • loop|[number] – Loop a specific number of times
  • loop|each line|~sourceVar|~currentLineVar – Loop through lines
  • loop|end – End the loop
// Loop 5 times
loop|5
Click|ID|likeButton
Wait|1|Seconds
loop|end

// Loop through each line
set|~names|file|names.txt
loop|each line|~names|~currentName
Type|ID|nameField|~currentName
Click|ID|submitBtn
Wait|2|Seconds
loop|end

// Loop through items
loop|each item|~itemList|~currentItem
js|console.log('Processing item: ~currentItem');
loop|end
Press
Purpose: Simulate keyboard key presses on a specific element. Supports special keys and single characters.
Press|[reference_type]|[reference_value]|[key]
Supported special keys: Enter, Escape, Space, Tab, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Backspace, Delete
Press|ID|searchField|Enter
Press|class|text-input|Escape
Press|name|username|a
Press|aria|Message Box|Space
Press|ID|textArea|Backspace
Reload
Purpose: Refresh the current webpage.
Reload
Reload
Scroll
Purpose: Scroll the page up or down by pixels, or scroll to a specific element using CSS-style selectors.
  • Scroll|Down|[pixels] – Scroll down by pixels
  • Scroll|Up|[pixels] – Scroll up by pixels
  • Scroll|#elementId – Scroll to element by ID
  • Scroll|.elementClass – Scroll to element by class
  • Scroll|[pixels] – Default down scrolling
Scroll|Down|500
Scroll|Up|300
Scroll|#header-section
Scroll|.footer-content
Scroll|400  // Default down scrolling
Select
Purpose: Choose an option from a dropdown select element.
Select|[reference_type]|[reference_value]|optionValue
Selector Type Syntax
By ID Select|ID|elementID|option
By name Select|name|elementName|option
By class Select|class|elementClass|option
By aria Select|aria|ariaLabel|option
By XPath Select|xpath|//select[@id='s']|option
By CSS Select|css|.filters select|option 
Select|ID|countryDropdown|US
Select|name|languageSelector|fr
Select|class|form-select|option2
Select|aria|Choose State|CA
Select|xpath|//select[@name='state']|TX
Select|css|#filter-bar select|Newest
Set
Purpose: Assign a value to a variable, load content from a file into a variable, or set the variable to the content of the Browser Bro text editor
set|~variableName|value or set|~variableName|file|path/to/file.txt or set|~variableName|text editor
set|~greeting|Hello there!
set|~config|file|config.txt
set|~prompts|text editor
Shell
Purpose: Run a local shell command (synchronous execution) with support for different shell types and visibility options
  • shell|[command] – Use default shell (hidden)
  • shell|visible|[command] – Use default shell (visible window)
  • shell|hidden|[command] – Use default shell (explicitly hidden)
  • shell|powershell|[command] – Use PowerShell (hidden)
  • shell|powershell|visible|[command] – Use PowerShell (visible window)
// Default shell (hidden)
shell|ls -la
shell|mkdir new_folder

// Visible shell windows
shell|visible|dir
shell|powershell|visible|Get-Process

// PowerShell with specific visibility
shell|powershell|hidden|New-Item -ItemType Directory -Path "C:\TestFolder"
shell|powershell|visible|Get-ChildItem | Where-Object {$_.Length -gt 1MB}
Note: Both shell type and visibility are optional parameters. Default behavior is hidden execution with the system default shell.
Snapshot
Purpose: Take a screenshot of the current browser view. You can choose from several capture engines depending on your needs (speed, accuracy, or specific content types).
  • Snapshot|[method] – Basic snapshot
  • Snapshot|[method]|[scrollAmount] – Scroll down before capturing (optional)
  • Snapshot|[method]|[scrollAmount]|[scrollTarget] – Scroll to specific target first (optional)
Available Methods:
Method Scope Description & Best Use
visible Viewport Default. Captures exactly what is currently visible in the browser window. Fast and reliable for most standard web pages.
screen area Viewport 1:1 Fidelity. Takes a native OS screenshot of the screen coordinates where the browser sits. Note: Requires the browser window to be visible and focused. Best for capturing video, WebGL, or plugins.
snapdom Full Page Modern Standard. Uses the advanced SnapDOM engine. Excellent support for Shadow DOM, modern CSS, and pseudo-elements. Renders the full scrollable page.
snapdom-visible Viewport Same engine as snapdom but captures only the visible viewport area.
bbsnapshot Full Page Clean Capture. Aggressively cleans the DOM before capture—removes scrollbars, fixed overlays, and popups to produce a clean “document” style image.
html2canvas Full Page Legacy engine. Good for compatibility with older sites, but may struggle with modern CSS features like Flexbox or Grid.
canvas Element Automatically finds the largest HTML5 <canvas> element on the page and saves it as an image. Ideal for saving charts, graphs, or game frames. 
// Standard viewport capture
Snapshot|visible

// Full page capture with modern engine
Snapshot|snapdom

// Clean document capture (removes ads/overlays)
Snapshot|bbsnapshot

// Perfect fidelity (requires window focus)
Snapshot|screen area

// Scroll 500px then capture full page
Snapshot|snapdom|500

// Scroll to specific element then capture
Snapshot|visible|0|#pricing-table
File Location: Snapshots are saved in your “… Documents/My BrowserBro Files/snapshots” folder.
Type
Purpose: Type text into an element using various selector methods. You can also reference variables (e.g., ~myVar).
On some pages you may need to add “.innerhtml” to the reference type to set HTML content instead of input values.
Selector Type Syntax
By ID Type|ID|elementID|textOr~var
By name Type|name|elementName|textOr~var
By class Type|class|elementClass|textOr~var
By aria Type|aria|ariaLabel|textOr~var
By XPath Type|xpath|//input[@name='q']|text
By CSS Type|css|#login form input|text
By Placeholder Type|placeholder|Enter Username|text
Set innerHTML Type|ID.innerhtml|elementID|htmlContent 
Type|ID|usernameField|TestUser
Type|name|passwordField|~myVar   // Using a variable
Type|aria|Search|Find this text
Type|xpath|//input[@type='email']|user@test.com
Type|css|.form-control.first-name|John
Type|placeholder|Your Email Address|me@domain.com
Type|ID.innerhtml|contentDiv|<h1>Hello World</h1>
Wait
Purpose: Pause the script execution for a specified time. Use this to let pages load and avoid hitting servers too quickly.
  • Wait|[Number] – Wait for seconds (default)
  • Wait|[Number]|Seconds/Minutes/Hours
  • Wait|[min,max]|Seconds/Minutes/Hours – Random wait between min and max
Wait|5
Wait|5|Seconds
Wait|1|Minutes
Wait|3,6|Seconds  // Random wait between 3 and 6 seconds
Important Note: Always ensure responsible use of the Wait command in your scripts. Frequent or rapid interactions without appropriate delays can lead to excessive load, unintended server strain, or even bans and blocks from websites. Use the Wait command thoughtfully and respectfully to avoid any potential abuse or misuse of systems.
Zoom
Purpose: Zoom the entire page or a specific element. Supports both page-wide scaling and element-specific transformations.
  • Zoom|[scale] – Zoom entire page (1 = 100%, 0.5 = 50%, 2 = 200%)
  • Zoom|[reference_type]|[reference_value]|[scale] – Zoom specific element
Scale Values: Use decimal values where 1.0 = 100%, 0.5 = 50%, 2.0 = 200%, etc. For page zoom, values like 0.1 = 10% up to larger values for magnification.
// Page-wide zoom
// Zoom page to 150%
Zoom|1.5
// Zoom page to 80%
Zoom|0.8
// Zoom page to 200%
Zoom|2

// Element-specific zoom
// Zoom element by ID to 120%
Zoom|ID|mainContent|1.2
// Zoom element by class to 90%
Zoom|class|article-text|0.9
// Zoom element by aria-label to 150%
Zoom|aria|Main Article|1.5
// Zoom element by name to 200%
Zoom|name|contentArea|2.0
Note: Element-specific zoom uses CSS transform scaling and automatically centers the element in the viewport for better visibility.
SmoothZoom
Purpose: Smoothly zoom the entire page or a specific DOM element to a target zoom level using animation with customizable duration and easing.
SmoothZoom|[zoomLevel]|[durationMs]|[easeType]|[optional_referenceType]|[optional_referenceValue]
Parameters:
  • zoomLevel – The desired zoom factor (e.g., 1 for 100%, 1.25 for 125%, 0.8 for 80%). Supports variables with ~.
  • durationMs – Duration of the zoom animation in milliseconds (default: 180). Supports variables with ~.
  • easeType – Animation easing type. Supported: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic. Defaults to easeOutQuad. Supports variables with ~.
  • optional_referenceType – (Optional) Target a specific DOM element instead of the entire page. Supports standard reference types: ID, name, class, aria.
  • optional_referenceValue – (Optional) The actual value for the reference type (e.g., element ID, class name). Supports variables with ~.
Examples: 
// Smoothly zoom entire page to 150% over 300ms with easeOutQuad
SmoothZoom|1.5|300|easeOutQuad

// Smoothly zoom entire page to 80% over 500ms with easeInOutCubic
SmoothZoom|0.8|500|easeInOutCubic

// Smoothly zoom a specific element by ID to 200% over 400ms
SmoothZoom|2|400|easeOutCubic|ID|contentContainer

// Smoothly zoom a button by class name to 110% over 200ms
SmoothZoom|1.1|200|linear|class|cta-button

// Using variables for dynamic zoom
set|~zoomLevel|1.75
set|~duration|250
SmoothZoom|~zoomLevel|~duration|easeInQuad|aria|Main Content
Notes:
  • Zoom values are clamped between 0.1 (10%) and 5.0 (500%).
  • If no element is specified, the zoom applies to the entire page using document.body.style.zoom.
  • When targeting specific elements, zoom is applied using CSS transform: scale() with transformOrigin: center.
  • Easing functions affect the “feel” of the zoom animation—experiment to get the right visual effect.
  • All parameters support variable references using the ~ prefix.
  • Useful for spotlight effects, gradual zoom transitions, or improving user experience during scripted actions.
Custom
Purpose: Execute a saved JavaScript snippet with positional parameter substitution.
custom|[snippetName]|[arg1]|[arg2]|...
Snippet placeholders: Use <<<BBSH_1>>>, <<<BBSH_2>>>, <<<BBSH_n>>> inside the saved snippet. Arguments map to placeholders in order.
// Trigger a snippet with one argument
custom|search|automation

// Use variables as arguments

set|~var|user@example.com
// Each item after the custom script name replaces the placeholder in the script '<<>>','<<>>', etc.            
custom|customScriptName|~var|or some text
Availability: PRO, ADVANCED, and MASTER licenses.

Tips and Best Practices

✓ DO:

  • Always use Wait commands between actions to avoid overwhelming servers
  • Use random wait times (e.g., Wait|3,6|Seconds) to create some variability in the wait times.
  • Store sensitive data in variables rather than hardcoding them
  • Add comments to document your scripts
  • Test your scripts on a small scale before running large batches
  • Use the get command to verify actions completed successfully

✗ DON’T:

  • Don’t run scripts too quickly without appropriate delays
  • Don’t ignore rate limits or terms of service
  • Don’t run untested scripts on production websites
Scroll to Top

🖥️ Mini Browser Apps 

Browser Bro integrates with BrowserApps.io

  • BrowserApps provide an infinite way in which to extend Browser Pro with additional and useful functionality 
  • BrowserApps are hosted securely with BrowserApps.IO
  • BrowserApps are made with HTML and Javascript and using open source libraries like d3.js or WebGL.
  • BrowserApps code can be inspected fully.
  • BrowserApps can run inside Browser Bro or in your favorite browser.
  • BrowserApps have no “backend” component. What you enter into it stays saved in the Browser you are using, until its cache and cookies are deleted.
  • BrowserApps do not yet have persistent storage.  To keep your data simply pin the tab, or leave Browser Bro running (if running inside BrowserBro).
  • You can ask for access to the Github Repository for BrowserApps.io

🖥️ Browser Array – Monitoring & Presentation

View and manage up to 16 browser instances—all in a single and resizable window. The Browser Array gives you real-time, at-a-glance visibility and makes it effortless to switch between focus and overview modes.

  • ✅ Monitor up to 16 live websites side-by-side
  • ✅ Works great with dashboards, analytics, social feeds, and more
  • ✅ Set per-browser zoom, scroll, and auto-refresh
  • ✅ Focus mode lets you enlarge and control one browser at a time
  • ✅ Present content cleanly from a single or multi-browser view
  • ✅ Easily automate actions in each browser using Shorthand Scripts

How It Works

Open anywhere from 1 to 16 browser panels inside your Browser Bro window.

Each panel can be customized with its own URL, zoom level, scroll position, and refresh interval.

For live presentations or focused work, toggle a browser into focus mode to expand it and interact with it directly.

It’s the perfect tool for creators, analysts, trainers, and developers who need more than one tab—and more control than any browser offers by default.

🔒 Kiosk Mode

Kiosk Mode is perfect for public displays, demos, training environments, or anywhere you need to lock the browsing experience to a specific page—or category of pages.

  • ✅ Prevents navigation away from chosen content
  • ✅ Easy to configure per browser widget
  • ✅ Works with URL prefixes to define “safe zones”
  • ✅ Instantly reloads if a user tries to go off-limits
  • ✅ Ideal for kiosks, classrooms, or training labs

How It Works

Each browser widget in your array can have kiosk mode turned on individually.

You define an Allowed URL Prefix—like https://example.com/training/.

If the user navigates to a page outside of that prefix, Browser Bro refreshes the current page automatically, keeping them inside the allowed range.

No interruptions, no confusion—just a locked-in experience for your audience.

📊 Nail Your Next Presentation

Whether you’re teaching, demoing, pitching, or streaming, Browser Bro turns your screen into a dynamic multi-source stage. Present like a pro with full control over every resource in your array—and capture it all for later.

  • ✅ Load up to 16 different resources at once—each in its own browser panel
  • ✅ Focus on any resource instantly, or cycle through them one by one
  • ✅ Include any browser-viewable content: websites, dashboards, slides, docs, videos, PDFs
  • ✅ Use kiosk mode to keep the presentation safe and locked-in

Record Your Presentations

With screen recording tools, you can capture your full array layout—including focused transitions, annotations, live interactions, and multi-tab storytelling—all in one seamless take.

Whether you’re making a training video, documenting a workflow, or producing a polished walkthrough, Browser Bro array can help your presentation to stand out.

🎥 Streamers: Browser Array + OBS

Streamers often need to share portions of multiple live pages at once—chat, alerts, stats, and dashboards. The Browser Array gives you all of them inside a single window. OBS sees that window as one clean source, no extra browser juggling or overlays required.

  • ✅ Combine multiple browsers into one OBS-ready window
  • ✅ Up to 16 live sites displayed in a grid or column view
  • ✅ Individual panel controls: zoom, scroll, and optional auto-refresh
  • ✅ Focus Mode to highlight one panel full-screen without changing your scene setup
  • ✅ Optional branding or layout presets for polished streaming setups (Advanced+)

One Source, Many Browsers

The Browser Array behaves like a single virtual monitor. OBS captures it once, while each embedded browser inside stays fully live and interactive. This means chat windows, dashboards, and web tools all stay synced and active—without adding more sources or slowing down your stream.

Switch layouts, resize panels, or swap URLs in real time. OBS still sees it as one window, keeping your workflow simple and stable.

Common Streaming Uses

  • Chat, alerts, and analytics in one live feed
  • Keeping sponsor pages and timers visible off-camera
  • Browser-based demos or web tutorials without scene switching