Skip to main content

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

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

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