Tellurium UI ObjectsUI ModuleThe UI Module is the heart of Tellurium. The UI module is a collection of UI elements grouped together. Usually, the UI module represents a composite UI object in the format of nested basic UI elements. For example, the download search module in Tellurium's project site is defined as follows: ui.Form(uid: "downloadSearch", clocator: [action: "list", method: "get"], group: "true") {
Selector(uid: "downloadType", clocator: [name: "can", id: "can"])
InputBox(uid: "searchBox", clocator: [name: "q"])
SubmitButton(uid: "searchButton", clocator: [value: "Search"])
}Tellurium is built on the foundation of the UI module. The UI module makes it possible to build locators for UI elements at runtime. First, this makes Tellurium robust and responsive to changes from internal UI elements. Second, the UI module makes Tellurium expressive. A UI element is referred to simply by appending the names (uids) along the path to the specific element. This also enables Tellurium's "Group Locating" feature, making composite objects reusable and addressing dynamic web pages. This frees up the testers to write better tests rather than spending precious testing time identifying and resolving test failures due to XPath changes. Basic UI ObjectTellurium provides a set of predefined UI objects to be used directly when setting up a test. The basic UI object is an abstract class. Users cannot instantiate it directly. The basic UI Object works as the base class for all UI objects and it includes the following attributes: | ATTRIBUTE | DESCRIPTION | | UI Object | Basic Tellurium component | | UiId | UI object's identifier | | Namespace | Used for XHTML | | Locator | UI Object Locator including Base Locator and Composite Locator | | Group | Group Locating attribute that only applies to a collection type of UI object such as Container, Table, List, Form | | Respond | JavaScript events the UI object responds to |
The value is a list and the base UI object provides the following methods: - boolean isElementPresent()
- boolean isVisible()
- boolean isDisabled()
- waitForElementPresent(int timeout), where the time unit is ms.
- waitForElementPresent(int timeout, int step)
- String getText()
- getAttribute(String attribute)
All UI Objects inherit the above attributes and methods. Do not call these methods directly but use DSL syntax instead. For example, use: click "GoogleSearchModule.Search" In this way, Tellurium first maps the UIID "GoogleSearchModule.Search" to the actual UI Object. Then the user calls the click method on the UI Object. If that UI Object does not have the click method defined, an error displays. The UML class diagram is shown as follows. 
UI Object Default AttributesTellurium UI objects have default attributes as shown in Table 2-1: Table 2-1 UI Object Default Attributes | Tellurium Object | Locator Default Attributes | Extra Attributes | UI Template | | Button | tag: "input" | | no | | Container | | group | no | | CheckBox | tag: "input", type: "checkbox" | | no | | Div | tag: "div" | | no | | Form | tag: "form" | group | no | | Image | tag: "img" | | no | | InputBox | tag: "input" | | no | | RadioButton | tag: "input", type: "radio" | | no | | Selector | tag: "select" | | no | | Span | tag: "span" | | no | | SubmitButton | tag: "input", type: "submit" | | no | | UrlLink | tag: "a" | | no | | List | | separator | yes | | Table | tag: "table" | group, header | yes | | StandardTable | tag: "table" | group, header, footer | yes | | Frame | | group, id, name, title | no | | Window | | group, id, name, title | no |
UI Object List DescriptionButtonButton represents various Buttons on the web and its default tag is "input". The following methods can be applied to Button: - click()
- doubleClick()
- clickAt(String coordination)
Example: Button(uid: "searchButton", clocator: [value: "Search", name: "btn"]) UML Class Diagram: 
Submit ButtonSubmitButton is a special Button with its type being "submit". Example: SubmitButton(uid: "search_web_button", clocator: [value: "Search the Web"]) UML Class Diagram: 
Check BoxThe CheckBox on the web is abstracted as "CheckBox" Ui object. The default tag for CheckBox is "input" and its type is "checkbox". CheckBox comes with the following methods: - check()
- boolean isChecked()
- uncheck()
- String getValue()
Example: CheckBox(uid: "autoRenewal", clocator: [dojoattachpoint: 'dap_auto_renew']) UML Class Diagram: 
DivDiv is often used in the Dojo framework and it can represent many objects. Its tag is "div" and it has the following method: Example: Div(uid: "dialog", clocator: [class: 'dojoDialog', id: 'loginDialog']) ImageImage is used to abstract the "img" tag and it comes with the following additional methods: - getImageSource()
- getImageAlt()
- String getImageTitle()
Example: Image(uid: "dropDownArrow", clocator: [src: 'drop_down_arrow.gif']) UML Class Diagram: 
IconIcon is similar to the Image object, but user can perform actions on it. As a result, it can have the following additional methods: - click()
- doubleClick()
- clickAt(String coordination)
Example: Icon(uid: "taskIcon", clocator:[tag: "p", dojoonclick: 'doClick', img: "Show_icon.gif"]) UML Class Diagram: 
Radio ButtonRadioButton is the abstract object for the Radio Button Ui. As a result, its default tag is "input" and its type is "radio". RadioButton has the following additional methods: - check()
- boolean isChecked()
- uncheck()
- String getValue()
Example: RadioButton(uid: "autoRenewal", clocator: [dojoattachpoint: 'dap_auto_renew']) UML Class Diagram: 
Text BoxTextBox is the abstract Ui object from which the user returns to the text. For example, it comes with the following method: - String waitForText(int timeout)
Note: TextBox can have various types of tags. Example: TextBox(uid: "searchLabel", clocator: [tag: "span"]) UML Class Diagram: 
Input BoxInputBox is the Ui where user types in input data. As its name stands, InputBox's default tag is "input". InputBox has the following additional methods: - type(String input)
- keyType(String input), used to simulate keyboard typing
- typeAndReturn(String input)
- clearText()
- boolean isEditable()
- String getValue()
Example: InputBox(uid: "searchBox", clocator: [name: "q"]) UML Class Diagram: 
URL LinkUrlLink stands for the web url link, i.e., its tag is "a". UrlLink has the following additional methods: - String getLink()
- click()
- doubleClick()
- clickAt(String coordination)
Example: UrlLink(uid: "Grid", clocator: [text: "Grid", direct: "true"]) UML Class Diagram: 
SelectorSelector represents the Ui with tag "select". The user can select from a set of options. Selector has methods, such as: - selectByLabel(String target)
- selectByValue(String value)
- addSelectionByLabel(String target)
- addSelectionByValue(String value)
- removeSelectionByLabel(String target)
- removeSelectionByValue(String value)
- removeAllSelections()
- String getSelectOptions()
- String getSelectedLabels()
- String getSelectedLabel()
- String getSelectedValues()
- String getSelectedValue()
- String getSelectedIndexes()
- String getSelectedIndex()
- String getSelectedIds()
- String getSelectedId()
- boolean isSomethingSelected()
Example: Selector(uid: "issueType", clocator: [name: "can", id: "can"]) UML Class Diagram: 
ContainerContainer is an abstract object that can hold a collection of Ui objects. As a result, the Container has a special attribute "useGroupInfo" and its default value is false. If this attribute is true, the Group Locating is enabled. But make sure all the Ui objects inside the Container are children nodes of the Container in the DOM, otherwise, you should not use the Group Locating capability. Example: ui.Container(uid: "google_start_page", clocator: [tag: "td"], group: "true"){
InputBox(uid: "searchbox", clocator: [title: "Google Search"])
SubmitButton(uid: "googlesearch", clocator: [name: "btnG", value: "Google Search"])
SubmitButton(uid: "Imfeelinglucky", clocator: [value: "I'm Feeling Lucky"])
}UML Class Diagram: 
FormForm is a type of Container with its tag being "form" and it represents web form. Like Container, it has the capability to use Group Locating and it has a special method: This method is useful and can be used to submit input data if the form does not have a submit button. Example: ui.Form(uid: "downloadSearch", clocator: [action: "list", method: "get"], group: "true") {
Selector(uid: "downloadType", clocator: [name: "can", id: "can"])
TextBox(uid: "searchLabel", clocator: [tag: "span"])
InputBox(uid: "searchBox", clocator: [name: "q"])
SubmitButton(uid: "searchButton", clocator: [value: "Search"])
}UML Class Diagram: 
TableTable is one of the most complicated Ui Object and also the most often used one. Obviously, its tag is "table" and a table can have headers besides rows and columns. Table is a good choice for a data grid. Tellurium can handle its header, rows, and columns automatically. Table has one important feature: a different UiID than other Ui objects. For example, if the id of the table is "table1", then its i-th row and j-th column is referred as "table1[i][j]" and its m-th header is "table1.header[m]". Another distinguished feature of Table is that a user can define Ui templates for its elements. For example, the following example defines different table headers and the template for the first column, the element on the second row and the second column, and the template for all the other elements in other rows and columns. ui.Table(uid: "downloadResult", clocator: [id: "resultstable", class: "results"],
group: "true")
{
//define table header
//for the border column
TextBox(uid: "header: 1", clocator: [:])
UrlLink(uid: "header: 2", clocator: [text: "%%Filename"])
UrlLink(uid: "header: 3", clocator: [text: "%%Summary + Labels"])
UrlLink(uid: "header: 4", clocator: [text: "%%Uploaded"])
UrlLink(uid: "header: 5", clocator: [text: "%%Size"])
UrlLink(uid: "header: 6", clocator: [text: "%%DownloadCount"])
UrlLink(uid: "header: 7", clocator: [text: "%%..."])
//define Ui object for the second row and the second column
InputBox(uid: "row: 2, colum: 2" clocator: [:])
//define table elements
//for the border column
TextBox(uid: "row: *, column: 1", clocator: [:])
//For the rest, just UrlLink
UrlLink(uid: "all", clocator: [:])
}Be aware, the templates inside the Table follow the name convention: - For the i-th row, j-th column, the uid should be "row: i, column: j"
- The wild case for row or column is "*"
- "all" stands for matching all rows and columns
As a result, "row : *, column : 3" refers to the 3rd column for all rows. Once the templates are defined for the table, Tellurium uses a special way to find a matching for a Ui element "table[i][j]" in the table. For example, the following rules apply: - Tellurium tries to find the template defined for the i-th row, j-th column.
- If not found, Tellurium tries to search for a general template "row: *, column: j", for example, the template for column j.
- If not found, Tellurium tries to search for another general template "row: i, column: *", i.e., the template for row i.
- If not found either, Tellurium tries to find the template matching all rows and columns.
- If still out of luck, Tellurium uses a TextBox as the default element for this element.
Generally speaking, Tellurium always searches for the special case first, then broadening the search for more general cases, until all matching cases are found. In this way, user can define very flexible templates for tables. Table is a type of Container and thus, it can use the Group Locating feature. Table has the following special methods: - boolean hasHeader()
- int getTableHeaderColumnNum()
- int getTableMaxRowNum()
- int getTableMaxColumnNum()
From Tellurium 0.6.0, you can also specify the tbody attribute for the Table object. This may be helpful if the user has multiple tbody elements inside a single table tab. For example, specify tbody as follows: Container(uid: "tables", clocator:[:]){
Table(uid: "first", clocator: [id: "someId", tbody: [position: "1"]]){
......
}
Table(uid: "second", clocator: [id: "someId", tbody: [position: "2"]]){
......
}
...
}UML Class Diagram: 
Standard TableA StandardTable is a table in the following format
table
thead
tr
td
...
td
tbody
tr
td
...
td
...
tbody (multiple tbodies)
tr
td
...
td
...
tfoot
tr
td
...
td For a StandardTable, you can specify UI templates for different tbodies. Apart from the methods in Table, it has the following additional methods: - int getTableFootColumnNum()
- int getTableMaxTbodyNum()
- int getTableMaxRowNumForTbody(int tbody_index)
- int getTableMaxColumnNumForTbody(int body_index)
Example: ui.StandardTable(uid: "table", clocator: [id: "std"]) {
UrlLink(uid: "header: 2", clocator: [text: "%%Filename"])
UrlLink(uid: "header: 3", clocator: [text: "%%Uploaded"])
UrlLink(uid: "header: 4", clocator: [text: "%%Size"])
TextBox(uid: "header: all", clocator: [:])
Selector(uid: "tbody: 1, row:1, column: 3", clocator: [name: "can"])
SubmitButton(uid: "tbody: 1, row:1, column:4", clocator: [value: "Search", name: "btn"])
InputBox(uid: "tbody: 1, row:2, column:3", clocator: [name: "words"])
InputBox(uid: "tbody: 2, row:2, column:3", clocator: [name: "without"])
InputBox(uid: "tbody: 2, row:*, column:1", clocator: [name: "labels"])
TextBox(uid: "foot: all", clocator: [tag: "td"])
}ListList is also a Container type abstract Ui object and it can be used to represent any list like Ui objects. Very much like Table, users can define Ui templates for List and following rule of "the special case first and then the general case". The index number is used to specify an element and "all" is used to match all elements in the List. List also uses TextBox as the default Ui if no template could be found. Since List is a Container type, it can use the Group Locating feature. List has one special attribute "separator", which is used to indicate the tag used to separate different List UI elements. If "separator" is not specified or "", all UI elements must be under the same DOM node, i.e., they are siblings. Example:
List(uid: "subcategory", locator: "", separator: "p"){
InputBox(uid: "2", clocator: [title: "Google Search"])
UrlLink(uid: "all", clocator: [:])
}The List includes the following additional methods: - int getListSize(id): Gets the item count of a list
UML Class Diagram: 
Simple MenuThe SimpleMenu represent a menu without a header and only contains menu items. The default tag is "div" and user should specify the alias name for each menu item. For example, //items is a map in the format of "alias name" : menu_item
ui.SimpleMenu(uid: "IdMenu", clocator:[class: "popup", id: "pop_0"],
items: ["SortUp":"Sort Up", "SortDown":"Sort Down", "HideColumn":"Hide Column"])The above menu specified the menu item "Sort up", "Sort Down", and "Hiden Column" with their alias names. Users should use the alias name to refer the menu item, for instance, "IdMenu.SortUp". The SimpleMenu has the following methods: - click()
- mouseOve()
- mouseOut()
Select MenuSelectMenu is designed for the selecting column menu on the Tellurium Issues page and it is prototyped to demonstrate how to write Ui object with interaction with the DOM since the Ui elements have different patterns at runtime, hence, it is not a general purpose Ui object. SelectMenu could have a header and its menu item content could keep changing when users select different columns to display. The SelectMenu on the Tellurium issues page is expressed as follows, ui.SelectMenu(uid: "selectColumnMenu", clocator:[class: "popup",id: "pop__dot"],
title: "Show columns:", items: ["ID":"ID", "Type":"Type", "Status":"Status",
"Priority":"Priority", "Milestone":"Milestone", "Owner":"Owner",
"Summary":"Summary", "Stars":"Stars", "Opened":"Opened", "Closed":"Closed",
"Modified":"Modified", "EditColumn":"Edit Column Spec..." ])Like SimpleMenu, SelectMenu also has the following methods: - click()
- mouseOve()
- mouseOut()
FrameFrame is a type of Container and is used to mode Frame or IFrame. It includes the following attributes: and the following methods - selectParentFrame()
- selectTopFrame()
- selectFrame(locator)
- getWhetherThisFrameMatchFrameExpression(currentFrameString, target)
- waitForFrameToLoad(frameAddress, timeout)
When you test website with IFrames, you should use multiple window mode, i.e., set the option useMultiWindows to be true in TelluriumConfig.groovy. Be aware that Selenium uses the name attribute to locate a Frame. Example: ui.Frame(uid: "SubscribeFrame", name: "subscrbe"){
Form(uid: "LoginForm", clocator: [name: "loginForm"]){
InputBox(uid: "UserName", clocator: [id: "username", type: "text"])
InputBox(uid: "Password", clocator: [id: "password", type: "password"])
Button(uid: "Login", clocator: [type: "image", class: "login"])
CheckBox(uid: "RememberMe", clocator: [id: "rememberme"])
}
} UML Class Diagram: 
WindowWindow is a type of Container and is used to mode Popup Window. It includes the following attributes: and the following methods - openWindow(String UID, String url)
- selectWindow(String UID)
- closeWindow(String UID)
- boolean getWhetherThisWindowMatchWindowExpression(String currentWindowString, String target)
- waitForPopup(String UID, int timeout)
Example: ui.Window(uid: "HelpWindow", name: "HelpWindow"){
...
}
openWindow helpUrl, "HelpWindow"
waitForPopUp "HelpWindow", 2000
selectWindow "HelpWindow"
...
selectMainWindow()UML Class Diagram: 
OptionOption is also designed to be adaptive the dynamic web. Option is a pure abstract object and it holds multiple UIs with each representing a possible UI pattern at runtime. For example, the List/Grid selector on the issue page can described as: //The selector to choose the data grid layout as List or Grid
ui.Option(uid: "layoutSelector"){
Container(uid: "layoutSelector", clocator: [tag: "div"], group: "true") {
TextBox(uid: "List", clocator: [tag: "b", text: "List", direct: "true"])
UrlLink(uid: "Grid", clocator: [text: "Grid", direct: "true"])
}
Container(uid: "layoutSelector", clocator: [tag: "div"], group: "true") {
UrlLink(uid: "List", clocator: [text: "List", direct: "true"])
TextBox(uid: "Grid", clocator: [tag: "b", text: "Grid", direct: "true"])
}
}Note, the option's uid must be the same as the next UI objects it represent and in this way, you do not need to include option's uid in the UiID. For example, you can just use click "layoutSelector.List" instead of click "layoutSelector.layoutSelector.List" The option object will automatically detect which UI pattern you need to use at runtime.
|
Sign in to add a comment
