Inspecting Elements
Overview
Element interaction is a key aspect of automating any user interface. To be able to interact with elements in the user interface, we need to be able to uniquely identify one element from another.
Element Inspector Tool Window
Understanding Properties
All elements have properties associated with them. Some of these properties are used to classify elements, control appearance, and define layout. Other properties may also be available that are only used by the programming environment in which the element resides. Web elements, for instance, may have an id or name that can help identify the element, but does nothing to impact how the element behaves. Our goal is to use these properties to help uniquely identify our element.
If you wanted to tell someone your favorite fruit without naming it, you would likely describe your fruit by the shape, color, or size. Sometimes one property is not enough, so you would combine properties. Apples and oranges are both mostly round, so shape alone would not differentiate one from another. If you included color, a "round orange" fruit would do well to describe oranges, but "round red" fruit may not be enough to describe an apple since cherries are also "round red" fruits. We would naturally continue to add descriptions about our fruit until the other person could understand which fruit we were describing.
We use the same technique to tell AutoBloks with which element we want to interact. Just as some fruits are easier to describe than others, you will find the same is true for elements. When possible, we will identify our element by name (e.g. "cherry" fruit). When we don't have a name, we'll use as many properties as are necessary to identify our element (e.g. "small, round, red" fruit).
Introducing Element Inspector
Most element properties cannot be determined by just looking at the element, so we use the Element Inspector tool window to analyze an element and display the available properties. By default, this tool window is docked to the right side of the application window. Use the tabs at the bottom of the dock location to switch between tool windows docked in the same location. You may also use the View tab of the Ribbon Command Bar to activate any tool window.
Understanding Sessions
The Element Inspector should be displaying a prompt that you need to start a session. Sessions are used by AutoBloks to launch a browser window which can support automation, and only those browsers managed by AutoBloks can be used to inspect elements. When you ran your process at the end of the Getting Started tutorial, you may have noticed that AutoBloks launched a new instance of a browser, navigated to the desired site, and then closed the browser. This was a managed browser session that was created for the process run and automatically disconnected at the end of the process run.
Inspecting Your First Element
It's time to inspect your first element. This tutorial focuses on automating the Google Search page, so we will inspect elements on that page. Since we don't currently have a session available, though, we need to create a new session and navigate to the proper page before we can inspect elements.
- Click the Start Session button in the Element Inspector tool window. Alternatively, you can also click the same button on the Home tab of the Ribbon Command Bar. This will open a new browser window.
- Use the browser address bar to navigate to
https://www.google.com.
Now that you have a session ready, you can inspect elements.
- Click the Inspect button if it is displayed in middle of the Element Inspector tool window. If properties of an element are already displayed, click the Inspect Element button at the top of the Element Inspector tool window.
- Move your mouse over elements of the Google Search page, but do not click. As you hover over an element that is recognized, AutoBloks will display a highlight rectangle over that element (as shown in the above screen capture). This is your feedback that AutoBloks has detected the element under the cursor.
- Move the mouse over the search box and wait for the highlight rectangle to be displayed over the search box. When displayed, click it with the mouse. This will confirm the element you want to select and AutoBloks will load the properties of that element in the Element Inspector tool window.
Browsing Properties
The Element Inspector tool window will now display all the properties it recognizes for the element you selected. Take a moment to scroll through the available properties. When you select a property, a relevant description will be displayed at the bottom of the tool window.
Any of these properties will be available to uniquely identify your element, and some are better than others. Some property values, like screen location, may change frequently and will not help consistently identify the element. The best properties for web controls are typically id and name.
Before you continue with the tutorial, you can take a moment to inspect other elements on the page and view their properties. In the next step of the tutorial, we will use these properties to identify an element.