Browser Bro
📖 Shorthand Scripting Reference Manual
Table of Contents
What is it? – Overview & purpose
The Delimiter – Using the
| characterBrowser Array Targeting – Target specific browsers
Variables – Using
~variablesDOM References – Element targeting methods
Comments – Using
// syntaxFormat – 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:- ID: By element
id - name: By
nameattribute - class: By CSS
classname - aria: By
aria-labelattribute - xpath: By XPath selector
- css: By generic CSS selector
- text: By visible text content
- placeholder: By placeholder attribute
- data: By data attributes (e.g. data-testid)
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
AssertTriggeredmessage 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]|~variableNameask|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 viewGo|Array|[layout]– Navigate to Array with specific layout (e.g., 2×2, 1×3, 4×1)Go|Forward– Go forward in historyGo|Back– Go back in historyGo|[URL]– Navigate to URLGo|[URL]|param|key1|value1|key2|value2– URL with query parametersGo|[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 timesloop|each line|~sourceVar|~currentLineVar– Loop through linesloop|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.
ReloadReload
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 pixelsScroll|Up|[pixels]– Scroll up by pixelsScroll|#elementId– Scroll to element by IDScroll|.elementClass– Scroll to element by classScroll|[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 editorset|~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 snapshotSnapshot|[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/HoursWait|[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
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.,
1for 100%,1.25for 125%,0.8for 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 toeaseOutQuad. 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%) and5.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()withtransformOrigin: 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
Waitcommands 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
getcommand 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

Comments
If you need to add notes or temporarily disable certain instructions, start a line with//.