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:

Category	Step Types	Purpose
Navigation	Navigate	Move between pages
Interaction	Click, Fill, Select, Checkbox, Radio	User input actions
Verification	Assert	Confirm expected results
Timing	Wait, Scroll, Hover	Flow control and visibility

Quick Reference

• Most flows begin with: Navigate → (Interactions) → Assert
• Always end with: An Assert step to verify the action worked :::

Step Types List

1. Navigate (Open Page) - Visit a URL
2. Click - Click an element
3. Fill (Type Text) - Enter text into fields
4. Assert (Check) - Verify content or states
5. Wait - Pause execution
6. Scroll To - Scroll to an element
7. Hover - Trigger hover effects
8. Select Option - Choose from dropdowns
9. Checkbox - Toggle checkboxes
10. 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 (usually required)

• Element to check (depending on assertion type)

Assertion Type (required)

• Element is visible
• Element exists
• Element contains text
• Element has attribute
• Page URL contains
• Page URL is
• Page title contains

Expected Value (for some assertions)

• The value to check against

Description (optional)

• What you're verifying

Assertion Types Explained

Element is Visible

Checks if an element is displayed on the page.

Selector: .success-message
Assertion: Element is visible
Description: Verify success message appears

Element Exists

Checks if an element is in the DOM (may not be visible).

Selector: #hidden-field
Assertion: Element exists
Description: Verify hidden field is present

Element Contains Text

Checks if element's text includes specific content.

Selector: .error-message
Assertion: Element contains text
Expected Value: Invalid email
Description: Verify error message shows

Element Has Attribute

Checks if element has a specific attribute value.

Selector: #submit-btn
Assertion: Element has attribute
Expected Value: disabled
Description: Verify button is disabled

Page URL Contains

Checks if current URL includes specific text.

Assertion: Page URL contains
Expected Value: /dashboard
Description: Verify redirected to dashboard

Page URL Is

Checks if current URL matches exactly.

Assertion: Page URL is
Expected Value: https://yoursite.com/success
Description: Verify on success page

Page Title Contains

Checks if page title includes specific text.

Assertion: Page title contains
Expected Value: Dashboard
Description: Verify page title

Tips

• Add assertions after important actions
• Verify success messages and error states
• Check redirects with URL assertions
• Use "contains" for partial matches
• Use "is" for exact matches

Common Issues

Assertion fails unexpectedly

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

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:

Login Flow Example

1. Navigate - Open login page (if not already there)
2. Fill - Enter username
3. Fill - Enter password
4. Click - Click login button
5. Wait - Wait for redirect
6. 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

1. Navigate - Open form page
2. Scroll To - Scroll to form
3. Fill - Enter name
4. Fill - Enter email
5. Select - Choose country
6. Checkbox - Accept terms
7. Click - Submit form
8. Wait - Wait for response
9. Assert - Verify success message

Menu Navigation Example

1. Navigate - Open homepage
2. Hover - Hover over menu item
3. Wait - Wait for dropdown
4. Click - Click submenu item
5. 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