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.

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.

This tutorial builds on the Getting Started tutorial. You are encouraged to complete or at least review that tutorial before beginning this one. If you do not have the files created during that tutorial, you will need to download those completed files to use for this tutorial.
Element Inspector Tool Window

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.

Ribbon View Element Inspector Steps

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.

  1. 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.
  2. Use the browser address bar to navigate to https://www.google.com.

Now that you have a session ready, you can inspect elements.

Google Search Inspector Highlights on Mouse Over

  1. 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.
  2. 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.
  3. 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.
Warning: Sometimes the browser will become unresponsive for 30 to 60 seconds when you first begin to mouse over elements. This is an indication that the browser is busy and may still be processing some aspect of the page that must be completed before it will tell AutoBloks which element is under the cursor. Please be patient and wait for the highlight to display. If you click an element without it being highlighted, your click will be sent to the browser window instead of picked up by AutoBloks as a cue to inspect the element.

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.

Note: You can toggle the visibility of the description pane by right-clicking anywhere in the properties grid and select Description from the context menu.

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.

Note: You can cancel the inspect operation at any time by either pressing the Esc key or clicking the Inspect button again.
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 for details.