What are selectors in UiPath


Youtube link

German subtitles

0:07 Hello and welcome to the UiPath Essentials training, Selektors.
0:11 In this tutorial, we're going to look at Selectors, a fundamental part of UiPath Studio, and Automation
0:18 in general
0:19 By the end of this video you will know what these are, how they work, how you make your own
0:23 Build selectors, and how to find bugs are supposed to not work as expected.
0:28 To take full advantage of this workout, you should understand the basics: recordings too
0:32 Use to create automations ... and manually add actions to adjust the workflow.
0:38 So let's get started!
0:41 Selektors have certainly met you a number of times in automation.
0:46 That has to do with the fact that all interactive activities - like clicking and tapping - have a selector ...
0:51 And it usually looks like this ...
0:54 But before we get into the details, let's talk a little more about user interfaces.
1:01 User interfaces or UIs - like this one, for a notepad - use a number of
1:06 Containers that are nested inside each other.
1:14 HTML web pages work in a very similar way.
1:22 To illustrate this better, we use a UI Explorer, which can be found here in the toolbar ...
1:28 And the Notepad app as a test object.
1:30 We press this button to indicate which element we want to analyze ... and click
1:35 In the editable area.
1:37 In the UI Explorer, this is the special selector for the element we just clicked on, and on the left
1:42 page, the whole UI tree with all the nested elements is displayed - comparable to a folder tree.
1:48 We turn on highlighting to see the yellow rectangles that indicate the selected items.
1:53 in real time.
1:55 Notice that in order to find the editable field, we are at the largest
1:59 Start the container - the desktop - and go through each of the following:
2:04 The whole Notepad application,
2:08 the container, which contains a number of elements like the scroll bar, the menu, etc.
2:11 .... and inside, our editable field.
2:18 So that each “folder”, if you will, an item that can contain other child items.
2:23 UI hierarchies can go much deeper than the 3 levels we have when the application-
2:28 surface gets more complicated.
2:31 The selector is the actual, complete “way” to the UI element we specified, starting
2:36 From the trunk, all the way to the specified destination, the editable field.
2:42 To get a better understanding, let's look at another application, like this standard calendar in Windows
2:47 10.
2:48 In the UI Explorer, we click the display button and then we click, let's say ... a date.
2:53 By the way, if individual elements are not displayed, you should try the given UI framework under the settings symbol
2:59 To be changed ... and displayed again.
3:08 As you can see, it's a bit bigger than the Notepad example.
3:11 By default, UiPath tries to optimize the selector by taking the first and last container, and
3:17, just a few more if necessary.
3:22 At the top of the window we can see the raw selector, which is the biggest difference
3:26 The complete way to the goal is, unlike the final, optimized selector, which can contain fewer elements.
3:33 Selecting or deselecting rows - add or remove them from the final selector.
3:41 But let's also take a look at the final selector.
3:44 It's actually standard XML that contains 2 types of information: First, the element type
3:50 ... and its various properties.
3:53 This guy is pretty self explanatory; it relates to the respective element: window, control, HTML,
3:59 Java, and so on.
4:01 But properties are the real stars of the Selectors.
4:04 This is the piece of information that helps identify the item you want.
4:08 For example: the first row tells UiPath to search for the application with that filename ...
4:14 This class ... and this title.
4:17 If any of these do not match, the item will not be found.
4:21 Properties of the currently selected element - or series - are in the pane on the right.
4:27 Just like the selectors, selecting and deselecting a property, that of the element, is added
4:31 Or removed.
4:35 To see when and how to edit selectors, let's use the Notepad example again.
4:41 We're going to hit the display button, then the editable field.
4:45 If we click in the first row of the final selector, we see that it refers to a window ... in
4:50 The application Notepad.exe ... with the class Notepad ... and the title “Selectors Test.txt”.
4:59 These are all properties that are used to identify the window on the screen.
5:03 So let's try it out.
5:06 Let's start a standard recording with UiPath Studio and write something in Notepad ...
5:14 So, let's hit Escape ... save the recording, and connect the new block to the initial mode.
5:23 If we look at the Art Plot we see that it has this selector, just like it does
5:28 in the UI Explorer, including the title properties.
5:34 So if we start it now ... de Robot will write the text in the notepad after the existing text, because
5:39 Did not turn on “Empty Field”.
5:41 That's ok.
5:42 But if we close the Notepad window and open a new one ... the automation won't work.
5:54 And after 30 seconds ... an error message appears.
6:03 Since these types of errors are almost always related to the selector, let's take a look.
6:08 As you have probably guessed, the problem is that quality.
6:12 It has the name of this file, so it will only work on this file.
6:16 Depending on the situation, this is either a bug or a trait.
6:21 Would you like to write in this field only, or in this particular one?
6:25 In this particular example, since the filename is part of the selector's properties, our robot will
6:30 Only write in the fields that have all the properties - so only
6:35 In Notepad window of files with that special name.
6:45 AM If we want a more general selector that will allow the robot to
6:49 To write in every Notepad window - we have to remove the title property of the selector.
6:59 If several windows match the existing selector, the robot will write in the first which it will
7:04 finds, so which one is above the other.
7:08 At its core, selectors are just a list of UI elements and their properties, and UiPath
7:14 Map this to the existing elements on the screen.
7:17 If we have two notepad windows on the screen and we want to write different things in each,
7:21 Are their selectors almost the same, except for the title property field
7:34 The first element.
7:37 But that difference is enough to correctly identify the window and the field with the one to be edited
7:43 Felds ...
7:44 Ok, now that we know how the selector works, it's easier to understand how the selector editor works.
7:51 Basically this is a simplified version of the UI Explorer tool, with only 2 panes: The
7:56 property list ... and the final selector.
7:59 Unlike in the UI Explorer, the property list here contains properties for all “folders”
8:04, which the selector consists of, not just for a single element.
8:08 AM You will see that if we select or deselect some of these properties in the top pane,
8:13 These can affect all of the 3 elements in the final selector.
8:16 For example, the first 3 properties control the first element, the window, and the fourth controls
8:22 the second element.
8:24 These four properties are just a subset of all the properties available for this selector.
8:30 AM To access the full list of properties, click the ‘Open in UI Explorer 'button
8:35 And keep improving the selector.
8:38 An alternative is to manually improve the selector in the lower part of the window.
8:42 Great, so that's the basics of the selectors.
8:46 Before we move on to advanced topics like customizing or troubleshooting, let's first
8:50 Understand the difference between whole and partial selectors.
8:54 All the selectors we've seen so far are whole selectors - that means you
8:59 All elements included to locate a UI element, including the top-level windows.
9:08 Partial selectors, on the other hand, don't include the top-level windows because these
9:12 In a container that equips you with these ... usually an AttachWindow or
9:18 am OpenApplication activities.
9:20 Otherwise they work completely the same.
9:23 We already discussed the two recording modes Basic and Desktop.
9:28 When it comes to selectors, the important thing to know is that Basic is whole selectors
9:32 Used for all recording actions, while desktop uses partial selectors.
9:36 Let's look at a quick example to see how this works.
9:40 am We start a desktop recording and take a simple action.
9:51 We leave the recording ... and connect it to the start mode.
9:58 As you can see, the four-click action is in the AttachWindow container.
10:02 So what's the use of these containers?
10:05 You are very helpful in making sure that all actions in the
10:10 The same windows are running without other windows interfering with them.
10:14 We do this by taking the output of the AttachWindow activity as an input element
10:19 Use for the AttachWindow.
10:21 We're going to leave it blank for now, as this method no longer uses selectors, so it's outside of it
10:26 of the scope of this tutorial.
10:28 In summary, it is stated that partial selectors are in principle whole selectors without the top element, which
10:34 In this case it is taken from the origin.
10:36 These are better suited for situations where there is interference from other applications and windows
10:41 is likely.
10:43 Selectors are, in general, an excellent tool for building reliable automation.
10:49 Even after applications have been changed or interfaces have been updated, selectors will still be able to do so
10:54 To locate the right element because its internal properties remain intact.
10:59 Next - let's look at some techniques for customizing and repairing selectors.
11:04 As you can see earlier in the multi-window Notepad example, the difference between the customization is
11:09 And fixing it depends on what you're trying to achieve.
11:11 For example, let's take a text file: What if the name of the text file changes, or it changes automatically
11:17 is created and it includes a date, or we don't know the exact name?
11:22 In all of these cases, we'd need a dynamic selector because the element is itself
11:27 Changed over time - it's not fixed.
11:30 Fortunately, we have a very useful quality that helps us with these limitations
11:34 - Wildcards.
11:38 Wildcards are characters that can be used to replace the part of the selector that changes, or
11:42 Which you don't know when executing.
11:45 You may already know wildcards from their use in Windows file search, Google,
11:50 Or other similar machines.
11:52 UiPath uses two wildcards: The asterisk ... to represent any number of numbers and characters, and that
11:58 question mark ... to represent a single character.
12:03 PM Let us assume that this text file changes daily to represent the current date
12:10 - this means that a simple recording that generates a static selector will no longer work tomorrow.
12:15 p.m. The solution to this is to just replace the dynamic part of the selector ... with an asterisk.
12:22 Now this type of activity will match any notepad window that has the title ‘Status Update '
12:28 Followed by the date - or followed by any text to be correct.
12:33 Let’s look at another example: we’re going to create web automation, since this is the case where dynamic
12:38 Selectors are most common.
12:41 Starting on the Amazon homepage, we want to find out the price for a requested book.
12:45 pm Let's say Greg Ergan's Permutation City ... and the price that goes with it.
12:56 Simple enough.
12:57 Should we take a simple recording of these actions ...
13:12 And the data extraction ... we get this simple workflow.
13:25 The problem is that if we do it, after the 30 second timeout, ... it will fail.
13:34 It can't find the items, probably because of a selector problem ... let's see ...
13:41 If we look closer, we see that it has the title property, the book title, in this one
13:46 Fall Permutation city *.
13:48 So the robot tries to find a window with this title, which fails because the title changes dynamically
13:53, depending on the search criteria.
13:57 We could remove the property entirely as before, but this is a better option
14:01 To replace the dynamic part of the selector ... with an asterisk.
2:05 PM That tells UiPath that there is some unrecognized text behind amazon.com.
2:11 PM Of course we have to do the same for the GetText action ... Let's test that ... Great, it works.
14:28 Understanding how wildcards work is very important as they are widely used in selectors
14:34 ... this brings us to another tool that makes working with dynamic selectors a lot easier.
2:41 PM Let's go back to the Amazon example from earlier.
14:45 We reversed the workflow to his original recording, without the wildcards which we will use later
14:50 Added ... Look for the book name in the selector ... and the browser is in a different one
2:58 pm search page so the workflow would fail now we would run it.
15:02 To fix this, we go to the Selector Editor for this action and click 'Attach
15:07 To live element button ‘, in the upper right corner ... Then we show the element again
15:13 Which one the robot tries to identify, but which fails: in our case the search text field.
15:20 UiPath compares the previous selector with this one, and tries to build a selector,
15:24 Which works in both situations by replacing the unequal part with an asterisk.
3:30 p.m. Pretty handy or what would you say?
3:32 pm ... great.
15:33 Finally, let's see how to use one final special property, the index.
15:39 Its main use is to tell UiPath to choose the first, second, or nth item in a container.
3:46 PM Let's look at a quick example.
15:48 In the Notepad application we want to click on the 4th element in the font list.
15:54 We start by adding a click action ... and choosing the Calibri font ... if we look at the
16:02 If we look at the selector in the UiExplorer, we see that the font is used as a property.
16:08 So the robot will choose it whether it's 4th or not.
16:13 In general, that's a good thing.
16:14 But if we always want to click on the 4th, regardless of the name, we have to
16:19 Remove the Calibri feature.
16:21 But look what happens when we remove it: UiExplorer automatically adds an IDX or an index
16:28 Property added to the element.
4:30 p.m. Let's try ... There it is ...
16:43 One last thing to know about index properties, sometimes the index property pops up in
16:49 Selectors, if we really want to locate a specific element, not necessarily the nth
16:55 element, as in the previous example.
16:57 That means the target UI element doesn't have enough specific properties
17:02 To make it uniquely identifiable, and it relies on an index to correctly specify the item.
17:08 Even if it works, it makes the selector less reliable - you should always try
17:13 Add other properties to avoid an index.
5:17 PM That concludes our Essential Selectors training, let's review briefly.
17:21 We started with the standard UIs: all user interfaces are built so that you can use elements in containers,
17:28 Usually in other containers ... like a matryoshka
17:32 UiPath uses various properties of these containers and elements to complete the path to the
17:38 Finding the right element ... since these properties are sometimes dynamic, we can use wildcards
17:44 To ignore the dynamic parts ... or the very practical 'Attach to live element' which does this automatically
17:50 For us does ... we've also seen how to select the Nth item from your list, using an index
17:55 property, and how this is a sign that a selector is sometimes not very stable ...
18:02 And all of this can be done in whole and partial selectors in activities like AttachWindow
18:07 or OpenApplication can be applied.
6:09 PM Make sure you check out the Advanced Selectors video for a closer look at specific ones
18:13 Get activities for locating elements like FindImage, FindElement, Get Attributes, and others ...
18:20 See you soon!