How to Handle Dropdowns Using Katalon Studio

A dropdown menu contains a list of options. This tutorial illustrates how to handle dropdown lists using Katalon Studio's built-in keywords.

The following image shows what the sample select command has.

1. Index: the index of the option to be selected/deselected.
2. Value: value of the “value” attribute.
3. Label: The exactly displayed text of a particular option

Deselect All Options

Deselect all options: We have a multi-select dropdown has the following values in a multi-select combo box including Admin, HR, Networking, Developer, and Tester. This dropdown allows users to select multiple items.

We already have several items selected, for example, and now we want all selected items to be deselected. How can we accomplish this using Katalon?

We have a keyword called “deselectAllOption”. This will deselect all the selected items in a combo box.

Manual Mode

Script Mode

'Launch Browser'

WebUI.openBrowser('C:\\\\Users\\\\User\\\\Desktop\\\\DropDown\\\\MultiSelection_dropDown.html')

'Maximize the window'

WebUI.maximizeWindow()

'Select all the Options'

WebUI.selectAllOption(findTestObject('comboBox_Role'))

'Deselect all the options'

WebUI.deselectAllOption(findTestObject('comboBox_Role'))

'Taking the count of number of Selected Options and Storing it in a variable'

NoOfSelectedOptions = WebUI.getNumberOfSelectedOption(findTestObject('comboBox_Role'))

'After Deselect verifying the Number of Selected options with Actual result to Expected'

WebUI.verifyEqual(NoOfSelectedOptions, 0)

Get the Number of Selected Options (getNumberOfSelectedOption)

getNumberOfSelectedOption: This keyword returns a count of the number of options that are being selected in the combo box.

For example, let’s say in the combo box below that the values Admin and HR are selected. If we want to get the number of selected options, we can use the keyword ‘getNumberOfTotalOption’. In this case, it will return 2.

Manual Mode

Script Mode

'Launch Browser'

WebUI.openBrowser('C:\\\\Users\\\\User\\\\Desktop\\\\DropDown\\\\MultiSelection_dropDown.html')

'Maximize the window'

WebUI.maximizeWindow()

'Select All values available in the dropdown by Select All option'

WebUI.selectAllOption(findTestObject('comboBox_Role'))

'Capturing the Number of selected Values and storing it in a variable'

SelectedItems = WebUI.getNumberOfTotalOption(findTestObject('comboBox_Role'))

println('No of Selected Roles are ' + SelectedItems)

'Verifying the number of Options selected with Expected result'

WebUI.verifyEqual(SelectedItems, 5)

Get Number of Total Option (getNumberOfTotalOption)

getNumberOfTotalOption: This keyword returns the number of options listed in the combo box.

Example:

If we have a dropdown and want to get the total number of available options in a dropdown, then we will use ‘getNumberOfTotalOption’.

As it has 5 options in the dropdown, it will return a value 5.

Manual Mode

Script Mode

'Launch Browser'

WebUI.openBrowser('C:\\\\Users\\\\User\\\\Desktop\\\\DropDown\\\\MultiSelection_dropDown.html')

'Maximize the window'

WebUI.maximizeWindow()

'Capturing the Toal Number of  Values in the dropdown and storing it in a variable'

TotalOptions = WebUI.getNumberOfTotalOption(findTestObject('comboBox_Role'))

println('No of Roles are :' + TotalOptions)

'Verifying the number of Options in the dropdown with Expected result'

WebUI.verifyEqual(TotalOptions, 5)

Select All Options

Select All Option: This will select all options of the list.

Manual Mode

Script Mode

'Launch Browser'

WebUI.openBrowser('C:\\\\Users\\\\User\\\\Desktop\\\\DropDown\\\\MultiSelection_dropDown.html')

'Maximize the window'

WebUI.maximizeWindow()

'Selecting all Options'

WebUI.selectAllOption(findTestObject('comboBox_Role'))

'Capturing the Number of selected Values and storing it in a variable'

SelectedOptions = WebUI.getNumberOfSelectedOption(findTestObject('comboBox_Role'))

'Verifying the number of selected options with Expected result'

WebUI.verifyEqual(SelectedOptions, 5)

Select Option By Index

Select Option By Index: This will select the option at the given index. Indexes always start from 0.

Example 1:

If we want a select ‘Feb’ from the dropdown below, then we will pass the input 2 in the value.

Here in this example, we are validating the Option Selected By Index as well.

Manual Mode

Script Mode

'Open browser'

WebUI.openBrowser('file:///C:/Users/User/Desktop/Dropdown.html')

'Maximize the Window'

WebUI.maximizeWindow()

'Select the dropdown value by Select option By index Method'

WebUI.selectOptionByIndex(findTestObject('dropdown_Month'), 2)

'Verifying the Option is Selected by Index option'

WebUI.verifyOptionSelectedByIndex(findTestObject('dropdown_Month'), 2, 60)

Example 2:

If we want a select Feb to Apr from the combo box below, then we will pass the input as Value 2-4 and Value type as String.

Select Option By Label

Select Option By Label: This will select the option that has the exact displayed text of a particular option.

Example

If we want to select ‘Apr’ from the dropdown, then we need to pass the exactly visible text from the dropdown.

In this example, we are also verifying that the option is select by Label Value by using the Verify option Selected By Label.

Manual Mode

Script Mode

'Open browser'

WebUI.openBrowser('file:///C:/Users/User/Desktop/Dropdown.html')

'Maximize the Window'

WebUI.maximizeWindow()

'Select the dropdown value by Select option By Label Method'

WebUI.selectOptionByLabel(findTestObject('dropdown_Month'), 'Apr', false)

'Verifying the Option is Selected by Label option'

WebUI.verifyOptionSelectedByLabel(findTestObject('dropdown_Month'), 'Apr', false, 60)

WebUI.closeBrowser()

Select Option By Value

Select Option by Value: This will select the option that has a value of the “value” attribute.

Example

If we want to select ‘Mar’ from the dropdown below, we need to pass the value as 3 as Mar has the value as 3 for Value attribute.

In this example, we are Validating the verify Option Selected By Value Also.

Manual Mode

Script Mode

'Open browser'

WebUI.openBrowser('file:///C:/Users/User/Desktop/Dropdown.html')

'Maximize the window'

WebUI.maximizeWindow()

'Selecting the month from Select By value method'

WebUI.selectOptionByValue(findTestObject('dropdown_Month'), '3', false)

'Verifying the Option is Selected by Value option'

WebUI.verifyOptionSelectedByValue(findTestObject('dropdown_Month'), '3', false, 60)

WebUI.closeBrowser()

Using Katalon built-in keywords, we can handle simple dropdowns. We will look into other scenarios of dropdowns such as ‘verifying dropdown values are in alphabetical order’, ‘verifying expected and actual dropdown values’ using custom keywords. You may download the source code here.

For further instructions and help, please refer to Katalon Studio WebUI tutorials.