Flow Recording

Flow recording captures multi-step user workflows so you can audit entire processes, not just single pages. Use it to test login flows, checkout processes, wizard forms, onboarding sequences, and any multi-page user journey.

Why Record Flows?

Single-page audits miss issues that only appear during interaction:

Example issues flow recording catches:

• Form validation messages that appear on submit
• Focus management when navigating between steps
• Error states after invalid input
• Success pages after completing a process
• Loading states during async operations

When to Use Flow Recording

Record flows when auditing:

• Login/signup flows - Form validation, error messages, success redirects
• Checkout processes - Cart, shipping, payment, confirmation
• Wizard forms - Multi-step registration, onboarding
• Search workflows - Query, results, filtering, detail views
• Account settings - Navigation between settings pages
• Any multi-step process - Where users move through states

How to Record a Flow

Starting a Recording

1. Open the Side Panel (Ctrl+Shift+U or Cmd+Shift+U)
2. Navigate to your starting point (e.g., login page)
3. Click "Start Recording" in the Recording Controls section
4. A red recording indicator appears in the panel

Performing Actions

With recording active, interact with the page normally:

• Click buttons, links, and interactive elements
• Fill form fields with test data
• Navigate between pages (recording continues)
• Use keyboard shortcuts and tab navigation
• Submit forms and wait for responses

The recorder captures each action as it happens.

Stopping the Recording

1. Click "Stop Recording" when your flow is complete
2. A preview of captured actions appears
3. Choose to audit the flow or save for later

Captured Action Types

The recorder captures these user actions:

Click Events

{
  "type": "click",
  "selector": "button.submit-btn",
  "text": "Submit Order",
  "timestamp": 1705312500000
}

Captures the element clicked and its text content.

Form Input

{
  "type": "input",
  "selector": "input#email",
  "field_type": "email",
  "value": "test@example.com",
  "timestamp": 1705312510000
}

Keyboard Events

{
  "type": "keyboard",
  "key": "Tab",
  "target": "input#email",
  "timestamp": 1705312520000
}

Captures Tab, Enter, Escape, and arrow key navigation.

Navigation Events

{
  "type": "navigation",
  "from": "https://example.com/cart",
  "to": "https://example.com/checkout",
  "timestamp": 1705312530000
}

Records page transitions during the flow.

After Recording: Preview and Audit

Previewing the Flow

After stopping, view your captured actions:

Preview shows:

• Numbered list of actions in order
• Action type icon (click, input, navigation)
• Target element or page
• Timestamps

Review for:

• Missing steps (did you forget something?)
• Extra steps (accidental clicks to remove)
• Correct order (actions in expected sequence)

Running the Flow Audit

Click "Audit Flow" to analyze the entire recording:

1. The extension replays each action
2. At each step, a scan runs on the current page state
3. Issues are collected across all steps
4. Final report shows issues from the entire flow

Audit results include:

• Issues grouped by step/page
• Timeline view of when issues appeared
• Summary across the full flow

Flow Report

The flow audit report provides comprehensive results:

Summary Section

Flow Audit: Checkout Process
Duration: 45 seconds
Steps: 8
Pages: 4
Total Issues: 12

Issues by Step

Click a step to see issues found at that point in the flow.

Issue Details

Each issue includes:

• Which step it was discovered
• The page state when found
• Standard issue details (severity, element, description)

Cross-Page Recording

Recordings continue across page navigations:

How It Works

1. Before navigation, current recording state is saved
2. Page unloads and new page loads
3. Recording resumes on new page
4. Content script picks up where it left off

Limitations

Cross-page recording works with:

• Same-origin navigations (same domain)
• SPA route changes (React Router, Vue Router, etc.)
• Form submissions that navigate

Cross-page recording does NOT work with:

• Cross-origin navigations (different domain)
• OAuth redirects to third-party auth
• Payment processor redirects
• New windows or tabs

Saving and Replaying Flows

Saving a Recording

After stopping a recording:

1. Click "Save Flow" in the preview
2. Enter a name (e.g., "Checkout - Guest User")
3. Flow is saved to local storage

Viewing Saved Flows

1. In Side Panel, click "Saved Flows" tab
2. See list of saved recordings
3. Click to preview or audit

Exporting Flows

Export flows for sharing or CI integration:

JSON format:

{
  "name": "Checkout - Guest User",
  "created": "2024-01-15T10:30:00Z",
  "starting_url": "https://example.com/cart",
  "actions": [
    {"type": "click", "selector": "button.checkout", ...},
    {"type": "input", "selector": "input#email", ...}
  ]
}

Use exported flows with the CLI for automated testing.

Best Practices

Before Recording

1. Start from a clean state - Clear cookies/storage if needed
2. Plan your flow - Know the steps before recording
3. Use realistic data - Test with real-looking inputs

During Recording

1. Wait for page loads - Don't click before content appears
2. Be deliberate - Avoid accidental clicks
3. Include error paths - Try invalid inputs too

After Recording

1. Preview before audit - Verify captured steps
2. Remove mistakes - Edit out accidental actions
3. Save important flows - For regression testing

Example: Recording a Checkout Flow

Walk through a complete checkout process:

Step 1: Prepare

• Start on the cart page with items added
• Ensure you are not logged in (testing guest checkout)
• Open Side Panel and navigate to Recording Controls

Step 2: Record

1. Click "Start Recording"
2. Click "Proceed to Checkout" button
3. Fill shipping form fields:
   • Name: Test User
   • Address: 123 Test Street
   • City: Test City
4. Click "Continue to Payment"
5. Fill payment form (use test card: 4242 4242 4242 4242)
6. Click "Place Order"
7. Wait for confirmation page
8. Click "Stop Recording"

Step 3: Audit

1. Preview shows 8 captured actions
2. Click "Audit Flow"
3. Extension replays the flow, scanning each page
4. Review issues found across the checkout process

Step 4: Triage

Issues commonly found in checkout flows:

• Form labels missing or misassociated
• Error messages not announced to screen readers
• Focus not managed after step transitions
• Loading states without accessible feedback
• Confirmation page missing success announcement

Troubleshooting

Recording Stops Unexpectedly

• Page may have reloaded fully (instead of SPA navigation)
• Check if extension was disabled
• Try starting a new recording

Actions Not Captured

• Wait for elements to be interactive before clicking
• Very fast clicks may be debounced
• Custom components may need specific selectors

Replay Fails

• Page may have changed since recording
• Selectors may no longer match
• Try re-recording with the current page state

No Issues Found

• Flow may have been too fast for full scan
• Try running manual scans at key states
• Check if issues are filtered out

Next Steps

Related

• SDK Audits - Programmatic flow testing
• CI/CD Integration - Automate flow testing in pipelines