Browser Picker

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:

1. Using the "PICK NEW ELEMENT" button in the activity parameters. When clicking this button a selection mode starts with which you can specify the desired item. After selecting the item, the Browser Picker window opens.
2. Accessing Tools → Process Recorder → Browser. When you use this function, the selector mode starts, but the selector window does 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 display in the workspace.
3. Through the "Elements" toolbar. In 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 resetting 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 was found or not.

Advanced options

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 three columns titled "Name", "Calculation", and "Value".

Let's look through the example:

1. Column Name shows className, determining the class name of the element. In this particular case - gb_f.
2. 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 selector defines. We'll look at what each option means below.
3. 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:

1. The 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 exactly match the value gb_f.
2. The 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.
3. The Contains option allows recognizing if a specified value is found in the defined attribute. For example, if the attribute Сontains - gb_f is specified in the selector, and the value of the className attribute 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.