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.
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.
|Click an element|| To clik on an element, use the Click Activity. The |
|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.|
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 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:
|By ID|| |
Unfortunately, a Web Element does not always have an
Be careful to avoid dynamically generated
|By Name|| |
|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
|By Class|| |
|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 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.
The following properties are available when working with a Web Control:
|id||The value of the |
|name||The value of the |
|tagName||The name of the HTML tag (Read-only)|
|className||The value of the |
|innerHTML||The full text (without leading or trailing white space) that appears between the HTML tag (Read-only)|
|outerHTML||The full text including the HTML opening and closing tags as well as the content in between (Read-only)|
|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 |
|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 |
|visible||A value of |
|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)|