Using Variables

Variables allow you to extract values from the page and use them in subsequent steps. This is essential for testing dynamic content like order IDs, session tokens, or user-generated data.

How Variables Work

Extract a value from the page using a selector
Store it with a name
Use it in later steps with {{variableName}} syntax

Extracting Variables

From Text Content

Extract the text content of an element:

Step: Extract Order ID
Type: extract
Selector: .order-confirmation .order-id
Variable: orderId
Source: text

If the element contains Order #12345, the variable orderId will be 12345.

From Attributes

Extract an attribute value:

Step: Extract Download Link
Type: extract
Selector: a.download-link
Variable: downloadUrl
Source: attribute
Attribute: href

From Input Values

Extract the current value of an input field:

Step: Extract Generated Password
Type: extract
Selector: #generated-password
Variable: tempPassword
Source: value

Using Variables

Reference variables in any step using double curly braces:

In URLs

Step: View Order Details
Type: goto
URL: https://example.com/orders/{{orderId}}

In Form Fields

Step: Search for Order
Type: fill
Selector: #search
Value: {{orderId}}

In Assertions

Step: Verify Order Number
Type: expect_text
Selector: .order-details h1
Text: Order #{{orderId}}

Environment Variables

For sensitive data or configuration that changes between environments, use environment variables.

Setting Environment Variables

Go to Settings > Variables in your dashboard
Add a new variable:
- Name: API_KEY
- Value: your-secret-key
- Secret: true (hides value in logs)

Using Environment Variables

Reference them the same way:

Step: Authenticate
Type: fill
Selector: #api-key
Value: {{API_KEY}}

Secret variables are masked in logs and screenshots but are still sent to the page. Never use production credentials for monitoring - create dedicated test accounts.

Variable Scopes

Scope	Description	Example
Run	Available only during current run	Extracted order ID
Journey	Persists across runs of same journey	Counter, last run ID
Environment	Shared across all journeys	API keys, base URLs

Common Patterns

Dynamic Form Testing

# Step 1: Fill form
- type: fill
  selector: #name
  value: Test User {{timestamp}}

# Step 2: Submit
- type: click
  selector: button[type="submit"]

# Step 3: Extract confirmation
- type: extract
  selector: .confirmation-number
  variable: confirmationId

# Step 4: Verify retrieval
- type: goto
  url: https://example.com/lookup/{{confirmationId}}

# Step 5: Assert found
- type: expect_visible
  selector: .confirmation-details

Token-Based Authentication

# Step 1: Login and extract token
- type: goto
  url: https://api.example.com/login

- type: fill
  selector: #username
  value: {{TEST_USER}}

- type: fill
  selector: #password
  value: {{TEST_PASSWORD}}

- type: click
  selector: button[type="submit"]

# Step 2: Extract auth token from response
- type: extract
  selector: #auth-token
  variable: authToken

# Step 3: Use token in API call
- type: goto
  url: https://api.example.com/dashboard?token={{authToken}}

Cross-Page Data Verification

# Step 1: Create item
- type: goto
  url: https://app.example.com/items/new

- type: fill
  selector: #item-name
  value: Test Item

- type: click
  selector: button[type="submit"]

# Step 2: Extract created item ID
- type: extract
  selector: .item-id
  variable: itemId

# Step 3: Verify in list view
- type: goto
  url: https://app.example.com/items

- type: expect_visible
  selector: [data-item-id="{{itemId}}"]

# Step 4: Verify in detail view
- type: goto
  url: https://app.example.com/items/{{itemId}}

- type: expect_text
  selector: h1
  text: Test Item

Built-in Variables

tracer provides some built-in variables:

Variable	Description	Example
`{{timestamp}}`	Current Unix timestamp	`1699876543`
`{{datetime}}`	Current ISO datetime	`2024-01-15T10:30:00Z`
`{{random}}`	Random 8-character string	`a7b3c9d1`
`{{uuid}}`	Random UUID	`550e8400-e29b-41d4-a716-446655440000`
`{{runId}}`	Current run ID	`run_abc123`
`{{journeyId}}`	Current journey ID	`journey_xyz789`

Example: Unique Test Data

- type: fill
  selector: #email
  value: test+{{timestamp}}@example.com

- type: fill
  selector: #username
  value: user_{{random}}

Variable Transformations

Apply transformations to variables:

# Uppercase
Value: {{orderId | uppercase}}

# Lowercase
Value: {{email | lowercase}}

# Trim whitespace
Value: {{text | trim}}

# Extract with regex
Value: {{text | regex:"Order #(\\d+)"}}

Debugging Variables

If a variable isn't working:

Check the extraction step - Verify the selector matches the element
View run logs - Variables are logged when extracted
Check for typos - Variable names are case-sensitive
Verify timing - Ensure extraction happens before use

Add a screenshot step right before and after extraction to see exactly what's on the page when the variable is captured.

Best Practices

Use descriptive names - orderId is better than id
Extract early - Get values as soon as they appear
Handle missing values - Add assertions to verify extracted values
Avoid sensitive data - Use environment variables for secrets
Document variables - Note what each variable contains

Using Variables

On this page