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.

Chrome Element Spy With Attributes

Note: The Google Search page will change over time and the HTML code you see will likely differ from that shown in the screenshots of this tutorial. While the HTML code may change, the concepts are the same.

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.

Note: The changing identification of the search text box is not uncommon and highlights the importance of taking time to be mindful about how you want to identify an element. Try to pick something that is not likely to change. In this case, even the mindful choice of using ID would not have insulated us from the change made by Google.

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.