Recording Journeys

The tracer Chrome extension lets you record browser interactions and automatically convert them into journey definitions. No coding required.

Installing the Extension

Recording Your First Journey

Captured Actions

The extension records these interactions:

Editing Recorded Steps

After recording, you can edit steps before saving:

Modify Selectors

Click on a step to edit its selector:

# Original (auto-generated)
Selector: #root > div > form > button:nth-child(3)

# Improved (manual edit)
Selector: [data-testid="submit-button"]

Add Wait Steps

Insert waits between actions:

1. Click between two steps
2. Click Add Step
3. Select Wait
4. Configure wait type (time, selector, network)

Remove Steps

Delete unnecessary steps (like accidental clicks):

1. Hover over the step
2. Click the trash icon

Reorder Steps

Drag and drop steps to reorder them.

Smart Selector Generation

The extension generates selectors using this priority:

1. data-testid - [data-testid="login-btn"]
2. id - #login-button
3. name - [name="email"]
4. role + text - button:has-text("Submit")
5. CSS path - .form .btn-primary

Handling Sensitive Data

Password Fields

Password inputs are recorded as:

Type: fill
Selector: #password
Value: {{PASSWORD}}

You'll be prompted to set the PASSWORD variable after saving.

Personal Data

The extension attempts to detect and mask:

• Email addresses
• Phone numbers
• Credit card numbers
• Social security numbers

These become variables you can set securely in tracer.

Recording Tips

1. Plan Your Flow

Before recording, outline the steps you want to capture. This helps avoid unnecessary actions.

2. Use Incognito Mode

Record in incognito to start with a clean session (no cookies, local storage).

3. Go Slowly

Pause briefly between actions to ensure each is captured distinctly.

4. Add Meaningful Assertions

Don't just record actions—verify outcomes:

• Assert success messages appear
• Verify navigation to expected pages
• Check that data is displayed correctly

5. Test the Recorded Journey

After saving, run the journey immediately to verify it works correctly.

Troubleshooting

Actions Not Captured

Problem: Some clicks or inputs aren't recorded.

Solutions:

• Ensure the extension has permission for the site
• Try clicking more deliberately (slower)
• Check if the element is inside an iframe (see below)

Iframes

Problem: Interactions inside iframes aren't captured.

Solution: The extension may need additional permissions for cross-origin iframes. Check the extension settings.

Dynamic Elements

Problem: Recorded selectors don't work on replay.

Solutions:

• Edit selectors to use more stable attributes
• Add data-testid to your application
• Use text-based selectors: button:has-text("Submit")

Extension Conflicts

Problem: Recording interferes with page functionality.

Solution: Disable other extensions that might conflict (ad blockers, other automation tools).

Advanced Features

Recording Assertions

Right-click context menu options:

• Assert visible - Element is displayed
• Assert text - Element contains text
• Assert value - Input has value
• Assert URL - Current URL matches

Screenshot Annotations

Add screenshots with notes:

1. Click Screenshot during recording
2. Annotate the image (circles, arrows, text)
3. Screenshot is saved with the journey for documentation

Network Condition Simulation

Test under different network conditions:

1. Open extension settings
2. Enable Network Throttling
3. Select condition (3G, Slow 3G, Offline)

Syncing with tracer

Auto-Sync

Saved journeys automatically sync to your tracer account.

Offline Recording

Record journeys offline—they'll sync when you're back online.

Team Sharing

Recorded journeys can be shared with team members:

1. Save the journey
2. Go to tracer dashboard
3. Move journey to shared project

Keyboard Shortcuts

Extension Settings

Access settings via the extension popup:

• Auto-capture screenshots: Take screenshots at each step
• Capture network requests: Record API calls for debugging
• Smart wait insertion: Auto-add waits after navigations
• Selector strategy: Prefer certain selector types