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.
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 Unfortunately, a Web Element does not always have an 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 |
By XPath or CSS | Working with XPath or CSS is much more complicated than working with the simple 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.
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 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 |
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 |
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) |