Usage Guide

This page covers how to use Loopi to create, run, and debug browser automations.

The Automation Builder

The Automation Builder is Loopi's visual node-based editor for creating workflows.

Creating a New Automation

From the dashboard, click "Add Automation".
The visual editor opens with an empty canvas and a root navigation node
Give your automation a descriptive name (e.g., "Login and Extract Data")
Add an optional description to explain what the automation does
Click "Save" to store your workflow or "Export" to share it

Adding Steps

Click "Add Step" or the + button to add automation nodes:

Navigate – Load a URL
Click – Click an element
Type – Enter text into inputs
Extract – Get element text or attributes
Screenshot – Capture page image
Wait – Pause execution
API Call – Make HTTP requests
Set Variable – Store values
Modify Variable – Update existing variables

Configuring Steps

Click any step to open its configuration panel:

Description: Add a note (e.g., "Click login button")
Selector: Use the Pick Element tool for accurate selectors
Value: Enter URLs, text, or variable references
Options: Configure step-specific settings

Using Selectors

Selectors tell Loopi which elements to interact with.

Pick Element Tool

The easiest way to get reliable selectors:

Click "Pick Element" in any step
The browser opens with element picker mode
Hover over elements – they highlight
Click the element you want
Loopi generates a CSS selector automatically

Selector Best Practices

✅ Good selectors:

#login-button (ID)
.submit-btn (stable class)
input[name="email"] (attribute)

❌ Avoid:

div > div:nth-child(3) (fragile)
.css-abc123 (generated classes)
Long nested paths

Testing Selectors

Use browser DevTools to test selectors:

document.querySelector('your-selector-here')

Should return the correct element.

Variables and Templates

Variables let you store and reuse data throughout your automation. Loopi's auto-typed variable system automatically detects and preserves data types.

Auto-Type Detection

When you set or extract variables, the type is automatically detected:

"42" or "3.14" → number
"true" or "false" → boolean
'{"key":"value"}' → object
'[1,2,3]' → array
Any other text → string

Creating Variables

Use the Set Variable step:

Variable Name: productPrice
Value: 29.99 (automatically stored as number)

Or extract from page:

Type: Extract
Selector: .price
Store Key: productPrice

Using Variables

Variables can be referenced in almost any text field using {{varName}} syntax.

Simple Variable Access

{{username}}
{{count}}
{{isActive}}

Nested Property Access (Objects)

{{user.name}}
{{user.profile.email}}
{{config.database.host}}

Array Element Access

{{users[0]}}                // First element
{{products[1].name}}        // Property of element
{{matrix[0][1]}}            // Multi-dimensional arrays

Mixed & Deep Nesting

{{users[0].name}}           // User's name from array
{{response.data[0].meta.created_at}}
{{items[index].properties[0].value}}

Real example in URLs:

https://example.com/user/{{users[0].id}}/profile

Variable Operations

Set Variable:

Create or overwrite a variable with auto-type detection

Modify Variable:

set – Assign new value
increment – Add to number (maintains numeric type)
decrement – Subtract from number
append – Add to end of string

Example: Extract and Use with Full Syntax

1. Navigate: https://api.example.com/user/123
2. Extract: selector=".user-name" → storeKey="name"
3. Extract: selector=".user-role" → storeKey="role"
4. Navigate: https://internal.example.com/profiles/{{name}}
5. Type: selector="input.role" → value="{{role}}"

API Response Access

API responses are stored as typed objects with direct property access (not JSON strings):

{
  "type": "apiCall",
  "method": "GET",
  "url": "https://api.github.com/users/torvalds",
  "storeKey": "githubUser"
}

Response stored as object:

{
  "login": "torvalds",
  "followers": 262478,
  "company": "Linux Foundation",
  "created_at": "2011-09-03T15:26:22Z"
}

Access directly:

{{githubUser.login}}        // "torvalds"
{{githubUser.followers}}    // 262478 (as number!)
{{githubUser.company}}      // "Linux Foundation"

No JSON parsing needed – all properties are immediately accessible!

Learn more: See the Variable System guide for complete details.

In URLs:

https://example.com/product/{{productId}}

In selectors:

[data-id="{{userId}}"]

In text inputs:

Hello {{userName}}!

Variable Operations

Set Variable:

Create or overwrite a variable

Modify Variable:

set – Assign new value
increment – Add to number
decrement – Subtract from number
append – Add to end of string

Example: Extract and Use

1. Navigate: https://example.com
2. Extract: selector=".product-name" → storeKey="name"
3. Extract: selector=".price" → storeKey="price"
4. API Call: POST https://api.example.com/save
   Body: {"name": "{{name}}", "price": "{{price}}"}

Conditional Logic

Use Extract with Logic to make decisions:

Comparison Operations

equals – Exact match
contains – Substring match
greaterThan – Numeric comparison
lessThan – Numeric comparison

Example: Check Stock Status

Extract with Logic:
  Selector: .stock-status
  Condition: contains
  Expected: "In Stock"

Returns: { value: "In Stock", conditionMet: true }

Working with Data

Extracting Data

Single element:

Extract → selector: ".title" → store: "pageTitle"

Multiple elements: Use JavaScript execution or loop through selectors.

Transforming Data

Apply transforms in Extract with Logic:

stripCurrency – Remove $, €, etc.
stripNonNumeric – Keep only numbers
removeChars – Remove specific characters
regexReplace – Advanced text replacement

Example: Extract Price

Extract with Logic:
  Selector: .price
  Transform: stripCurrency
  Parse as Number: ✓
  Condition: greaterThan
  Expected: 50

API Integration

Make HTTP requests with the API Call step.

GET Request

API Call:
  Method: GET
  URL: https://api.example.com/products/{{id}}
  Store Key: productData

POST Request

API Call:
  Method: POST
  URL: https://api.example.com/submit
  Headers: {"Content-Type": "application/json"}
  Body: {"name": "{{name}}", "email": "{{email}}"}
  Store Key: response

Using API Responses

API responses are automatically stored as typed objects with full property access:

{
  "type": "apiCall",
  "method": "GET",
  "url": "https://api.example.com/users/123",
  "storeKey": "userData"
}

Response example:

{
  "id": 123,
  "name": "John Doe",
  "email": "john@example.com",
  "roles": ["admin", "user"]
}

Direct property access:

{{userData.id}}              // 123 (as number)
{{userData.name}}            // "John Doe"
{{userData.email}}           // "john@example.com"
{{userData.roles[0]}}        // "admin" (first role)

No JSON parsing required – access properties directly with full syntax support!