A drop-down list (abbreviated drop-down, also known as a drop-down menu) is a graphical control element. Additionally, it is similar to a list box that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. Similarly, when activated, it shows a list of values from which the user may select one. In addition to this, when the user selects a new value, the control reverts to its inactive state, displaying the selected value. Moreover, it often designs graphical user interfaces, including web design.
Subsequently, this tutorial illustrates how to handle the drop-down menu using Katalon Studio built-in keywords. Additionally, in this tutorial we will understand the below topics:-
- What is Drop-down?
- How to deselect all options?
- Get the number of selected options
- Get the number of total option
- How to select all options?
- How to select an option by number?
- Select option by index
- Select option by value
The below image shows what the sample select command has.
- Index: The index of the option to be selected/deselected.
- Value: The value of the “value” attribute.
- Label: The correctly displayed text of a particular option
Deselect All Options
We have a multi-select drop-down menu as the following values in a multi-select combo box include Admin, HR, Networking, Developer, Tester. Additionally, this drop-down allows users to select multiple items.
For example, we already have several items selected. And, now we want all chosen items to deselect. How can we accomplish this using Katalon?
We have a keyword called “deselectAllOption.” In other words, it will deselect all the selected items in a combo box.
Manual Mode:
Script Mode:
[crayon]
‘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)
[/crayon]
Get the number of selected options (‘getNumberOfTotalOption’)
This keyword returns a Count of the number of options which select in the combo box
For example, let’s say in the combo box below the values Admin, HR is selected. Now, if we want to get the number of selected options, we can use the keyword ‘getNumberOfTotalOption.’ Consequently, in this case, it will return 2.
Manual Mode:
Script Mode:
[crayon]
‘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)
[/crayon]
Get Number of Total Option (getNumberOfTotalOption)
This keyword returns the number of options listed in the combo box.
For Example:
We have a drop-down menu and want to get the total number of available options in a drop-down. Consequently, we will use ‘getNumberOfTotalOption.’
As it has five options in the drop-down menu, it will return a value 5.
Manual Mode:
Script Mode:
[crayon]
‘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)
[/crayon]
Select All Option
It will select all options from the list.
Manual Mode:
Script Mode:
[crayon]
‘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)
[/crayon]
Select Option By Index
It will select the option at the given index. Moreover, the index always starts at 0.
For Example:
If we want a select ‘Feb’ from the below drop down, then we will pass input 2 in the value.
Additionally, here in this example, we are Validating verify Option Selected By Index Also.
Manual Mode:
Script Mode:
[crayon]
‘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)
[/crayon]
Example 2:
If we want a select Feb to Apr from the below combo box then we will pass input as Value 2-4 and Value type as String.
Select Option By Label
It will select the option which has the correctly displayed text of a particular option.
For Example:
If we want to select ‘Apr’ from the drop-down, then we need to pass precisely visible text from it.
Moreover, in this example, we are also verifying the option is select by Label Value by using the Verify option Selected By Label.
Manual Mode:
Script Mode:
[crayon]
‘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()
[/crayon]
Select Option By Value
It will Select the option which has a value of the “value” attribute.
For Example:
If we want to select ‘Mar’ from the drop-down, then we need to pass the value as 3 because “Mar” has the value as 3 for the Value attribute.
Subsequently, here in this example, we are Validating verify Option Selected By Value Also.
Manual Mode:
Script Mode :
[crayon]
‘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()
[/crayon]
Conclusively, using Katalon built-in keywords we can simply handle dropdowns. Additionally, we will look into other scenarios of dropdowns such as ‘verifying dropdown values are in alphabetical’, ‘verifying expected and actual dropdown values’ using custom keywords. Moreover, you may download the source code here.
