The Selectors

UBot Studio has an advanced system of selectors that do most of the work for you. Although the technology behind them is extremely complex, they remain extremely easy to use.

These selectors are located in the nodes of the Type text and Click commands as well as several others. The following detail the selectors and the advanced element editor used to refine selection.

The Element Selector

This selector, which is identified by the button with brackets ()will automatically choose an attribute for you simply by clicking on the selector and then on the desired element.

Once this selector is clicked, you simply need to go to the desired element (which the selector will highlight for you) and click on it.

We will use Google as an example for this selector. Type google.com into the browser and hit enter so the google site loads:

The next step is to drag a “Type Text” command into the scripting area from the action commands menu:

Once you have dragged this command into the scripting area, the parameter box will appear:

The first parameter, “Element to type into”, will by chosen by using the element selector (1). In this example we are going to choose the text field on google.com.

To do this, simply click on the element selector, and then highlight the text field in the browser and click it:

Once you click on the text field your parameter will automatically populate itself with the attribute:

In the “Text to type” field (2) you can either type directly type your desired text into it, or reference a variable (such as a ui text box).

To do that simply type the name of the variable and make sure you include the pound sign in front of it (i.e. #keyword). Click ok, and you are done with that command.

Tip: You can often get the same result much quicker by dragging the element into the node window.

The Selector Language

UBot Studio's selector language is a complex system made to simplify the process of finding and selecting an element on the page.

The selector has a set of AI selectors that you can type into the Type text command, Click command or any function or command that requires the use of a selector.

UBot Studio's selector system automatically recognizes these basic elements as username fields, password fields, login buttons, and more.

Here is a list of some of the most common AI selectors:

<username field>: Finds the username field on a webpage.

type text(<username field>, "blue", "Standard")

<password field>: Finds the password field on a webpage.

type text(<password field>, "blue", "Standard")

<email field>: Finds the email field on a webpage.

type text(<email field>, "blue", "Standard")

<login button>: Finds the login field on a webpage.

click(<login button>, "Left Click", "No")

<first name field>: Finds the first name field on a webpage.

type text(<first name field>, "blue", "Standard")

<last name field>: Finds the last name field on a webpage.

type text(<last name field>, "blue", "Standard")

<login link>: Finds the login button element on a webpage.

click($element offset(<login link>, 0), "Left Click", "No")

If there is more than one login button on the page, the element offset will step in to help specify the exact login link being targeted.

<create account link>: Finds the create account link element on a webpage.

click(<create account link>, "Left Click", "No")

<birth day dropdown>: Finds the drop down element on a webpage.

change dropdown($element offset(<birth day dropdown>, 0), "Random - Skip First Choice")

To read more about the intricate world of the AI selectors, please see [1].

The Image Selector (Professional and Developer Editions Only)

This selector, which is identified by a button with a camera () ) will choose any area of the browser that you capture an image of.

In this respect, it is not necessarily used to just select form/input elements on the page, but will also help you when looking for certain unique aspects of the page (i.e. in place of the standard “wait for” command, you can now have it search the page for your image capture, and it can be just about anything).

It is important to keep in mind the following when using the image selector in a distributed bot:

1. Webpages render differently on different machines. This will be evident in cases where the image was selected on one machine and run on another.

2. Webpages will change the way they look to fit different browser sizes and other configurations.

Using the exact same example as above, let’s capture the input field with the image selector instead of the element selector.

Remember, this selector does NOT require anything on the page to have a unique attribute as it is exclusively based on the image you capture.

The first step is to click on the image selector button:

Once you click on this button, then everything but the browser will become darker and your cursor will now have “crosshairs” necessary to capture your desired image.

Drag a square around the image you want to capture by clicking the mouse, holding it, and dragging the outline around the image and then releasing the mouse button:

You will then see a small representation of your image in the parameter box:

Now complete the command by telling it what to type in the “Text to type” field (i.e. a variable, or your own text) just as we did in the previous example, click “OK” and the command is completed.

Advanced Element Editor

This Element Editor, which is identified by a button with a cog(), allows you to choose elements by all available attributes. It also includes the wildcard and the regex (regular expression) options.

This editor literally displays the source code of the desired element allowing you to manipulate it according to your needs. But to take it one step further, it only shows you the portion of the code you select.

For example you may want to see the “name” associated with the attribute. You simply choose name from the drop down menu and see the code specific to the id.

Using the same example as we used in the previous two selectors, we will take a look at the input field of the Google search engine.

Since this is an advanced editor, we first need to choose the element using the element selector.

Once you have done that, you can then click on the advanced element editor and a parameter box will appear:

You will notice in the “HTML” box all of the code for that element is present. Directly underneath that you can select the individual attributes of the elements in the “Attributes dropdown menu:

Once you select one, it will populate the box to the right of it only if that particular attribute is present:

In the drop down box immediately to the right you can select exact match, wildcard or regular expression depending on how you need to choose the attribute:

Once those three fields are populated simply click on the add button and it will transfer all your selections to the Selector box at the bottom:

When to use which selector?

Most of the time, you will only need to use the Element Selector. If for some reason this is not working, you should try the Image Selector next if you own a Professional edition license.

The Advanced Selector is available in all versions and should allow you to select the element that you need.