Beta: User flow automation

This feature is currently in beta for all clients. To learn more about it or provide feedback reach out to our team at beta@levelaccess.com.

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
  • Create a user flow
  • Add actions to a user flow
  • Add a scan point to a user flow
  • Save a user flow
• Run an automated scan with a user flow
• Check user flow scan results
• User flows page details
• Manage user flows
  • Edit an existing user flow
  • Reorder scan points and actions
  • Remove scan points or actions
• 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:

1. 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
2. Select Create user flow.
3. Choose Automated user flow.
4. Enter a user flow name.
5. 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:

1. Select Add action.
2. Choose the action type. Learn more about action types.
3. Fill in the action’s fields. Learn how to find CSS selectors.
4. 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.

Find CSS selectors

To find CSS selectors:

1. Go to the appropriate page of the user flow.
2. Find and right-click on the button, option, dropdown list, or element in the action. 
3. Select Inspect. Your browser console will open with the highlighted code.
4. Right-click on the highlighted code and select:
1. Copy>Copy Selector in Chrome.
2. Copy>Copy CSS Selector in Firefox.
3. 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.

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:

1. In your automated user flow, select Add scan point.
2. Choose Create new scan point.
3. Enter the scan point name. For example, Website landing page.
4. Enter the scan point description.
5. 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.
6. Enter the alternative text for the image. Learn more about writing alternative text.
7. Select Save.

Add a scan point

To add a scan point to your user flow:

1. In your automated user flow, select Add scan point.
2. Choose the scan point.
3. 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:

1. Go to Run automated scan.
2. Select Setup advanced scan. 
3. Enter the scan title.
4. Under How many webpages would you like to scan?, choose User flow.
5. Select the user flow you want to scan.
6. Fill out the remaining fields. Learn more about advanced scan options.
7. Select Run scan. You’ll be notified when the scan is complete.

Check user flow scan results

To check the results of your scan:

1. Go to Scans.
2. 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.
3. Select Scan results.
4. 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.

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:

1. Select Settings.
2. Choose User flows.
3. Select the three-dot action menu and choose Edit.
4. 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:

1. Find the scan point or action you want to reorder.
2. 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:

1. Find the scan point or action you want to remove.
2. Select Remove.

You can’t remove the first action.

Frequently asked questions

The table below includes some frequently asked questions about user flow automation.

<option value="DOG">Dog</option>
<option value="CAT">Cat</option>
<option value="HAMSTER">Hamster</option>

For additional questions about user flows, contact beta@levelaccess.com.