Building Flows
Three ways to build a flow: accept an AI proposal, record one in Chrome, or assemble steps in the visual editor. All three end up as the same eight step types — described below.
Where flows come from
AI-generated
After a codebase scan, FlowGuard proposes flows for each page or critical route. Accept, modify, or reject.
Recorded
Install the Chrome extension, click record, walk through the journey. Steps are captured as you click and type.
Manual
Drag steps in the visual editor. Useful for variants of an existing flow or for pure API-driven scenarios.
Step types reference
Eight types — five action, three verification.
Click
Click an element.
| Option | Description |
|---|---|
selector | CSS selector or recorded data-testid. Auto-heal kicks in if it drifts. |
nth | Index when multiple elements match (default: first). |
force | Click even if the element isn't actionable (rare; use with care). |
Fill
Type into an input or textarea.
| Option | Description |
|---|---|
selector | Target input element. |
value | Literal text or {{variable}}. Secrets are redacted in logs and screenshots. |
clear_first | Clear the field before typing (default: true). |
Select
Pick an option from a <select> or custom dropdown.
| Option | Description |
|---|---|
selector | Target select element. |
value | Option value, label, or index — FlowGuard tries each in order. |
Wait
Pause until a condition holds (or fail).
| Option | Description |
|---|---|
for | selector | network-idle | url | timeout |
selector | When for=selector — the selector to wait on. |
timeout_ms | Hard ceiling, default 30,000 ms. |
Assert
DOM-based assertion. Fast and deterministic.
| Option | Description |
|---|---|
selector | Element to inspect. |
assertion | exists | not_exists | text_equals | text_contains | attr_equals |
expected | The value to compare against. |
Checkpoint
Claude vision verifies the screenshot matches a plain-English expectation.
| Option | Description |
|---|---|
expectation | "The dashboard shows 3 widget cards and the Add button is enabled." |
region | Optional CSS selector to crop to (default: full viewport). |
min_confidence | 0–1, default 0.8. Below this the step fails. |
Screenshot
Capture a screenshot. Always recorded for the run timeline.
| Option | Description |
|---|---|
full_page | Capture beyond the viewport (default: false). |
mask | Selectors to redact before saving (e.g. for PII). |
Variables
Per-flow values — emails, passwords, environment URLs, IDs. Reference inside any step option with {{my_variable}}. Mark a variable as secret to encrypt at rest and redact from logs and screenshots.
1{2 "type": "Fill",3 "selector": "input[name=email]",4 "value": "{{login_email}}"5}Override variables per environment so the same flow runs against staging and prod without forking. Variables are scoped to a flow — for tenant-wide secrets (e.g. an API token used by every flow), use an Application-level secret instead.
AI checkpoints in practice
Checkpoints answer the question Assert can't: does this page look right? Use them at decision points — after a navigation, after a form submit, on a dashboard load.
Good expectation
“The Orders table shows at least one row, the ‘Pending’ status pill is visible, and the ‘New Order’ button in the top right is enabled.”
Weak expectation
“The page loaded.” — too vague, will pass even when broken.
Failed checkpoints become tickets automatically when a ticket integration is configured. The ticket includes the screenshot, the expectation, Claude's rationale, and a deep link to the run.