Browser Picker is a tool that allows you to determine which elements of the browser interface the bot needs to interact with.
There are three ways to open the Browser picker:
- The "PICK NEW ELEMENT" button in the activity parameters. Clicking this button starts a selection mode in which you can specify the desired item. After selecting the item, the Browser Picker window opens.
- Tools → Process Recorder → Browser. When you use this function, the selector mode will start, but the selector window will not open. In this mode, you can specify several browser items to click or enter, and then return to the Studio Pro window. New activity boxes will appear in the workspace.
- "Elements" toolbar. Through this panel you can create an element or select an already created element and go to the ability to edit it by pressing the "Change the element" button. In this case, the selector window opens, in which, by the "PICK" button, you can select a new element of the browser interface.
Working with the tool is quite easy. When you click the "PICK NEW ELEMENT" button, Studio Pro minimizes and the programs open in the background, including the browser. In the open browser, you can select the element you want to work with. When you hover your cursor over an item, it is framed in red. Pressing the Ctrl+X key combination fixes the selected item. The Esc key allows to reset item selection mode.
After the item is selected, the "Browser picker" window opens.
To the right of the item name its status is displayed, showing whether the item is found or not.
The advanced options represent the structure (selector) of the selected element, which usually consists of tabs, and each tab consists of attributes and their values. This is how the hierarchy of how the interface element was designed is displayed. You can change, select or exclude attributes to achieve greater accuracy and stability in your interaction with the element.
We will look through the example of the selector on the "Images" button on the google.com page.
On the left side of this window there are two tabs - "DIV" and "A" representing the hierarchy of the element's design.
Within each tab there are columns "Name", "Calculation", and "Value".
Let's look through the example:
- Column Name shows
className, detrming the class name of the element. In this particular case -
- Column Calculation shows
Is. This parameter allows you to specify how the attribute value should be defined. In this case, the class name must be exactly the same as the the selector defines. We'll look at what each option means below.
- Column Value shows
gb_f. The class name.
So that the selector can be customized for a particular use case, there are several options for defining an attribute value (calculation options). Let's take a closer look at them:
- Is option means that the value of the attribute in the selector must be exactly the same as the value of the selected item. In the example above, the option "Is" means that the class name of the element should be exactly matching the value
- Calculate option allows you to substitute the variable used in the workflow as the attribute value. In this way, the attribute value can be determined by performing activities.
- Contains - allows an element to be recognized if a specified value is found in its defined attribute. For example, if the attribute
Сontains - gb_fis specified in the selector, and the value of the
classNameattribute is set to
gb_fb, the selector will still be able to identify the element.
The "TEST" button in the selector window allows you to test if an element with the specified selector is detected correctly.