Patterson Consulting is Closing
Patterson Consulting, LLC of Tennessee is in the process of closing and all operations will cease effective March 1, 2022. Please refer to our company page or FAQ for details.
Identifying an Element
Overview
One goal of the Interacting with Elements tutorial is to specify a search query, and that means we must be able to identify the text box where the search terms will be entered. In the original tutorial, you were able to point to the element to have AutoBloks generate a unique description for you. This step of the tutorial will show you how you could build that description manually.
Inspect the Element
To identify an element, we need to understand how the element is being defined. Repeating the skills you learned in the previous step, use the Chrome Developer Tools to Inspect the query text box. You should see a screen like the one shown below where the HTML source of the text box is displayed.
The text box is represented by the input tag with several attributes. Not all of these attributes are used by this search text box, but some of the more important attributes for identification purposes are:
| Attribute Name | Attribute Value | Purpose |
|---|---|---|
| id | lst-ib | The ID is primarily used to identify the element from JavaScript code associated with the page. |
| name | q | Provides a name for the element. |
| class | gsfi | The class is a reference to stylesheets which apply a set of visual qualities to an element. |
| title | Search | Defines the tooltip text when hovering over the element. |
| type | text | There are multiple variables of input tags and setting the type to text indicates this is a text box. |
| aria-label | Search | Defines a label for the text box since there is not a label defined in screen. The aria-* attributes are primarily used by screen readers and other accessibility tools. |
| role | combobox | Indicates to accessibility applications that this element behaves like a combo box. |
Choosing Identification Technique
Our goal is to not only unique identify this element, but also to choose an identification technique that is not likely to change. Any one of these attributes could be unique today, but some are more likely to change than others. If an attribute you used to identify your element changes, your automated Process will fail to run since it will not be able to locate and interact with the desired element.
Labels and visual information change most often, so identifying an element by those techniques is typically only used when a better option is not available. In most scenarios, the id attribute is the best choice. This value is typically provided specifically by a developer to be able to identify and interact with an element. Changing the value of the id could potentially break JavaScript code used by the page, so changes are discouraged.
Beware Dynamic ID's
Some frameworks used to develop web applications will dynamically generate ID's for elements on the page. If the value of the ID attribute appears random or has a lot of numbers, it may be dynamically generated and subject to change. For the search text box, two attributes stand out as top candidates to identify the element; id = lst-ib and name = q. While the ID value of lst-ib does not appear to have an obvious meaning, it also does not appear to be random. Since using ID is preferred and we have no reason to assume this value will change, we could choose to identify this element by ID. Since this tutorial was first authored, however, the HTML of the element has already changed at least once and resulted in the id attribute being completely removed at one point. What has remained constant, however, was the name attribute being set to q. Since the name attribute has already been proven to be more stable, we will choose to identify this element by the given name instead of ID.
In the next step, we will create a new Activity Call for this Element and instruct AutoBloks to identify the Element using the name of q.