Much like every site on the internet, we use cookies to help analyze traffic and improve our website. As outlined in our privacy policy, any information is only used internally and is not shared with outside organizations.
Learn More

Web Control

Overview

A Web Control is any item presented within a web page. Typically, each HTML tag in the source code of the page translates to an individual Web Control.

Topics:

Working with Web Controls

The following describe some of the common scenarios for working with a Web Controls. Refer to the Identification Techniques topic for how to indicate the target element of the Activity will be a Web Control.

ScenarioInstructions
Click an element To clik on an element, use the Click Activity. The ClickCount argument can be set to 2 if you need to double-click, and the MouseButton argument can be set to RIGHT if you need to right-click.
Set the value of a control Whether typing in a text box or selecting a value from a list, the Set value Activity is used to define the value.
Read the current value of a control The Get value Activity is used to read the current value. In the Output Arguments, you will need to specify a Variable to receive the value of the control.
Read the current value of a control property All controls have properties associated with them. The Get property value Activity is used to read the current value of one of those properties. In the Output Arguments, you will need to specify a Variable to receive the value of the property. If you want to read multiple properties at once, the Get multiple property values activity can be used.
Wait for an element to appear To pause execution while you want for an element to appear, use the the Wait until element exists Activity.
Wait for an element to go away To pause execution until an element goes away, use the the Wait until element no longer exists Activity.
Verify text or any property value Use the Verify property value Activity to check that the current value of a property matches your expected condition. A pass or fail message will be logged in the report to reflect the verification.

Identification Techniques

The following are the techniques supported by a Web Control element that can be used by an Activity Call that needs to identify a Web Control. Refer to the Element Identification topic for more details on how to define the identification technique for an element.

Simple Identification

Simple Identification is a standard Element Identification Technique available to multiple Element Types and is intended to provide quick, single-value identification of elements. The following options are available when using Simple Identification for a Web Control and are based on the most popular techniques used by Selenium WebDriver:

MethodDescription
By ID

When the id attribute is defined on an HTML tag, it does not often change because it could impact other application code as well. That makes it a popular choice for uniquely identifying a Web Element. The below sample code can be identified By ID with a value of menu.

<div id="menu">...<div>

Unfortunately, a Web Element does not always have an id attribute, especially if the element is used only for display.

Be careful to avoid dynamically generated id values as those may change frequently. Most static id attributes are defined by developers and will be given names that easily relate to the web element. If the id attribute appears random, overly generic in the name, or uses a lot of numbers, it probably is not going to be a consistent identifier.
By Name

When the name attribute is defined on an HTML tag, it does not often change because it could impact other application code as well. Like ID, that makes it a popular choice for uniquely identifying a Web Element when it is available. The below sample code can be identified By Name with a value of userName.

<input text="text" name="userName">...<input>

By XPath or CSS

Working with XPath or CSS is much more complicated than working with the simple id attribute, but there are many tools available which help make this information readily available. The details of defining XPath path expressions or CSS selectors are beyond the scope of this documentation, but there is an excellent XPath tutorial and CSS tutorial at w3schools.com to help.

Until you become familiar with XPath or CSS, consider using one or more of the many available free tools to help. Any tool for use with Selenium WebDriver will work, and most are implemented as browser extensions.

ChroPath
A popular extension for Chrome is ChroPath which also has many instructional YouTube videos.
Ranorex Selocity
Another Chrome extension is Selocity. Ranorex is a commercial automation vendor, but the extension is free to use and well-designed. Details are available on the Ranorex website.
Once you use these tools to generate the XPath or CSS for your element, you can paste the corresponding value into AutoBloks.

Just because you use a Chrome extension to define your XPath or CSS does not mean your identifiers will only work on Chrome.
Copying and pasting XPath from these tools can be convenient, but XPath is prone to change. XPath uses the location of an HTML tag relative to other HTML tags, so subtle changes in layout can potentially impact the XPath. When possible, use a Relative XPath instead of an Absolute XPath for the most flexibility.
CSS is a web technology focused primarily on how elements are presented, and presentation can change without affecting functionality. Using a CSS selector can often result in failed Element Identification when the UI receives visual updates.
By Link Text

Specifically for use with link controls (i.e. HTML a tag), this identifier allows you to find a link based on the text displayed for that link. The entire text must be specified, but the match is not case-sensitive. The below sample code can be identified By Link Text with a value of Terms Of Use or terms of use.

<a href="#">Terms of Use<a>

If you need more explicit control over matching an element by link text (such as partial matching or case-sensitivity), use property condition identification where you can define the tagName property equals a and then use the text property condition to indicate your match criteria.
By Class

When the class attribute is defined on an HTML tag, it defines visual characteristics of the element. Modern websites frequently use classes to simulate making an element appear or function like known controls (e.g. making a link appear like a button). Avoid using this identifier for HTML tags with complex class attributes since, like CSS-based identifiers, the class of an HTML tag can often change purely to adjust presentation of the element. The below sample code can be identified By Class with a value of breadcrumb.

<div class="breadcrumb">...<div>

By Tag

Tag names are typically not unique, but can be combined with multiple match policy in scenarios where you are looking for a specific instance of a basic element. Since tags are commonly used, it is possible that changes in the struture of an HTML page will introduce new instances of the same tag that alter the position of the tag you intend to find. The below sample code can be identified By Tag with a value of a.

<a href="#">...<a>

Property Conditions

Property Conditions is a standard Element Identification Technique available to multiple Element Types where the properties of an element are used to identify it. Use the list of properties below when using this technique with a Web Window.

Properties

The following properties are available when working with a Web Control:

Property NameDescription
idThe value of the id attribute in the HTML tag (Read-only)
Example:
<div id="something">...<div> has an ID of something
nameThe value of the name attribute in the HTML tag (Read-only)
Example:
<input name="submit">...<input> has a name of submit
tagNameThe name of the HTML tag (Read-only)
Example:
<div id="something">...<div> has a tag name of div
classNameThe value of the class attribute in the HTML tag (Read-only)
Example:
<div class="something">...<div> has a class name of something
innerHTMLThe full text (without leading or trailing white space) that appears between the HTML tag (Read-only)
Example:
<a href="#">Click Me</a> has innerHTML of Click Me
outerHTMLThe full text including the HTML opening and closing tags as well as the content in between (Read-only)
Example:
<a href="#">Click Me</a> has outerHTML of <a href="#">Click Me</a>
textThe text value currently represented by the control, which is contextual based on the control type. A Text Box, for instance, will return the value entered in the control where a Check Box will return True or False based on the check state. (Read-only)
xThe x-coordinate of the upper-left corner of the element relative to the upper-left corner of the browser page content. (Read-only)
yThe y-coordinate of the upper-left corner of the element relative to the upper-left corner of the browser page content. (Read-only)
screenLeftThe x-coordinate of the upper-left corner of the element relative to the screen. (Read-only)
screenTopThe y-coordinate of the upper-left corner of the element relative to the screen. (Read-only)
widthThe width, in pixels, of the rendered element on the page. (Read-only)
heightThe height, in pixels, of the rendered element on the page. (Read-only)
enabledA value of True or False indicating if the element is enabled. (Read-only)
visibleA value of True or False indicating if the element is currently visible. (Read-only)
scrollLeftThe scroll position of content with a horizontal scroll bar which indicates the x-coordinate of the left edge of the area scrolled into view. (Read/Write)
scrollTopThe scroll position of content with a vertical scroll bar which indicates the y-coordinate of the top edge of the area scrolled into view. (Read/Write)
scrollWidthThe entire width of an element, including padding. (Read-only)
scrollHeightThe entire height of an element, including padding. (Read-only)
offsetLeftThe left position, in pixels, relative to the left side of the "offsetParent" element. (Read-only)
offsetTopThe top position, in pixels, relative to the top side of the "offsetParent" element. (Read-only)
clientWidthThe viewable width of an element in pixels, including padding, but not the border, scroll bar, or margin. (Read-only)
clientHeightThe viewable height of an element in pixels, including padding, but not the border, scroll bar, or margin. (Read-only)
roleAn accessibility attribute which defines a specific role for an object (such as an article, alert, slider, or button). (Read-only)
aria-*The aria-* attributes are a series of special accessibility attributes that start with aria- and then can include many values. Any attempt to read a property from a web control that starts with aria- will perform a lookup of the value of any attribute with the same name. (Read-only)
data-*The data-* attributes are a series of custom attributes that start with data- and then can include any custom value. A popular convention to assist with automation is to use an attribute called data-auto that contains a unique identifier specifically for automation that should never change. Any attempt to read a property from a web control that starts with data- will perform a lookup of the value of any attribute with the same name. (Read-only)