Recording Journeys
Use the izli.io Chrome extension to record user interactions and create journeys automatically.
Recording Journeys
The izli.io Chrome extension lets you record browser interactions and automatically convert them into journey definitions. No coding required.
Installing the Extension
Get the Extension
Install the izli.io Recorder extension from the Chrome Web Store:
Pin the Extension
After installing, pin the extension to your Chrome toolbar so it's always accessible during recording.
Recording Your First Journey
Start from the Dashboard
- Go to your izli.io dashboard
- Click Journeys in the sidebar
- Click New Journey → Record with Extension
This opens the target page and activates the extension automatically.
Perform Actions
Interact with the page normally:
- Click buttons and links
- Fill in forms
- Select options
Each action is captured and displayed in the extension panel.
Add Assertions
To verify something on the page:
- Right-click on an element
- Select izli.io > Assert visible
Or click Add Assertion in the extension panel and select the element.
Stop and Save
- Click Stop Recording
- Review the captured steps
- Give your journey a name
- Click Save to izli.io
The journey is created in your izli.io account and ready to configure.
Captured Actions
The extension records these interactions:
| Action | What's Captured |
|---|---|
| Click | Element selector, position |
| Type | Input selector, entered text |
| Select | Dropdown selector, selected value |
| Check/Uncheck | Checkbox selector, state |
| Navigate | URL changes |
Smart Selector Generation
The extension generates selectors using this priority:
- data-testid -
[data-testid="login-btn"] - id -
#login-button - name -
[name="email"] - role + text -
button:has-text("Submit") - CSS path -
.form .btn-primary
Add data-testid attributes to your application's key elements for the most reliable selectors.
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.
Always review recorded steps before saving. Remove or mask any sensitive data that wasn't automatically detected.
Recording Tips
1. Plan Your Flow
Before recording, outline the steps you want to capture. This helps avoid unnecessary actions.
2. Go Slowly
Pause briefly between actions to ensure each is captured distinctly.
3. 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
4. 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-testidto 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).
Assertion Types
Right-click context menu options:
- Assert visible - Element is displayed
- Assert text - Element contains text
- Assert URL - Current URL matches