Set up an automated flow

Who can use this feature?

• Available for Essentials, Accelerate, and Enterprise.

Scan automated flows from the platform to test the accessibility of what matters most to your customers. Build automated flows to test common steps and interactions within a user journey, up to 500 actions per flow.

With automated flows, you can test:

• Key user flows.
• Interactive elements.
• Dynamically generated content. 
• Single-page experiences. 

To learn more about the basics of automated flows, check out Get started with automated flows.

Note that you can't currently delete automated flows from the platform. Keep this limitation in mind before you create an automated flow.

On this page:

• Manually create an automated flow
  • Manually create an automated flow video tutorial
  • Create an automated flow
  • Add actions
  • Find CSS selectors
  • Reorder actions
  • Remove actions
• Create an automated flow with Chrome Recorder
  • Create and automated flow with Chrome Recorder video tutorial
  • Record a flow with the Chrome Recorder
  • Export the recording
  • Create an automated flow with a JSON file
  • Link the scan point to a page
• Action details
• CSS selector reference table

Manually create an automated flow

Manually create an automated flow video tutorial

Create an automated flow

To create an automated flow:

1. Go to Websites/apps.
2. Choose the website/app you want to create the flow for.
3. Select Scans.
4. Choose Automated flows.
5. Select Add automated flow.
6. Enter the of name the automated flow.
7. Enter the URL for the first page of your flow.

Add actions

• Any authentication details in the middle of an automated flow must be added as an action.
• Any authentication details at the beginning of an automated flow can be added in the advanced scan set up.
• It's best practice to use the Wait for element after you load a new page.

To add actions to an automated flow:

1. Select Add action.
2. Choose the action. Learn more about actions.
3. Fill in the action target. Learn how to find CSS selectors.
4. Repeat steps 1-3 for each action on the first page of the automated.
5. When you're ready to add a scan trigger, select Scan as the action.
6. Choose Select page.
7. Select the page you want to scan from the Page repository or add a new page.
8. Choose Select page.
9. Once the automated flow is complete and in the appropriate order, select Save. You can now use the automated flow in an advanced scan.

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.

Find CSS selectors

To find CSS selectors:

1. Go to the appropriate page of the 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.

Reorder actions

You can easily reorder your actions in an automated flow.

To reorder actions:

1. Find the action you want to reorder.
2. Select the up or down arrow.

Remove actions

You may need to remove an action from an automated flow if one was accidentally added.

To remove an action from an automated flow:

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

Create an automated flow with Chrome Recorder

Creating automated flows just got easier! Save time and reduce manual errors by recording your automated flow with the Chrome recorder extension and importing the JSON files to the platform.

Note that:

• The Chrome Recorder accesses and saves all the information in the flow recording. You should:
  • Always use test accounts for any log ins and never use your real accounts.
  • Consult your IT security policies before recording any intellectual property.
• Always review the imported flow and make changes if necessary.
• You can’t currently import JSON files to existing automated flows.

Create an automated flow with Chrome Recorder video tutorial

Record a flow with the Chrome Recorder

The Chrome Recorder accesses and saves all the information in the flow recording. You should:

• Always use test accounts for any log ins and never use your real accounts.
• Consult your IT security policies before recording any intellectual property.

To record a flow with the Chrome Recorder:

1. Go to the page where you want to start your flow.
2. Right-click on the page and select Inspect.
3. In the DevTools Console, select Recorder.If you can't find Recorder, select More (>>) to expand the menu.
4. Select Create a new recording.
5. Enter the recording name.
6. Select Start recording.
7. Perform all the actions in your flow.
8. Select End recording.

Export the recording

To export the recording:

1. Select Export from the chrome recorder toolbar. 
2. Choose JSON.
3. Select Save.

Create an automated flow with a JSON file

To create an automated flow:

1. Go to Websites/apps.
2. Choose the website/app you want to create the flow for.
3. Select Scans.
4. Choose Automated flows.
5. Select Add automated flow.
6. Enter the automated flow name.
7. Select Import JSON from Chrome Recorder.
8. Choose the JSON file and select Open.

Link the scan point to a page

The chrome recorder allows you to easily import all the actions in an automated flow but doesn't include the page for each scan point. Before saving the automated flow, you'll need to manually link the scan points to pages. You can easily identify imported scan points because they will say "Link this scan to a page."

To link scan points to page:

1. Find the scan point.
2. Select Select page.
3. Select the page you want to scan from the Page repository or add a new page.
4. Choose Select page.
5. Repeat steps 1-4 for each scan point.
6. Review your flow.
7. Select Save.

If you don't want to include an imported scan point:

• Find the scan point and select Remove.

Action details

Automated flow scanning supports seven actions listed in the table below.

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.