User Flow Tests

User Flow tests allow you to create multi-page test scenarios that simulate real user journeys through your application. Unlike single-page tests, user flows follow a sequence of actions across multiple pages.

What Are User Flows?

A user flow is a sequence of steps that a real user would take to accomplish a goal:

🛒

E-commerce

Browse → Add to Cart → Checkout → Payment → Confirmation

👤

Registration

Landing Page → Sign Up → Email Verification → Profile Setup

🔐

📝

Form Submission

Contact Page → Fill Form → Submit → Thank You Page

Creating a User Flow Test

Navigate to Test Suites

Go to Test Suites in the sidebar.

Click User Flow

Click the User Flow button in the create options.

Name Your Flow

Give your user flow a descriptive name (e.g., "Complete Purchase Flow").

Define Steps

Add each step in the user journey with actions and assertions.

Save Flow

Save your user flow test suite.

Flow Step Types

Step Type	Description	Example
Navigate	Go to a specific URL	`Navigate to /products`
Click	Click an element	`Click button.add-to-cart`
Fill	Enter text in an input	`Fill #email with {{email}}`
Select	Choose from dropdown	`Select "Large" from #size`
Check/Uncheck	Toggle checkbox	`Check #terms-checkbox`
Wait	Wait for element/time	`Wait for .loading to disappear`
Assert	Verify condition	`Assert text "Order Confirmed" visible`
Screenshot	Capture page state	`Screenshot "checkout-complete"`

Example: E-commerce Checkout Flow

User Flow: Complete Purchase

Step 1: Browse Products
  - Navigate to /products
  - Assert: Product grid is visible
  - Click first product card

Step 2: View Product
  - Assert: Product title is visible
  - Assert: Add to Cart button exists
  - Click "Add to Cart" button
  - Assert: Cart badge shows "1"

Step 3: View Cart
  - Click cart icon
  - Assert: Cart contains 1 item
  - Assert: Checkout button is visible
  - Click "Proceed to Checkout"

Step 4: Enter Shipping
  - Fill #name with {{customerName}}
  - Fill #address with {{shippingAddress}}
  - Fill #city with {{city}}
  - Fill #zip with {{zipCode}}
  - Click "Continue to Payment"

Step 5: Complete Payment
  - Fill #card-number with {{testCardNumber}}
  - Fill #expiry with {{cardExpiry}}
  - Fill #cvv with {{cardCvv}}
  - Click "Place Order"

Step 6: Confirm Order
  - Assert: "Thank you for your order" is visible
  - Assert: Order number is displayed
  - Screenshot "order-confirmation"

Using Variables in Flows

User flows work seamlessly with test variables:

Define variables in Test Data → Test Variables
Use {{variableName}} syntax in your steps
Variables are substituted at runtime

Variable Tips:

Use unique email addresses with timestamps: test+{{timestamp}}@example.com
Keep test credentials separate from production
Create different variable sets for different environments

Flow Dependencies

User flow steps execute in sequence. If a step fails:

Subsequent steps are skipped
The failure point is clearly marked
Screenshots and traces help debug the issue

This mirrors real user behavior - if login fails, checkout can't proceed.

Best Practices

User Flow Tips:

Keep flows focused on a single user goal
Use descriptive step names for easy debugging
Add wait conditions for async operations
Include assertions at each critical point
Use stable selectors (IDs, data-testid) not dynamic classes
Test happy paths first, then add error scenarios
Add screenshots at key milestones

Common User Flows to Test

User registration and onboarding
Login and password reset
Search and filter products
Add items to cart and checkout
Update account settings
Submit contact/support forms
File upload workflows
Multi-step wizard forms

Creating User Flow Tests