Browser Journeys
Create automated browser tests to monitor critical user flows with Playwright-based journey testing.
Browser Journeys
Browser Journeys let you automate and monitor multi-step user flows. Using Playwright under the hood, you can test login flows, checkout processes, form submissions, and any other critical user paths.
Overview
A journey consists of one or more steps that execute in sequence. Each step performs an action like:
- Navigating to a URL
- Clicking an element
- Filling in form fields
- Asserting content is visible
- Taking screenshots
Journeys run on a schedule and alert you when they fail, ensuring your critical user flows always work.
Quick Example
Here's a simple journey that tests a login flow:
// Step 1: Navigate to login page
await page.goto('https://app.example.com/login');
// Step 2: Fill email
await page.fill('#email', '[email protected]');
// Step 3: Fill password
await page.fill('#password', 'password');
// Step 4: Click submit
await page.click('button[type="submit"]');
// Step 5: Verify dashboard loads
await expect(page.locator('.dashboard-header')).toBeVisible();Features
Visual Testing
Detect visual regressions with screenshot comparison
Variables
Extract and reuse values between steps
Scheduling
Run journeys on intervals or cron schedules
Chrome Extension
Record journeys directly from your browser
Use Cases
Login Flow Testing
Verify users can successfully log in:
await page.goto('https://app.example.com/login');
await page.fill('[name="email"]', '[email protected]');
await page.fill('[name="password"]', 'testpassword');
await page.click('button[type="submit"]');
await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();Checkout Process
Test e-commerce checkout flow:
// Add to cart
await page.goto('https://store.example.com/product/123');
await page.click('button:has-text("Add to Cart")');
// Go to checkout
await page.click('a:has-text("Checkout")');
// Fill shipping
await page.fill('#address', '123 Test St');
await page.fill('#city', 'Test City');
await page.selectOption('#state', 'CA');
await page.fill('#zip', '90210');
// Complete order
await page.click('button:has-text("Place Order")');
await expect(page.locator('.order-confirmation')).toBeVisible();API Health Through UI
Verify API data loads correctly in the UI:
await page.goto('https://app.example.com/dashboard');
await expect(page.locator('.data-table')).toBeVisible();
await expect(page.locator('.data-table tr')).toHaveCount(10);Journey Structure
Each journey has:
| Property | Description |
|---|---|
| Name | Descriptive name for the journey |
| Steps | Ordered list of actions to perform |
| Schedule | How often to run (interval or cron) |
| Timeout | Maximum execution time |
| Locations | Where to run from |
| Alert Rules | When to notify on failure |
Execution Environment
Journeys run in isolated browser environments with:
- Chromium - Latest stable version
- Viewport - 1280x720 (configurable)
- Timeout - 30 seconds default (configurable up to 5 minutes)
- Network - Full internet access
Each journey run starts with a fresh browser context. Cookies, localStorage, and other state is cleared between runs.
Artifacts
Every journey run captures:
- Screenshots - Full page screenshots at key points
- Trace - Playwright trace file for debugging
- Console Logs - Browser console output
- Network - Request/response details
These artifacts are retained for 30 days and help you debug failures.
Best Practices
- Use unique selectors - Prefer
data-testidattributes over CSS classes - Wait for elements - Use Playwright's built-in waiting instead of
sleep() - Keep journeys focused - Test one flow per journey
- Use variables - Extract dynamic values instead of hardcoding
- Set realistic timeouts - Account for network latency