This feature is currently in beta for all clients. To learn more about it or provide feedback reach out to our team at firstname.lastname@example.org.
Scan user flows from the platform to test the accessibility of what matters most to your customers. Automated user flow testing tests common steps and interactions in consecutive order. Automated user flow testing:
- Saves you and your team time and effort.
- Allows you to prioritize the accessibility of critical flows.
- Lets you test more flows at a higher frequency.
- Works on single-page applications by letting you scan a URL more than once in a single scan.
On this page:
- About user flows
- Set up a user flow
- Run an automated scan with a user flow
- Check user flow scan results
- User flows page details
- Manage user flows
- Frequently asked questions
About user flows
A user flow is a set of steps and interactions taken by a user to achieve a goal. For example, searching for a product, adding the product to the basket, and proceeding through checkout.
Each flow consists of a series of scan points and actions that you can use in an advanced scan. The platform supports up to 100 scan points and actions per user flow and an unlimited number of user flows.
Scan points trigger the automated scanning tools to run a scan after a set of user flow actions. Every user flow needs at least one scan point. For each scan point, you can include a name, description, and screenshot of the page where the scan takes place. The name, description, and screenshot are not scanned. They’re used as a reference to identify where you’re scanning in the user flow. Once you’ve created scan points, you can reuse them for different user flows.
Scan points live at the digital property level of the platform. All users can access existing scan points.
Actions are an interaction between the user and page. For example, open or click. Actions use user interactions with the applicable CSS selector and/or value of the component. Learn more about CSS selectors.
Set up a user flow
Before setting up a user flow, consider the following:
- If it’s your first user flow, set up a simple user flow to get used to the feature.
- It’s best practice to use the Wait for element after you load a new page.
- To increase security, start user flows with authentication details after the login page, that way you can add authentication details in your advanced scan settings.
Create a user flow
The Guided user flow option is not functional. If you set up a guided user flow, the user flow won't be available in the advanced scan settings.
To create a user flow:
- Enter your platform URL with /settings/user-flows at the end of the string. For example, https://yourcompany.dashboard.com/settings/user-flows or https://yourcompany.hub.essentia11y.com/settings/user-flows
- Select Create user flow.
- Choose Automated user flow.
- Enter a user flow name.
- Enter the URL for the first page of your flow.
Add actions to a user flow
- Any authentication details in the middle of a user flow must be added as an action.
- Any authentication details at the beginning of a user flow can be added in the advanced scan set up.
Add an action
To add an action to a user flow:
- Select Add action.
- Choose the action type. Learn more about action types.
- Fill in the action’s fields. Learn how to find CSS selectors.
- Repeat steps 1-3 for each action on the first page of the user flow.
Once you’ve entered your first set of actions, you can add the next scan point.
If there are any changes to your webpage, you’ll need to update the action data. For example, a value changes or a CSS selector changes.
User flow actions
Automated user flow scanning supports five actions listed in the table below.
|Open||Opens the provided URL.||https://yourcompany.com||You must include https:// in the URL.|
|Click||Clicks a button or an option using the CSS selector.||#mainContainer > div > div > app-logout > div > div> div > a|
|Type||Fills in a value in a free-form email@example.com||You must use the click action on a field element before typing.|
|Wait for element||Waits for the element to load using the CSS selector.||#loginPage > div > div.card-body > div > div > form||Selectors must be fixed, not dynamic, so the action can be completed.|
|Dropdown||Selects from a dropdown list using the CSS selector and specified value.||
#app-header > nav > div.row.w-100.ng-star-inserted > div > div.user-menu.d-none.d-sm-flex > div.user-menu-dropdown.position-relative > button
|Dropdown only works with pure HTML dropdowns. If the Dropdown action isn’t working, try using the Click action to open the dropdown and select the desired value.|
Find CSS selectors
To find CSS selectors:
- Go to the appropriate page of the user flow.
- Find and right-click on the button, option, dropdown list, or element in the action.
- Select Inspect. Your browser console will open with the highlighted code.
- Right-click on the highlighted code and select:
- Copy>Copy Selector in Chrome.
- Copy>Copy CSS Selector in Firefox.
- Copy>Copy Selector in Edge.
The CSS selector is now copied and you can paste it into the action field. Learn more about CSS selectors.
CSS selector reference table
The table below outlines CSS selector attributes and corresponding symbols. For more detailed information on CSS selectors, visit CSS Attribute Selector.
|Using class name||.|
|Using multiple attribute||[attribute1='value1'][attribute2='value2']|
Add a scan point to a user flow
Create a scan point
To add a scan point to your user flow, you’ll need to create a new scan point for the next step of the user flow.
To create a scan point:
- In your automated user flow, select Add scan point.
- Choose Create new scan point.
- Enter the scan point name. For example, Website landing page.
- Enter the scan point description.
- Select or drag and drop the screenshot. Note that the screenshot must be .PNG, .JPG, or .JPEG and have a maximum file size of 5 MB.
- Enter the alternative text for the image. Learn more about writing alternative text.
- Select Save.
Add a scan point
To add a scan point to your user flow:
- In your automated user flow, select Add scan point.
- Choose the scan point.
- Select Add scan point.
Save a user flow
Once you’ve added all the scan points and actions in the appropriate order, you can save your user flow to be used in an advanced scan.
To save your user flow:
- On the create automated user flow page, select Save.
Run an automated scan with a user flow
To run an automated scan on a user flow:
- Go to Run automated scan.
- Select Setup advanced scan.
- Enter the scan title.
- Under How many webpages would you like to scan?, choose User flow.
- Select the user flow you want to scan.
- Fill out the remaining fields. Learn more about advanced scan options.
- Select Run scan. You’ll be notified when the scan is complete.
Check user flow scan results
To check the results of your scan:
- Go to Scans.
- From the Scans list, find your user flow scan. Can’t find your scan? Filter the scans list using the Automated user flow scan tag.
- Select Scan results.
- To review the results for each scan point, select the scan point name.
User flows page details
The table below describes the data on the user flows page.
User flow name
The name you gave the User flow when you created it.
Select the user flow name to go to the user flow details page.
The date of the last scan run on this user flow.
The health score of the user flow from the last time a scan was run.
The status will show the status Scan incomplete if the scan failed.
|Actions||Three-dot action menu with options to edit or delete the User flow.|
Manage user flows
Edit an existing user flow
You may need to edit an existing user flow as the page changes. For example, if a button has moved or a CSS selector has changed.
To edit an existing automated user flow:
- Select Settings.
- Choose User flows.
- Select the three-dot action menu and choose Edit.
- Make your changes and select Save.
Reorder scan points and actions
You can easily reorder your scan points and actions in your user flows.
To reorder scan points and actions:
- Find the scan point or action you want to reorder.
- Select the up or down arrow.
Remove scan points or actions
You may need to remove a scan point or action from a user flow because of changes to your user flow or if one was accidentally added.
To remove an scan point or action from a user flow:
- Find the scan point or action you want to remove.
- Select Remove.
You can’t remove the first action.
Frequently asked questions
The table below includes some frequently asked questions about user flow automation.
|I received a scan error on my user flow with no additional information. How can I determine and fix the problem?||
When the scan results report an error without any details, it means the scan failed before reaching the first scan point.
Check all the actions before the first scan point to make sure they're accurate.
|When should I use the action Dropdown on the user flow set up?||
Use the Dropdown action in user flows with native HTML dropdown elements. To set up the dropdown action, define the CSS selector of the dropdown element and the value that you want selected.
If you use custom dropdowns from frameworks such as Bootstrap, you might need to use a combination of the regular actions Click (to point the CSS selector of the dropdown) and Type (to determine the content to be chosen/selected within the dropdown).
The Dropdown action was designed to work with pure HTML dropdowns.
|How do I define the field Value of a Dropdown action?||
Use what's in the attribute value in the HTML tag of your dropdown.
For example, there's a dropdown with the following values:
To select Dog from the dropdown in your user flow, enter Dog in the field Value.
|Do User Flows work with multi/dual-factor authentication or One-time password (OTP)?||
User flows doesn't currently support multi/dual-factor authentication or OTP .
User flows only supports secure web authentication and basic authentication.
As a work around, you can set up the authentication step in the user flow by using the Password action type.
|Do User Flows support iframes?||User flows doesn't currently support iframes.|
For additional questions about user flows, contact firstname.lastname@example.org.