Compose Custom Actions

In the Compose Method tutorial, we combined several actions applied to the basic elements into one composed method.

The same approach can be applied to propagate the API of a custom element to the level of its parent page object.

For example, a tabset contains multiple tabs with content. Let's assume that a developer needs a method in tabset that gets the text from each tab as an array (JavaScript) or as a list (Java).

  1. in tab.utam.json declare a getContent method that gets the text inside the tab.
{
    "name": "getContent",
    "compose": [
        // statements
    ]
}
  1. in tabset.utam.json, declare tabs as an element. Since a tabset has multiple tabs, its selector sets returnAll to true:
{
    "name": "tabs",
    "type": "tutorial/tab",
    "selector": { "returnAll": true, "css": "example-tabcontent" }
}
  1. in tabset.utam.js, add a getTabsContentList compose method that references the tabs element and applies a method ("apply": "getContent"):
{
    "name": "getTabsContentList",
    "compose": [
        {
            "returnType": "tutorial/tab",
            "element": "tabs",
            "apply": "getContent"
        }
    ]
}

Since tabs is a list (returnAll is set to true inside the selector), the getContent action is applied to each tab in the list. The returnType property indicates to the compiler that each tab is a "tutorial/tab" custom type.

The compiler generates the getTabsContentList method that first gets the list of tabs. The getContent method is applied to each tab and getTabsContentList returns a list of strings.

This tutorial also shows an alternative approach to return the text for a particular tab. The tabset.utam.json page object declares a getTabContent compose method that returns a string with the content for a particular tab. This approach declares a tab element with an index as a selector parameter.

The test exercises both getTabsContentList and getTabContent.

Previous Next