Flow Editor

The Flow Editor is where you build and configure your test flows. It provides a visual, intuitive interface for creating automated tests without writing code.

Keyboard Shortcut

Save: Cmd/Ctrl + S | Cancel Picker: Escape

Overview

The Flow Editor is divided into four main areas:

Area	Location	Purpose
Header	Top	Title, status, save controls
Step List	Left panel	Manage your test steps
Live Preview	Center	View your website in real-time
Step Configuration	Bottom panel	Configure selected steps

Opening the Flow Editor

You can open the editor in several ways:

Create a New Flow

1. Go to Flows in the sidebar
2. Click Create Flow
3. The editor opens with an empty flow

Edit an Existing Flow

1. Go to Flows in the sidebar
2. Click on any flow card
3. The editor opens with that flow loaded

The Editor Header

The header contains essential controls for your flow:

Left Section: Back Button

• Click ← Back to return to the Flows list
• If you have unsaved changes, you'll see a confirmation dialog

Center Section: Flow Title

• Click the title field to edit your flow name
• Enter a descriptive name (e.g., "Login Test", "Contact Form Validation")
• Changes are saved when you click the Save button

Right Section: Controls

Status Toggle

• Click to switch between Active (green) and Inactive (gray)
• Active flows can be run; inactive flows are paused

Save Button

• Click to save all changes to your flow
• Keyboard shortcut: Cmd+S (Mac) or Ctrl+S (Windows)
• The button is disabled if there are no changes or validation errors

Step List (Left Panel)

The left panel displays all steps in your flow and provides tools to manage them.

Step List Header

Add Step Button

• Click + Add Step to open the step type menu
• Select the type of action you want to add
• The new step appears at the bottom of the list

Record Button

• Click Record to enable recording mode
• Interact with your site in the preview
• Actions are automatically captured as steps
• Click Stop to end recording

Step Cards

Each step in your flow is displayed as a card showing:

• Icon - Visual indicator of the step type
• Step number - Order in the sequence (1, 2, 3...)
• Step type - The action name (Navigate, Click, Fill, etc.)
• Description - Your custom description or key details
• Target - The URL or element selector (if applicable)

Step Card Actions

Hover over a step to reveal action buttons:

Select (Click anywhere on the card)

• Opens the step configuration panel
• Highlights the selected step in blue

Duplicate (Copy icon)

• Creates an exact copy of the step
• Places it immediately after the original

Delete (Trash icon)

• Removes the step from the flow
• No confirmation dialog (use Undo if needed)

Reordering Steps

To change the order of steps:

1. Click and hold the drag handle (⋮⋮) on any step
2. Drag the step up or down
3. Release to drop it in the new position

Steps execute in order from top to bottom, so order matters!

Step Validation

Steps With Errors Show:

• 🔴 Red border around the card
• ⚠️ Error icon
• Hover to see the error message

Common Error	Fix
Missing required fields	Fill in all required inputs
Invalid URL format	Include https:// or http://
Empty selector	Use element picker or enter manually
Invalid timeout value	Enter a positive number

Live Preview (Center Panel)

The center area displays an embedded view of your website, allowing you to interact with it while building your flow.

Preview Header

URL Input

• Enter any URL to preview
• Press Enter or click Load page to navigate
• The URL automatically updates as you navigate

Load Homepage Button

• Quick shortcut to load your site's homepage
• Useful when starting a new flow

Refresh Button

• Reload the current page in the preview
• Helpful if page content changed

Preview Display

The preview shows your website in an iframe, with some special features:

Normal Mode

• Browse your site normally
• Click links to navigate
• Scroll and interact with elements

Selector Mode (when picking elements)

• Hover over elements to highlight them
• Click to select an element
• The selector is automatically generated and applied

Recording Mode (when recording)

• Your interactions are captured as steps
• Clicks, typing, and navigation are recorded
• A red border indicates recording is active

Cross-Origin Limitations

WARNING

Some pages may not load in the preview due to security restrictions (CORS). This is normal for:

• External sites (non-WordPress pages)
• Pages with strict security headers
• Login pages with special protections

For these pages, enter selectors manually or test on similar pages that do load.

Preview Tips

• Load your homepage first to get familiar with navigation
• Use the preview to find and select elements visually
• Test your flow by manually clicking through it in the preview
• Refresh the page if something looks wrong

Step Configuration Panel (Bottom)

When you select a step, the configuration panel appears at the bottom of the screen.

Panel Header

Shows:

• Step type name - e.g., "Configure Click Step"
• Close button (×) - Close the panel without selecting another step

Configuration Fields

The fields available depend on the step type:

Common Fields (Most Steps)

Description (optional)

• Add notes about what this step does
• Helpful for you and other team members
• Example: "Click the 'Submit' button in the contact form"

Selector (for element-based steps)

• CSS selector to find the element
• Use the Pick element button for visual selection
• Or enter manually (e.g., #submit-btn, .contact-form button)

Wait After (optional)

• Pause after this step (in milliseconds)
• Useful for waiting for animations or AJAX requests
• Default: 0 (no wait)

Step-Specific Fields

Different step types have unique fields:

• Navigate: URL to visit
• Fill: Text to enter
• Wait: Duration in milliseconds
• Assert: Assertion type and expected value
• Select: Option value or label

See the Step Types guide for detailed information on each step type.

Element Picker

For steps that target elements (Click, Fill, Assert, etc.):

1. Click Pick element in the configuration panel
2. Selector mode activates (blue highlight appears)
3. In the preview, hover over elements to see them highlighted
4. Click the element you want to target
5. The selector is automatically filled in
6. Click Apply or Cancel

Tips for picking elements:

• Pick specific elements (not containers when possible)
• Use unique elements (IDs are best)
• Test the selector by running the flow
• Edit manually if the auto-generated selector is too complex

Manual Selector Entry

If you prefer to enter selectors manually:

1. Click the selector input field
2. Type your CSS selector
3. Examples:
   • #login-button - Element with ID "login-button"
   • .submit-btn - Elements with class "submit-btn"
   • form input[type="email"] - Email inputs in forms
   • [data-test="checkout"] - Element with data-test attribute

TIP

Use your browser's DevTools to inspect elements and find the best selectors!

Keyboard Shortcuts

Speed up your workflow with these shortcuts:

• Cmd/Ctrl + S - Save flow
• Escape - Cancel selector picking

Unsaved Changes Warning

If you try to leave the editor with unsaved changes:

1. A dialog appears: "You have unsaved changes"
2. Choose:
   • Save - Save changes and leave
   • Discard - Abandon changes and leave
   • Cancel - Stay in the editor

This prevents accidental loss of work.

Recording Mode

🎥 Recording Mode

The fastest way to create flows! Flowguard watches your interactions and automatically generates steps.

How to Use Recording

1. Click the Record button in the left panel
2. The preview border turns red
3. Interact with your site:
   • Click elements → Creates Click steps
   • Type in fields → Creates Fill steps
   • Navigate to pages → Creates Navigate steps
4. Click Stop to finish recording

What Gets Recorded vs What Doesn't

✅ Recorded Automatically	❌ Add Manually
Clicks on buttons, links	Hover interactions
Text input in form fields	Assert (verification) steps
Page navigation	Wait steps

Recording Tips

Recording Best Practices

• Plan ahead - Know what actions you want to record
• Go slowly - Give time for pages to load between actions
• Review after - Check the generated steps and adjust
• Add assertions - Recording doesn't add checks; add them manually

Focus Mode

Focus Mode hides WordPress admin UI elements for a distraction-free experience.

Enabling Focus Mode

• Access Focus Mode from the settings page
• Set "Default Focus Mode" to enabled
• The editor will open in focus mode by default

In Focus Mode

• WordPress admin bar is hidden
• Editor uses full screen
• More space for the preview and step list

Exiting Focus Mode

• Click Exit Focus Mode (if available)
• Or adjust in settings

Validation and Errors

The editor validates your flow and shows errors:

Flow-Level Validation

• Empty title - Flow must have a name
• No steps - Flow must contain at least one step

Step-Level Validation

• Required fields missing - Some fields are mandatory
• Invalid URLs - Navigate steps need valid URLs
• Invalid selectors - Syntax errors in CSS selectors
• Invalid values - Numbers out of range, etc.

Errors appear:

• On the Save button (disabled)
• On step cards (red border)
• In a toast notification
• In the configuration panel

Fix all errors before saving.

Tips for Building Great Flows

Building Flows Like a Pro

Do This	Why
Start with 2-3 steps	Build complexity gradually
Test after each addition	Fix issues immediately
Use realistic data	Tests match real behavior
Add assertions	Verify actions worked
Handle timing	Account for page load and AJAX

Naming Convention

Type	Example
Flow name	"Login - Valid User"
Step description	"Enter email address in login form"

Handle Timing

Common Timing Issues

• Add Wait steps for slow-loading elements
• Use appropriate timeouts in flow settings
• Account for animations and AJAX
• Don't make waits too short or too long

Common Workflows

Building a Login Flow

1. Click + Add Step → Select Navigate
2. Enter your login page URL → Add description "Open login page"
3. Click + Add Step → Select Fill
4. Pick the email input → Enter email → Add description "Enter email"
5. Click + Add Step → Select Fill
6. Pick the password input → Enter password → Add description "Enter password"
7. Click + Add Step → Select Click
8. Pick the submit button → Add description "Click login button"
9. Click + Add Step → Select Assert
10. Check for successful login indicator → Add description "Verify login succeeded"
11. Click Save

Building a Form Test

1. Navigate to form page
2. Fill each input field (one step per field)
3. Select dropdown options if present
4. Check checkboxes if needed
5. Click submit button
6. Assert success message appears
7. Save and run

Troubleshooting

Preview Won't Load

• Check the URL is correct
• Try refreshing the preview
• Check if the page has CORS restrictions
• Try loading a different page first

Can't Pick Elements

• Ensure selector mode is active (blue border)
• Try refreshing the preview
• Check if the element is in an iframe
• Enter the selector manually if needed

Steps Not Saving

• Check for validation errors (red borders)
• Ensure all required fields are filled
• Try clicking outside fields to blur them
• Check browser console for errors

Flow Won't Run

• Ensure there's at least one step
• Check all steps are valid (no red borders)
• Verify the flow is marked as Active
• Save before running

Next Steps

• Step Types - Learn about all available step types
• Running Flows - Understand how flows execute
• Settings - Configure editor preferences

Advanced Tips

Using DevTools

Open your browser's DevTools (F12) while editing:

• Inspect elements for selectors
• Debug preview loading issues
• View network requests
• Check console for errors

Selector Best Practices

Use stable selectors that won't break easily:

Good selectors:

• #unique-id - IDs (best)
• [data-test="my-element"] - Data attributes (great)
• nav > .menu-item:nth-child(3) - Specific structure

Avoid:

• .class1.class2.class3.class4 - Too specific
• div > div > div > span - Fragile structure
• .dynamic-class-a1b2c3 - Generated classes

Performance Tips

• Keep flows focused (under 20 steps if possible)
• Use appropriate timeouts (not too long)
• Remove unnecessary waits
• Disable screenshots if not needed