Browser Bro

📖 Shorthand Scripting Reference Manual

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

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 four main ways of referencing elements:

ID: By element id
name: By name attribute
class: By CSS class name
aria: By aria-label attribute

NOTE: Using the Type command, 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`
Set innerHTML	`Type\|ID.innerhtml\|elementID\|htmlContent`

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.

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.

Click|[reference_type]|[reference_value]

Click|ID|submitButton
Click|class|btn-primary
Click|aria|Close
Click|name|loginBtn

Focus

Purpose: Set the focus on an element so it becomes active.

Focus|[reference_type]|[reference_value]

Focus|ID|usernameField
Focus|name|user_password
Focus|class|input-field
Focus|aria|Email Address

Get

Purpose: Retrieve the value from a DOM element and store it in a variable

get|[reference_type]|[reference_value]|~variableName

get|ID|emailField|~userEmail
get|name|username|~userName
get|class|form-input|~inputValue
get|aria|Search Box|~searchTerm

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.

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

Select|ID|countryDropdown|US
Select|name|languageSelector|fr
Select|class|form-select|option2
Select|aria|Choose State|CA

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 using various capture methods. Supports multiple screenshot techniques with optional scrolling capabilities.

Snapshot|[method] – Basic snapshot with specified method
Snapshot|[method]|[scrollAmount] – Snapshot with scroll loading
Snapshot|[method]|[scrollAmount]|[scrollTarget] – Snapshot with scroll and target

Available Methods:

Method	Description	Best For
`visible`	Captures the visible browser window area	Fast, reliable screenshots of viewport
`canvas`	Captures HTML5 canvas elements directly	Games, charts, drawing applications
`html2canvas`	Renders full page content to canvas	Complete page screenshots, complex layouts
`dom2image`	Converts DOM elements to image format	Styled content, CSS-heavy pages
`screen area`	(For perfect snapshot. Fastest and most accurate replication.) Takes snapshot of area of screen where the browser is located. This requires Browser Bro to be focused in order to capture the browser(s) snapshot(s).	Perfectly captures the screen area where the browser is, exactly as it is.

// Basic snapshots
Snapshot|visible
Snapshot|canvas
Snapshot|html2canvas
Snapshot|screen area

// Snapshots with scrolling
Snapshot|visible|1000
Snapshot|html2canvas|500|#main-content
Snapshot|dom2image|300|.article-body

File Location: Snapshots are saved in your “… Documents/My BrowserBro Files/snapshots” folder.

Type

Purpose: Type text into an element identified by ID, name, class, aria-label. 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`
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|ID.innerhtml|contentDiv|<h1>Hello World</h1>
Type|aria.innerhtml|Description Box|~htmlContent

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

Advanced Browser Toolset & A.I Agent for Entrepreneurs, Developers & Creatives