Getting Started

Welcome to Flowguard! This guide will help you get started with creating automated test flows for your WordPress site.

What You'll Learn

• How to access Flowguard in WordPress
• Understanding flows and steps
• Creating your first test flow
• Running and viewing results

Prerequisites

Before you begin, make sure:

• Flowguard plugin is installed and activated on your WordPress site
• You have admin access to WordPress
• Your site is accessible via browser

Accessing Flowguard

Once the plugin is activated, you can access Flowguard from your WordPress admin panel:

1. Log into your WordPress admin dashboard
2. Look for Flowguard in the left sidebar menu
3. Click on Flowguard to open the plugin

You'll land on the Dashboard, which gives you an overview of all your test flows.

Understanding Key Concepts

Flows

A flow is a sequence of automated actions that tests a specific user journey or feature on your website. For example:

• Testing if users can log in successfully
• Verifying that a contact form submits correctly
• Checking if products can be added to cart
• Ensuring search functionality works

Each flow has:

• A title to identify it
• A status (active or inactive)
• A series of steps that define what actions to perform
• Results from the last time it was run

Steps

Steps are individual actions within a flow. Each step performs a specific task, such as:

• Opening a page
• Clicking a button
• Filling out a form field
• Verifying that certain content appears

Steps are executed in order, one after another, to simulate how a real user would interact with your site.

TIP

Flows often start with a Navigate step to open a specific page, but this isn't required. If you're testing elements on the currently visible page, you can start with any step type (Click, Fill, Assert, etc.).

Creating Your First Flow

Let's create a simple test flow that opens your homepage and verifies the site title is visible.

Step 1: Navigate to Flows

1. Click on Flows in the Flowguard sidebar
2. Click the Create Flow button in the top-right corner

Step 2: Name Your Flow

1. In the flow editor, you'll see a text input at the top center
2. Enter a descriptive name, like "Homepage Test"
3. The flow is automatically set to Active status (indicated by the green button)

Step 3: Add Steps

You can add steps in two ways:

Option A: Use Recording Mode (Recommended for Beginners) 🎥

Recording Mode is the fastest way to create flows. Flowguard watches your interactions and automatically generates the steps!

1. Click the Record button in the left panel
2. The preview border turns red, indicating recording is active
3. In the preview panel, enter your homepage URL and click Load page
4. Once loaded, interact with your site:
   • Click on elements you want to test
   • Fill in form fields
   • Navigate to different pages
5. Click Stop to finish recording
6. Flowguard automatically created steps for all your actions!
7. Add an Assert step manually to verify the site title is visible

TIP

Recording mode captures clicks, typing, and navigation automatically. You'll need to add verification steps (Assertions) manually afterward to check that things worked correctly.

Option B: Add Steps Manually

If you prefer more control, you can add each step individually:

Add a Navigate Step

1. Click the + Add Step button in the left panel
2. Select Open Page from the menu
3. In the configuration panel at the bottom:
   • Enter your site's URL in the URL field
   • Add a description like "Open homepage"
   • Click outside or press Enter to confirm

Add an Assert Step

1. Click + Add Step again
2. Select Check from the menu
3. In the configuration panel:
   • Click Pick element to activate selector mode
   • In the preview panel, enter your homepage URL and click Load page
   • Once the page loads, click on your site title or main heading
   • The selector will be automatically filled in
   • Choose an assertion type (e.g., "Element is visible")
   • Add a description like "Verify site title appears"

---

Step 4: Save Your Flow

1. Click the Save button in the top-right corner
2. You'll see a success message confirming your flow was saved

Step 5: Run Your Flow

1. You'll be taken back to the Flows list
2. Find your "Homepage Test" flow
3. Click the Run Flow button (play icon)
4. Watch as the flow executes
5. View the results - you should see "Passed" with a green checkmark

Congratulations! 🎉 You've created and run your first test flow.

Understanding the Flow Editor

The flow editor is divided into several sections:

Header

• Back button - Return to the flows list
• Flow title - Edit your flow name
• Status toggle - Switch between Active/Inactive
• Save button - Save your changes

Left Panel: Step List

Shows all steps in your flow. You can:

• Click a step to configure it
• Drag steps to reorder them
• Duplicate or delete steps
• Add new steps with the + Add Step button

Center: Live Preview

Displays your website in an embedded browser. You can:

• Enter any URL to preview
• Click elements to select them (in selector mode)
• See your site in real-time while building flows

Bottom Panel: Step Configuration

When you select a step, this panel appears with:

• Step type information
• Configuration fields (URL, selector, text, etc.)
• Element picker button
• Description field

Common Actions

Activating/Deactivating Flows

• Active flows can be run manually or automatically
• Inactive flows are paused and won't execute
• Toggle status with the button in the flow editor or flows list

Editing a Flow

1. Go to Flows in the sidebar
2. Click on the flow you want to edit
3. Make your changes
4. Click Save

Duplicating a Flow

1. In the Flows list, hover over a flow
2. Click the three-dot menu
3. Select Duplicate
4. A copy will be created with "(Copy)" added to the name

Deleting a Flow

1. In the Flows list, hover over a flow
2. Click the three-dot menu
3. Select Delete
4. Confirm the deletion

Tips for Beginners

Use Recording Mode

Recording mode is your best friend! It's the easiest way to create flows:

• Just click "Record" and interact with your site
• Flowguard automatically generates the steps
• Perfect for quickly capturing user workflows
• Add assertions afterward to verify results

Start Simple

Begin with simple flows that test basic functionality:

• Can your homepage load?
• Does the navigation menu work?
• Can users access the login page?

Use Descriptive Names

Give your flows and steps clear, descriptive names:

• ✅ Good: "Test Contact Form Submission"
• ❌ Poor: "Test 1"

Add Descriptions to Steps

The description field helps you (and others) understand what each step does. Be specific:

• ✅ Good: "Click the 'Submit' button in the contact form"
• ❌ Poor: "Click button"

Test After Changes

Run your flows after making changes to your site:

• After updating WordPress or plugins
• After modifying themes
• After adding new features

Use the Live Preview

The live preview is your friend! Load your pages in the preview to:

• See exactly what users will see
• Pick elements accurately with the selector tool
• Verify your site loads correctly

Next Steps

Now that you've created your first flow, explore more features:

• Dashboard - Learn about monitoring and statistics
• Managing Flows - Advanced flow management techniques
• Flow Editor - Deep dive into the editor interface
• Step Types - Learn about all available step types
• Website Monitoring - Set up automated site monitoring
• PDF Reports - Generate professional reports from monitoring data
• WooCommerce Testing - Test WooCommerce checkouts safely

Need Help?

If you encounter any issues or have questions:

1. Check the relevant section in the User Guide
2. Review the Developer Reference for technical details
3. Contact support for assistance

Happy testing! 🚀