Clicking Buttons, Links and Drop downs in Katalon Studio

Along with entering and reading text, clicking on objects will make up many commands within a script. This includes clicking buttons, links, tabs and drop downs. There are multiple click style objects and several ways to define them. Some involve an XPATH notation, while others use a TAG and HREF notation.

For example, to save a Prospect there is an Add button at the bottom of the form. When using the Katalon Recorder, the path to the button is defined as:

//div[@id=’newProspects’]/button

When defining that button as btn-Add New Prospect, the XPATH Equals //div[@id=’newProspects’]/button.

The button can then be clicked using the following command.

WebUI.click(findTestObject(‘Page_/Sales Plan Budget/New Prospect/btn-Add New Prospect’))

While most buttons will use an XPATH reference, links on the page may use the TAG and HREF to define them. For the site I’m working on, we have links for By Month, By Customer, By Category and the path looks like link=byCustomer. How does that translate into Katalon?

It is defined as two pieces, the first is a TAG referencing the object as an anchor. The second is an HREF note defining the link.

The code to click that By Customer link would be the following:

WebUI.click(findTestObject(‘Page_/Sales Dashboard/Links/link-By Customer’))

The next type of object isn’t actually a click action, but it’s closely related since it has a click function. A drop down on a page uses a Select command in code. Sticking with creating Prospects, there is a State drop down on the page. This would be clicked and an option selected from the list, such as NC for North Carolina.

The drop down has several attributes and the one I’m working with is defined as:

These details were captured using the Spy Web feature within Katalon. It can capture and store multiple attributes at one time, and I find it easier and more thorough to capture drop downs using that tool than the stand Katalon Recorder (replacement for the Selenium IDE).

The drop down is defined by it’s NAME, ID and XPATH. There is also a TAG definition that shows the element is a Select object. In reality, the button could be defined by the XPATH, but I like the multiple definitions. It’s easier to see what exactly it is, especially when you came back in three months.

In order to select the drop down and pass in a value, the selectOptionByLabel command is used. There are two parts, one is to click the object, the second is to pass in the value you want to select. For this example, I’m clicking State and selecting North Carolina.

//Select the state from the dropdown

WebUI.selectOptionByLabel(findTestObject(‘Page_/Quote Page Objects/Create Quote/select-Job State’), ‘North Carolina’, false)

For the website I’m working on, the same method is used to select a Phone Type, the Order Type, the Delivery Type, etc. In each case, the object is selected, then a value is passed.

There “select” command also takes the form selectOptionByValue and selectOptionByIndex.

In most cases, a Click action will use an object defined by it’s XPATH. Links use the same Click action, but the reference looks more like the CSS tags associated with it. Finally, there is the Select, used for drop downs.

For most cases the new browser based Katalon Recorder will get the attributes needed to define an object. If you find you can’t select the object with that definition, the Spy Web button within Katalon will grab far more attributes. That may be useful for drop downs and certain types of links.