1 00:00:00,000 --> 00:00:04,000 To add a user flow, navigate to your monitoring tab. 2 00:00:04,000 --> 00:00:08,000 inside of your workspace. Then click 3 00:00:08,000 --> 00:00:12,000 Add a New Dashboard. From here press 4 00:00:12,000 --> 00:00:16,000 User Flow. User flows are a way of 5 00:00:16,000 --> 00:00:20,000 modelling customer journeys through your products 6 00:00:20,000 --> 00:00:24,000 or websites. As an example we're gonna be 7 00:00:24,000 --> 00:00:28,000 modelling a user going to the TPGi.com website 8 00:00:28,000 --> 00:00:32,000 going to the ARC Platform Overview 9 00:00:32,000 --> 00:00:36,000 Browsing through 10 00:00:36,000 --> 00:00:40,000 and then pressing click, Sign Up For Free 11 00:00:40,000 --> 00:00:44,000 and then bringing them to the free, Sign Up form. 12 00:00:44,000 --> 00:00:48,000 So we're going to title this 13 00:00:48,000 --> 00:00:52,000 Sign Up Flow 14 00:00:52,000 --> 00:00:56,000 15 00:00:56,000 --> 00:01:00,000 We're going to configure this for Chrome Desktop 16 00:01:00,000 --> 00:01:04,000 and instead of a monthly schedule, we're going to put this on a weekly schedule 17 00:01:04,000 --> 00:01:08,000 There's a few different ways that you can create your 18 00:01:08,000 --> 00:01:12,000 user flow. You can start with a blank user flow, that will let you 19 00:01:12,000 --> 00:01:16,000 manually enter in the steps needed to do the action. 20 00:01:16,000 --> 00:01:20,000 Create a user flow from a list of URLs or you can record 21 00:01:20,000 --> 00:01:24,000 a Selenium script, using a product such as Katalon 22 00:01:24,000 --> 00:01:28,000 or Selenium Studio and import that Selenium 23 00:01:28,000 --> 00:01:32,000 XML to generate your user flow. To keep XML 24 00:01:32,000 --> 00:01:36,000 simple, we will be starting with a user flow from a list of URLs 25 00:01:36,000 --> 00:01:40,000 For your list 26 00:01:40,000 --> 00:01:44,000 of URLs, you'll need a text file, containing a list of the URLs. 27 00:01:44,000 --> 00:01:48,000 The way that they'll need to be formatted is, a URL 28 00:01:48,000 --> 00:01:52,000 on each line and each line containing three pieces 29 00:01:52,000 --> 00:01:56,000 of date, separated by semi colons: Title, semi-colon 30 00:01:56,000 --> 00:02:00,000 Description, semi-colon, and URL, semi-colon. 31 00:02:00,000 --> 00:02:04,000 In our case, we have three URLs 32 00:02:04,000 --> 00:02:08,000 Our home page, the ARC Platform 33 00:02:08,000 --> 00:02:12,000 page and the Free Sign Up Form page. 34 00:02:12,000 --> 00:02:16,000 35 00:02:16,000 --> 00:02:20,000 We can select 36 00:02:20,000 --> 00:02:24,000 the file and press next 37 00:02:24,000 --> 00:02:28,000 and then complete our dashboard. 38 00:02:28,000 --> 00:02:32,000 We'll then be taken to the dashboard, which won't have any data in it initially. 39 00:02:32,000 --> 00:02:36,000 There's one other step that we'll have take into consideration before can activate 40 00:02:36,000 --> 00:02:40,000 this flow. Go to Configuration. 41 00:02:40,000 --> 00:02:44,000 Verify that the 42 00:02:44,000 --> 00:02:48,000 flow is indeed what you'd like. In our case, we're 43 00:02:48,000 --> 00:02:52,000 opening each page and then analyzing the root document 44 00:02:52,000 --> 00:02:56,000 xpath slash HTML 45 00:02:56,000 --> 00:03:00,000 For analyzing individual components on 46 00:03:00,000 --> 00:03:04,000 pages, you can use the Xpath to that individual 47 00:03:04,000 --> 00:03:08,000 component or you can use CSS equals component 48 00:03:08,000 --> 00:03:12,000 or ID equals and provide the appropriate value 49 00:03:12,000 --> 00:03:16,000 to search for that individual component 50 00:03:16,000 --> 00:03:20,000 but right now, this will be great. So we'll come to 51 00:03:20,000 --> 00:03:24,000 actions in the User Flow Steps menu and press 52 00:03:24,000 --> 00:03:28,000 Initialize User Flow Steps. And confirm. 53 00:03:28,000 --> 00:03:32,000 This will run a process in the background 54 00:03:32,000 --> 00:03:36,000 that will set up your components and finish 55 00:03:36,000 --> 00:03:40,000 getting the user flow prepared. I'll be back 56 00:03:40,000 --> 00:03:44,000 once it's done. It's been a few minutes 57 00:03:44,000 --> 00:03:48,000 and our user flow has finished initialization. 58 00:03:48,000 --> 00:03:52,000 You can tell, whenever you come to User Flow Details on the 59 00:03:52,000 --> 00:03:56,000 Configuration page 'state' and then has been Initialized. 60 00:03:56,000 --> 00:04:00,000 Now that it's been initialized if we scroll 61 00:04:00,000 --> 00:04:04,000 down we'll see some screenshots of our components. In our 62 00:04:04,000 --> 00:04:08,000 cases, because these are full page components 63 00:04:08,000 --> 00:04:12,000 as snapshot of each of those entire pages. 64 00:04:12,000 --> 00:04:16,000 If we were to select an individual component with our 65 00:04:16,000 --> 00:04:20,000 selector, we would see that individual component in that thumbnail. 66 00:04:20,000 --> 00:04:24,000 This looks good. These are what I expected them 67 00:04:24,000 --> 00:04:28,000 to be for my user flow components, so 68 00:04:28,000 --> 00:04:32,000 to start the scan, we can come back to the Actions tab 69 00:04:32,000 --> 00:04:36,000 70 00:04:36,000 --> 00:04:40,000 and press Scan User Flow Steps 71 00:04:40,000 --> 00:04:44,000 This will now run 72 00:04:44,000 --> 00:04:48,000 on the analyzation steps for these flows 73 00:04:48,000 --> 00:04:52,000 as well as any steps in between. Once that's done 74 00:04:52,000 --> 00:04:56,000 our dashboard will be populated. I'll come back once 75 00:04:56,000 --> 00:05:00,000 it's done. The scan has 76 00:05:00,000 --> 00:05:04,000 completed a few moments later and now we can see the results 77 00:05:04,000 --> 00:05:08,000 of that scan. We can see that we have a WCAG 2.1 78 00:05:08,000 --> 00:05:12,000 of 16. Individual failures 79 00:05:12,000 --> 00:05:16,000 per page and a total of 48 failures across 80 00:05:16,000 --> 00:05:20,000 all three pages, including 6 color contrast failures. 81 00:05:20,000 --> 00:05:24,000 If we scroll down we can get additional information. 82 00:05:24,000 --> 00:05:28,000 including what the individual failures were, what 83 00:05:28,000 --> 00:05:32,000 the failures were on the engine, in both pie view 84 00:05:32,000 --> 00:05:36,000 and tabular view. Performance by each of our 85 00:05:36,000 --> 00:05:40,000 individual components 86 00:05:40,000 --> 00:05:44,000 Recommended Remediation and a summary of the assertions. 87 00:05:44,000 --> 00:05:48,000 This has been how to set up 88 00:05:48,000 --> 00:05:51,000 a user flow.