Examples by Element
This section contains descriptions of different UI elements that can be interacted with using Java App Steps. Each element section specifies the element type, supported attributes, pseudo elements, and example usage.
Button
A Button performs an action when interacted with. It may contain text, an icon, or both.
CSS Selector Details
Element type: button
Attributes:
- text
- toolTipText
Examples
# Click the button whose visible text is 'Submit'
And I click object "cssSelector:button[text = 'Submit']" in java app
# Verify that the button whose visible text contains 'Confirm' is visible in the app
And I see object "cssSelector:button[text *= 'Confirm']" in java app within 3 seconds
# Some buttons may have an Icon instead of text.
# You can find them using their tooltip text
And I click object "cssSelector:button[toolTipText = 'Copy to Clipboard']" in java app
Checkbox
A Checkbox is a control which represents an on/off or selected/not selected value.
CSS Selector Details
Element type: check-box
Attributes:
- label
- toolTipText
Examples
# Toggle the 'Enable Notifications' checkbox
And I click object "cssSelector:check-box[label = 'Enable Notifications']" in java app
# You may want to verify if a checkbox is selected or not
When I assign "isSelected" from object "cssSelector:check-box[label = 'Enable Notifications']" in java app to variable "enable_notifications_is_selected"
# If the checkbox is selected, then its value will be 'true'
Then I verify text $enable_notifications_is_selected is equal to "true"
# If the checkbox is not selected, then its value will be 'false'
Then I verify text $enable_notifications_is_selected is equal to "false"
Text Field
A Text Field is a control that allows the user type a single line of text into the application.
CSS Selector Details
Element type: text-field
Attributes:
- text
- toolTipText
Examples
# Text fields often have tooltip text that is unique to that text field
Given I see object "cssSelector:text-field[toolTipText = 'Enter your username']" in java app within 5 seconds
# Text fields can be located by the text that has been entered into them. This example clears the contents of the text field whose contents are 'adminuser'
Given I clear object "cssSelector:text-field[text = 'adminuser']" in java app
# If the text field is preceded by a label, it can be located by the label text using the Adjacent sibling combinator
Given I see object "cssSelector:label[text = 'Username:'] + text-field" in java app
Password Field
A Password Field is a special kind of text field that masks the content.
CSS Selector Details
Element type: text-field
Attributes:
- toolTipText
Examples
# Password fields often have tooltip text that is unique to that password field
Given I see object "cssSelector:password-field[toolTipText = 'Enter your password']" in java app within 5 seconds
# If the password field is preceded by a label, it can be located by the label text using the Adjacent sibling combinator
Given I see object "cssSelector:label[text = 'Password:'] + password-field" in java app
Menu Item
An item within a menu.
CSS Selector Details
Element type: menu-item
Attributes:
- text
- toolTipText
Examples
# Open the 'File' menu
And I click object "cssSelector:menu-item[text = 'File']" in java app
# Select the 'Copy' menu item
And I click object "cssSelector:menu-item[text = 'Copy']" in java app
# Some menu items may only have icons.
# For example, an application may have a toolbar with differenct actions, each of which is a menu item with an icon.
# You can interact with those menu items by using the toolTipText
And I click object "cssSelector:menu-item[toolTipText = 'Paste']" in java app
Tabbed Pane
A Tabbed Pane consists of a set of tabs and a content area. Selecting a different tab changes the contents of the content area.
CSS Selector Details
Element type: tabbed-pane
Pseudo elements:
- selected-tab
- nth-tab(n)
- all-tabs
Examples
# Verify tab selection
And I see object "cssSelector:tabbed-pane::selected-tab[text = 'notes.txt']" in java app
# Select a specific tab by index
And I click object "cssSelector:tabbed-pane::nth-tab(2)" in java app
# Select a specific tab by tab title
And I click object "cssSelector:tabbed-pane::all-tabs[text = 'Welcome']" in java app
Combo Box
A combo box allows the user to choose an item from a dropdown list. This control may also be known as a Dropdown or a Select.
CSS Selector Details
Element type: tabbed-pane
Pseudo elements:
- nth-option(n)
- all-options
Examples
# Select an option by index
And I click object "cssSelector:combo-box::nth-option(3)" in java app
# Select an option by text
And I click object "cssSelector:combo-box::all-options[text = 'North Carolina']" in java app
Table
A component which displays a grid of cells. Cells may display data, may or may not be editable, and may contain other components, like checkboxes.
CSS Selector Details
Element type: tabbed-pane
Pseudo elements:
- mnth-cell(row, column)
- all-cells
Examples
# Interact with a specific table cell
# In this example, the cell at row 1, column 1
And I click object "cssSelector:table::mnth-cell(1,1)" in java app
# Verify text contents of a specific table cell
# In this example, the cell at row 2, column 3
And I see object "cssSelector:table::mnth-cell(2,3)[text = 'Pizza']" in java app
# Find the cell in the table whose text is 'cheese'
And I click object "cssSelector:table::all-cells[text = 'cheese']" in java app
List
A list of items that supports single or multi-selection.
CSS Selector Details
Element type: tabbed-pane
Pseudo elements:
- nth-item(n)
- all-items
Examples
# Interact with list item by index
# This example will click the 2nd item in the list.
And I click object "cssSelector:list::nth-item(2)" in java app
# Interact with list item by text content
# This example will click the item whose text is 'Tacos'
And I click object "cssSelector:list::all-items[text = 'Tacos']" in java app
Popup Menu (Context Menu)
A Popup Menu is a menu that is displayed on top of the main application UI at the user's mouse location when the user performs a right-click with the mouse.
There can only be one Popup Menu on the screen at a time.
Examples
# Find the popup menu and click the item whose text is 'Carrots'
And I click object "cssSelector:popup-menu > *[text = 'Carrots']" in java app
# Find menu items directly
And I click object "cssSelector:menu-item[text = 'Carrots']" in java app
Dialog Window
A Dialog Window is an Window that appears on top of the main application window. Commonly this window will be a modal window. When a window is a modal window the user must submit information in the window or dismiss the window before they can interact with the main application window again.
Examples
# Verify a dialog window is showing by its title
And I see object "cssSelector:dialog[title = 'Enter User Information']" in java app
# Type into a text field within the dialog
And I type "123 Fake Street" in object "cssSelector:dialog text-field[toolTipText = 'Address']" in java app
# Click a button within the dialog
And I click object "cssSelector:dialog button[text = 'Submit']" in java app
Label
A Label displays text. They are usually non-interactive and may be part of another component, such as a button, checkbox, or other control.
CSS Selector Details
Element type: label
Attributes:
- text
- toolTipText
Examples
# Verify that the label whose visible text contains 'User' is visible in the app
And I see object "cssSelector:label[text *= 'User']" in java app within 3 seconds
# Verify that the label whose visible text is 'Username' is not visible in the app
And I do not see object "cssSelector:label[text = 'Username'] in java app
Editor Pane
An Editor Pane is a rich text entry component. It supports multi-line text entry and may additionally support images or other complex content.
Examples
# Type into the first editor pane in the application
And I type "Hello world!" in object "cssSelector:editor-pane" in java app