The Interface
Understanding the Flow Runner layout and navigation.
Sidebar: Flow Groups & Flows
The sidebar shows a two-level tree: Flow Groups at the top level, and Flows nested inside each group.
Sidebar Actions:
- •New Flow Group: Click the "+ New Flow Group" button at the top of the sidebar
- •Expand/Collapse: Click a group name to expand or collapse its flow list
- •Select a Flow: Click a flow name to load it in the design area
- •New Flow: Click "+ New Flow" inside an expanded group
- •Context Menu: Right-click a group for rename, delete, and environment options. Right-click a flow for rename, duplicate, and delete
Top Bar
The top bar displays navigation controls and breadcrumb information.
←|☰|⚡My API Tests›Login Flow
- •Back arrow (←): Close the Flow Runner and return to the main workspace
- •Hamburger (☰): Toggle the sidebar visibility
- •Breadcrumb: Shows Group Name › Flow Name
- •Unsaved indicator: An amber dot appears next to the flow name when there are unsaved changes
- •Save button: Appears only when changes are unsaved
Design Area
The main editing surface. A three-panel layout for building sequential flows:
Step List
⊕ Before All
POSTLogin
GETGet Profile
PUTUpdate Name
⊕ After All
Step Detail / Lifecycle Script / Execution Results
Select a step to configure its request, click Before All / After All to edit lifecycle scripts, or run the flow to see execution results here.
- •Step List (left): Shows all steps in order. Drag to reorder. Click to select and configure.
- •Sticky Before All / After All rails: The step list has a sticky Before All entry pinned to the top and a sticky After All entry pinned to the bottom. Click either to open the lifecycle script editor for that hook.
- •Action Bar (top): Contains the environment selector, Run/Stop button with options dropdown, Results panel toggle, Clear Results, and Export dropdown.
- •Run Options (dropdown): Click the arrow next to the Run button to access: Run with iterations, Parallel execution, Delay between steps, and Stop on failure toggle.
- •Detail Area (right): When a step is selected, shows the full HTTP request editor with Pre-Script and Post-Script tabs. When Before All / After All is selected, shows the lifecycle script editor. When nothing is selected, shows execution results.
Unsaved Changes Protection
The Flow Runner warns you before losing unsaved work. A confirmation dialog appears in two cases:
- •Closing the Flow Runner: If you have unsaved changes and click the back arrow, a dialog asks whether to close without saving
- •Switching flows: If you select a different flow in the sidebar while the current flow has unsaved changes, a dialog asks whether to switch without saving