Step Types

Flowguard provides different step types to simulate various user actions. Each step type performs a specific action on your website.

Overview

Flowguard supports 10 step types organized in categories:

Navigation

Navigate

Interaction

ClickFillSelectCheckboxRadio

Verification

Assert

Timing

WaitScrollHover

Quick Reference

Most flows begin with: Navigate → (Interactions) → Assert. It's a good practice to end with: an Assert step to verify the action worked.

Common Flow Patterns

Navigate

→

Fill

→

Fill

→

Click

→

Assert

Email → Password → Submit → Verify

Form Submit

Navigate

→

Fill

→

Select

→

Click

→

Assert

Fields → Dropdown → Submit → Success

Checkout

Click

→

Navigate

→

Fill

→

Click

→

Assert

Add to Cart → Checkout → Pay → Confirm

Step Types List

Navigate (Open Page) - Visit a URL
Click - Click an element
Fill (Type Text) - Enter text into fields
Assert (Check) - Verify content or states
Wait - Pause execution
Scroll To - Scroll to an element
Hover - Trigger hover effects
Select Option - Choose from dropdowns
Checkbox - Toggle checkboxes
Radio - Select radio buttons

1. Navigate (Open Page)

Opens a specific URL in the browser.

Use Cases

Starting a test flow
Moving to different pages
Testing navigation
Loading specific content

Configuration

URL (required)

The full URL to visit
Must include protocol (http:// or https://)
Can be any page on your site

Description (optional)

Note about where you're navigating

Examples

URL: https://yoursite.com/contact
Description: Open contact form page

URL: https://yoursite.com/wp-admin
Description: Navigate to admin dashboard

Tips

Use Navigate to open specific pages you want to test
If you're testing elements already visible on the current page, you can start with other step types
Use full URLs, not relative paths
Verify the URL is correct before saving
Test that the page loads properly

Common Issues

Page not loading

Check the URL for typos
Ensure the page exists
Verify the site is accessible
Check for redirect loops

2. Click

Clicks on an element (button, link, etc.).

Use Cases

Submitting forms
Following links
Opening modals/popups
Toggling UI elements
Navigating menus

Configuration

Selector (required)

CSS selector for the target element
Use the picker tool or enter manually

Description (optional)

What you're clicking and why

Wait After (optional)

Milliseconds to wait after clicking

Examples

Selector: #submit-button
Description: Click the submit button
Wait After: 1000

Selector: nav .menu-item:first-child a
Description: Click first menu item

Selector: [data-test="login-btn"]
Description: Click login button
Wait After: 2000

Tips

Use the element picker for accuracy
Add wait time if clicking triggers animations
Verify the element is clickable (not hidden)
Use specific selectors to avoid clicking wrong elements

Common Issues

Element not found

Selector is incorrect
Element doesn't exist on the page
Element loads after page load (add a Wait step before)

Click doesn't work

Element is covered by another element
Element is not clickable (use different selector)
JavaScript event not attached yet (add wait time)

3. Fill (Type Text)

Enters text into input fields, textareas, or contenteditable elements.

Use Cases

Filling form fields
Entering search queries
Typing in text editors
Entering usernames/passwords

Configuration

Selector (required)

CSS selector for the input field

Text (required)

The text to enter

Description (optional)

What field you're filling

Clear First (optional)

Clear existing text before typing

Examples

Selector: #email
Text: user@example.com
Description: Enter email address
Clear First: Yes

Selector: input[name="search"]
Text: Flowguard Plugin
Description: Enter search query

Selector: #password
Text: SecurePass123!
Description: Enter password

Tips

Use "Clear First" to avoid appending to existing text
Use realistic test data
Remember passwords won't be visible in the UI
Add waits after filling if form validates on input

Common Issues

Text not appearing

Selector targets wrong element
Field is disabled or readonly
JavaScript overwrites the value

Partial text entered

Field has max length restriction
JavaScript validation interfering

4. Assert (Check)

Verifies that content or states match expectations.

Use Cases

Verify login succeeded
Check error messages appear
Confirm elements are visible
Validate content exists
Test redirects happened

Configuration

Selector (required for element-based checks)

Element to check (not required for page-level assertions like URL or Title checks)

Expected Value (required)

The type of check to perform (see all options below)

Value (for some assertion types)

The expected text or value to check against

Description (optional)

What you're verifying

All Assertion Types

Flowguard provides 16 assertion types organized in categories:

Visibility Checks

Type	Description	Requires Selector	Requires Value
Is Visible	Check if the element is visible on the page	Yes	No
Is Hidden	Check if the element is hidden or not displayed	Yes	No
Exists	Check if the element exists in the DOM	Yes	No
Does Not Exist	Check if the element does not exist	Yes	No

Text Content Checks

Type	Description	Requires Selector	Requires Value
Contains Text	Check if the element contains specific text	Yes	Yes
Equals Text	Check if the element text exactly matches	Yes	Yes

Form Input Checks

Type	Description	Requires Selector	Requires Value
Input Value Equals	Check if an input field value exactly matches	Yes	Yes
Input Value Contains	Check if an input field value contains text	Yes	Yes
Is Checked	Check if a checkbox or radio is selected	Yes	No
Is Not Checked	Check if a checkbox or radio is not selected	Yes	No
Is Disabled	Check if the element is disabled	Yes	No
Is Enabled	Check if the element is enabled and interactive	Yes	No

Attribute Checks

Type	Description	Requires Selector	Requires Value
Has CSS Class	Check if the element has a specific CSS class	Yes	Yes

Page Property Checks

Type	Description	Requires Selector	Requires Value
URL Contains	Check if the current page URL contains text	No	Yes
Title Contains	Check if the page title contains text	No	Yes

Advanced

Type	Description	Requires Selector	Requires Value
Custom...	Build complex conditions with visual builder or code	Depends	Depends

Examples

Check Element is Visible

Selector: .success-message
Expected Value: Is Visible
Description: Verify success message appears

Check Element Contains Text

Selector: .error-message
Expected Value: Contains Text
Value: Invalid email
Description: Verify error message shows

Check Input Field Value

Selector: #email-input
Expected Value: Input Value Equals
Value: user@example.com
Description: Verify email was entered correctly

Check Checkbox is Selected

Selector: #terms-checkbox
Expected Value: Is Checked
Description: Verify terms checkbox is checked

Check Button is Disabled

Selector: #submit-btn
Expected Value: Is Disabled
Description: Verify button is disabled before form is complete

Check Page URL After Redirect

Expected Value: URL Contains
Value: /dashboard
Description: Verify redirected to dashboard

Check Element Has CSS Class

Selector: .alert
Expected Value: Has CSS Class
Value: alert-success
Description: Verify alert has success styling

Custom Assertions

For complex validation logic that can't be achieved with the built-in assertion types, use the Custom option. This opens a modal with two modes:

Visual Builder

Build complex conditions using AND/OR logic without writing code:

Select Custom... from the Expected Value dropdown
Click Add Condition to add individual checks
Click Add Group to create nested condition groups
Click the AND/OR badge between conditions to toggle the operator
Combine multiple conditions for complex validations

Example: Check if either success message OR redirect happened

Condition 1: .success-message → Is Visible
OR
Condition 2: URL Contains → /thank-you

Example: Check multiple elements are visible

Condition 1: .header → Is Visible
AND
Condition 2: .content → Is Visible
AND
Condition 3: .footer → Is Visible

Code Editor

Write custom JavaScript code that runs in Playwright for maximum flexibility:

javascript

// Check element count
const count = await page.locator('.product-item').count();
if (count < 3) {
  throw new Error(`Expected at least 3 products, found ${count}`);
}

Available Variables:

page - Playwright Page object
element - Locator for the selector
selector - The CSS selector string
expect - Playwright expect function

Example: Check computed CSS style

javascript

const color = await element.evaluate(el =>
  getComputedStyle(el).backgroundColor
);
if (!color.includes('rgb(0, 128, 0)')) {
  throw new Error(`Expected green background, got ${color}`);
}

Example: Check localStorage value

javascript

const theme = await page.evaluate(() =>
  localStorage.getItem('theme')
);
if (theme !== 'dark') {
  throw new Error(`Expected dark theme, got ${theme}`);
}

Tips

Add assertions after important actions
Verify success messages and error states
Check redirects with URL assertions
Use "Contains" for partial matches, "Equals" for exact matches
Use Custom assertions for complex multi-condition checks
The Visual Builder is easier for beginners; Code Editor offers maximum power

Common Issues

Assertion fails unexpectedly

Element takes time to appear (add Wait before Assert)
Text doesn't match exactly (use "Contains" instead of "Equals")
Selector is wrong
Page changed since test was created

Custom assertion not working

Check for JavaScript syntax errors (use "Test syntax" button)
Ensure you throw an Error on failure (don't just return false)
Use await for all async operations

5. Wait

Pauses execution for a specified duration.

Use Cases

Waiting for slow-loading elements
Giving time for animations
Waiting for AJAX requests
Allowing time for redirects
Delaying between rapid actions

Configuration

Duration (required)

Time to wait in milliseconds
1000ms = 1 second

Description (optional)

Why you're waiting

Examples

Duration: 2000
Description: Wait for page to load

Duration: 500
Description: Wait for animation to complete

Duration: 3000
Description: Wait for AJAX request

Tips

Use waits sparingly (they slow down tests)
Add waits after navigation
Wait after triggering animations
Consider dynamic waits (future feature)
Don't rely on waits to fix flaky tests

Common Issues

Wait not long enough

Increase duration
Check if element needs more time

Test too slow

Reduce wait times
Remove unnecessary waits
Use assertions instead of arbitrary waits

6. Scroll To

Scrolls the page to bring an element into view.

Use Cases

Revealing elements below the fold
Triggering lazy-loading
Scrolling to form sections
Reaching footer content

Configuration

Selector (required)

Element to scroll to

Description (optional)

What you're scrolling to

Scroll Behavior (optional)

Smooth or instant

Examples

Selector: #contact-form
Description: Scroll to contact form
Scroll Behavior: Smooth

Selector: footer
Description: Scroll to page footer

Tips

Add scroll steps before interacting with off-screen elements
Use smooth scrolling for realistic user simulation
Scroll before clicking elements that may be covered
Combine with waits if scrolling triggers lazy loading

Common Issues

Element not scrolling into view

Selector doesn't match any element
Element is already in view
Page layout prevents scrolling

7. Hover

Moves the mouse over an element to trigger hover effects.

Use Cases

Revealing dropdown menus
Showing tooltips
Triggering hover animations
Testing :hover CSS states
Activating mega menus

Configuration

Selector (required)

Element to hover over

Description (optional)

What you're hovering

Hold Duration (optional)

How long to hover (milliseconds)

Examples

Selector: nav .menu-item
Description: Hover over menu to show dropdown
Hold Duration: 500

Selector: .tooltip-trigger
Description: Hover to show tooltip

Tips

Use hover before clicking dropdown items
Add hold duration for animated menus
Test hover effects in the preview first
Remember mobile devices don't have hover

Common Issues

Hover effect doesn't trigger

Element requires longer hover time
JavaScript hover handler not working
CSS :hover not applied in test environment

8. Select Option

Chooses an option from a dropdown (select element).

Use Cases

Selecting from dropdown menus
Choosing country/state
Picking quantities
Selecting categories

Configuration

Selector (required)

CSS selector for the <select> element

Option Value (required)

The value attribute of the option to select
Or the visible text of the option

Description (optional)

What you're selecting

Match By (optional)

Value or Label

Examples

Selector: #country
Option Value: US
Match By: Value
Description: Select United States

Selector: select[name="quantity"]
Option Value: 5
Match By: Label
Description: Select quantity 5

Tips

Use the value attribute when possible (more reliable)
Use label when value is not user-friendly
Inspect the select element to see available values
Test that the option exists in the dropdown

Common Issues

Option not found

Option value is incorrect
Option is added dynamically (add Wait before Select)
Using wrong Match By method

Select doesn't change

Selector targets wrong element
JavaScript prevents selection
Option is disabled

9. Checkbox (Toggle Checkbox)

Checks or unchecks a checkbox.

Use Cases

Accepting terms and conditions
Enabling options
Selecting multiple items
Toggling settings

Configuration

Selector (required)

CSS selector for the checkbox input

Action (required)

Check, Uncheck, or Toggle

Description (optional)

What you're checking

Examples

Selector: #terms-agree
Action: Check
Description: Accept terms and conditions

Selector: input[name="newsletter"]
Action: Uncheck
Description: Opt out of newsletter

Selector: .option-checkbox
Action: Toggle
Description: Toggle option

Tips

Use "Check" or "Uncheck" for predictable results
Use "Toggle" if initial state is unknown
Verify checkbox changes with an Assert step
Check if labels are clickable instead of checkbox

Common Issues

Checkbox doesn't change

Selector targets label, not input
Checkbox is disabled
JavaScript prevents change

Wrong checkbox checked

Selector matches multiple checkboxes
Use more specific selector

10. Radio (Select Radio Button)

Selects a radio button from a group.

Use Cases

Choosing payment methods
Selecting options
Answering quiz questions
Choosing shipping methods

Configuration

Selector (required)

CSS selector for the radio input

Description (optional)

What you're selecting

Examples

Selector: input[name="payment"][value="credit-card"]
Description: Select credit card payment

Selector: #shipping-express
Description: Select express shipping

Tips

Use name and value attributes in selector
Only one radio in a group can be selected
Verify selection with an Assert step
Check if labels are clickable

Common Issues

Radio doesn't select

Selector targets label, not input
Radio is disabled
JavaScript prevents selection

Wrong radio selected

Multiple radios match selector
Use value attribute for specificity

Combining Step Types

Effective flows use multiple step types together:

Navigate - Open login page (if not already there)
Fill - Enter username
Fill - Enter password
Click - Click login button
Wait - Wait for redirect
Assert - Verify on dashboard

TIP

If you're already on the login page, you can skip the Navigate step and start directly with filling in the form fields.

Form Submission Example

Navigate - Open form page
Scroll To - Scroll to form
Fill - Enter name
Fill - Enter email
Select - Choose country
Checkbox - Accept terms
Click - Submit form
Wait - Wait for response
Assert - Verify success message

Navigate - Open homepage
Hover - Hover over menu item
Wait - Wait for dropdown
Click - Click submenu item
Assert - Verify correct page loaded

Best Practices

Use the Right Step Type

Use Navigate for URLs, not Click on links (when testing navigation itself)
Use Fill for text, not Click + type
Use Select for dropdowns, not Click + Click

Add Descriptions

Always describe what each step does:

✅ "Click submit button in contact form"
❌ No description

Verify Actions

Add Assert steps after important actions:

After login → Assert dashboard visible
After form submit → Assert success message
After search → Assert results appear

Handle Timing

Add Wait after navigation
Wait after actions that trigger AJAX
Use appropriate timeouts

Test Incrementally

Add one step at a time
Test after each addition
Fix issues immediately

Next Steps

Running Flows - Learn how to execute and monitor flows
Flow Editor - Master the editor interface
Settings - Configure default behaviors

Troubleshooting

Step Always Fails

Check selector is correct
Verify element exists on page
Add Wait before the step
Test manually in preview

Selector Doesn't Work

Inspect element in DevTools
Use more specific selector
Check for dynamic IDs or classes
Try data attributes

Timing Issues

Add Wait steps between actions
Increase step timeout
Check for slow-loading elements
Verify AJAX requests complete

Element Not Interactable

Scroll to element first
Check if element is covered
Verify element is visible
Wait for animations to complete

Step Types ​

Overview ​

Common Flow Patterns ​

Step Types List ​

1. Navigate (Open Page) ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

2. Click ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

3. Fill (Type Text) ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

4. Assert (Check) ​

Use Cases ​

Configuration ​

All Assertion Types ​

Visibility Checks ​

Text Content Checks ​

Form Input Checks ​

Attribute Checks ​

Page Property Checks ​

Advanced ​

Examples ​

Check Element is Visible ​

Check Element Contains Text ​

Check Input Field Value ​

Check Checkbox is Selected ​

Check Button is Disabled ​

Check Page URL After Redirect ​

Check Element Has CSS Class ​

Custom Assertions ​

Visual Builder ​

Code Editor ​

Tips ​

Common Issues ​

5. Wait ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

6. Scroll To ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

7. Hover ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

8. Select Option ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

9. Checkbox (Toggle Checkbox) ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Common Issues ​

10. Radio (Select Radio Button) ​

Use Cases ​

Configuration ​

Examples ​

Tips ​

Step Types

Overview

Common Flow Patterns

Step Types List

1. Navigate (Open Page)

Use Cases

Configuration

Examples

Tips

Common Issues

2. Click

Use Cases

Configuration

Examples

Tips

Common Issues

3. Fill (Type Text)

Use Cases

Configuration

Examples

Tips

Common Issues

4. Assert (Check)

Use Cases

Configuration

All Assertion Types

Visibility Checks

Text Content Checks

Form Input Checks

Attribute Checks

Page Property Checks

Advanced

Examples

Check Element is Visible

Check Element Contains Text

Check Input Field Value

Check Checkbox is Selected

Check Button is Disabled

Check Page URL After Redirect

Check Element Has CSS Class

Custom Assertions

Visual Builder

Code Editor

Tips

Common Issues

5. Wait

Use Cases

Configuration

Examples

Tips

Common Issues

6. Scroll To

Use Cases

Configuration

Examples

Tips

Common Issues

7. Hover

Use Cases

Configuration

Examples

Tips

Common Issues

8. Select Option

Use Cases

Configuration

Examples

Tips

Common Issues

9. Checkbox (Toggle Checkbox)

Use Cases

Configuration

Examples

Tips

Common Issues

10. Radio (Select Radio Button)

Use Cases

Configuration

Examples

Tips