Creating Journeys

This guide walks you through creating a browser journey from scratch.

Two Ways to Create Journeys

1. Visual Builder - Use the web interface to add steps
2. Chrome Extension - Record actions directly in your browser

This guide covers the visual builder. For recording, see Recording Journeys.

Creating Your First Journey

Name: Login Flow Test
Description: Verifies users can log in successfully
Timeout: 30 seconds

Step Types

Navigation Steps

goto

Navigate to a URL.

Type: goto
URL: https://example.com/page

wait

Wait for a condition before continuing.

Type: wait
Condition: networkidle | load | domcontentloaded
Timeout: 5000ms

Interaction Steps

click

Click on an element.

Type: click
Selector: button.submit

fill

Type text into an input field. Clears existing content first.

Type: fill
Selector: input[name="email"]
Value: [email protected]

type

Type text character by character. Useful for autocomplete fields.

Type: type
Selector: input.search
Value: search query
Delay: 100ms  # Between keystrokes

select

Select an option from a dropdown.

Type: select
Selector: select#country
Value: US  # Option value

check

Check or uncheck a checkbox.

Type: check
Selector: input[type="checkbox"]
Checked: true

hover

Hover over an element. Useful for revealing menus.

Type: hover
Selector: .dropdown-trigger

Assertion Steps

expect_visible

Assert an element is visible on the page.

Type: expect_visible
Selector: .success-message

expect_text

Assert an element contains specific text.

Type: expect_text
Selector: .welcome-message
Text: Welcome back

expect_url

Assert the current URL matches a pattern.

Type: expect_url
URL: https://example.com/dashboard
# Or use pattern matching:
Pattern: /dashboard/*

Utility Steps

screenshot

Capture a screenshot at this point.

Type: screenshot
Name: after-login  # Optional name
Full Page: true    # Capture entire page

wait_for_timeout

Wait for a specific duration.

Type: wait_for_timeout
Duration: 2000ms

Using Variables

You can extract values from the page and use them in later steps:

# Step 1: Extract order ID
Type: extract
Selector: .order-id
Variable: orderId

# Step 2: Use in navigation
Type: goto
URL: https://example.com/orders/{{orderId}}

See Using Variables for more details.

Handling Authentication

For journeys that require login, you have several options:

Option 1: Include Login Steps

Add login steps at the beginning of your journey:

Steps:
  - goto: https://app.example.com/login
  - fill: [#email, [email protected]]
  - fill: [#password, {{PASSWORD}}]
  - click: button[type="submit"]
  - wait: networkidle
  # ... rest of journey

Option 2: Use Environment Variables

Store credentials as variables:

1. Go to Settings > Variables
2. Add LOGIN_EMAIL and LOGIN_PASSWORD
3. Reference in steps: {{LOGIN_EMAIL}}

Debugging Failed Journeys

When a journey fails:

1. View the run details - Click on the failed run
2. Check screenshots - See visual state at each step
3. Download trace - Open in Playwright Trace Viewer
4. Review console logs - Check for JavaScript errors

Common issues:

• Selector not found - Element doesn't exist or has changed
• Timeout - Page took too long to load
• Assertion failed - Expected content not present

Best Practices

1. Use data-testid attributes - More reliable than CSS classes

   <button data-testid="submit-btn">Submit</button>

   Selector: [data-testid="submit-btn"]

2. Keep journeys focused - One user flow per journey

3. Set appropriate timeouts - Account for network latency

4. Use meaningful names - Describe what the journey tests

5. Test in staging first - Validate journeys before production

Next Steps

• Learn Playwright selectors
• Set up visual testing
• Configure scheduling