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
Identification Techniques
Properties

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.

Scenario	Instructions
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:

Method	Description
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 Name	Description
id	The value of the `id` attribute in the HTML tag (Read-only) Example: `<div id="something">...<div>` has an ID of `something`
name	The value of the `name` attribute in the HTML tag (Read-only) Example: `<input name="submit">...<input>` has a name of `submit`
tagName	The name of the HTML tag (Read-only) Example: `<div id="something">...<div>` has a tag name of `div`
className	The value of the `class` attribute in the HTML tag (Read-only) Example: `<div class="something">...<div>` has a class name of `something`
innerHTML	The 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`
outerHTML	The 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>`
text	The 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)
x	The x-coordinate of the upper-left corner of the element relative to the upper-left corner of the browser page content. (Read-only)
y	The y-coordinate of the upper-left corner of the element relative to the upper-left corner of the browser page content. (Read-only)
screenLeft	The x-coordinate of the upper-left corner of the element relative to the screen. (Read-only)
screenTop	The y-coordinate of the upper-left corner of the element relative to the screen. (Read-only)
width	The width, in pixels, of the rendered element on the page. (Read-only)
height	The height, in pixels, of the rendered element on the page. (Read-only)
enabled	A value of `True` or `False` indicating if the element is enabled. (Read-only)
visible	A value of `True` or `False` indicating if the element is currently visible. (Read-only)
scrollLeft	The 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)
scrollTop	The 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)
scrollWidth	The entire width of an element, including padding. (Read-only)
scrollHeight	The entire height of an element, including padding. (Read-only)
offsetLeft	The left position, in pixels, relative to the left side of the "offsetParent" element. (Read-only)
offsetTop	The top position, in pixels, relative to the top side of the "offsetParent" element. (Read-only)
clientWidth	The viewable width of an element in pixels, including padding, but not the border, scroll bar, or margin. (Read-only)
clientHeight	The viewable height of an element in pixels, including padding, but not the border, scroll bar, or margin. (Read-only)
role	An 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)