How to handle Drop-down menu
What is Drop-down?
A drop-down list [abbreviated drop-down; also known as a drop-down menu] is a graphical control element, 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. When activated, it displays a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value. It is often used in the design of graphical user interfaces, including web design.
This tutorial illustrates how to handle the drop-down list using Katalon Studio built-in keywords.
The below image shows what the sample select command has.
- Index:The index of the option to be selected/deselected.
- Value:Thevalue of the "value" attribute.
- Label: The exactly displayed text of a particular option
Deselect All Options
We have a multi-select drop down as the following, values in a multi-select combo box include Admin, HR, Networking, Developer, Tester. This drop-down 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:
Get the number of selected options['getNumberOfTotalOption']
This keyword returns a Count of number of options which are being selected in the combo box
For example, let's say in the combo box below the values Admin, 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:
Get Number of Total Option[getNumberOfTotalOption]
This keyword returns the number of options listed in the combo box.
Example:
We have a drop-down and want to get the total number of available options in a drop-down then we will use 'getNumberOfTotalOption'.
As it has 5 options in the dropdown it will return a value 5.
Manual Mode:
Script Mode:
Select All Option
It will select all options from the list.
Manual Mode:
Script Mode:
Select Option By Index
It will select the option at the given index. Index always starts from 0.
Example 1:
If we want a select 'Feb' from the below drop down then we will pass input 2 in the value.
Here in this example, we are Validating verify Option Selected By Index Also.
Manual Mode:
Script Mode:
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 exactly displayed text of a particular option.
Example:
If we want to select 'Apr' from the drop-down then we need to pass exactly visible text from it.
In this Example we are also verifying the option is select by Label Value by using Verify option Selected By Label.
Manual Mode:
Script Mode:
Select Option by Value
It will Select the option which has value of the "value" attribute.
Example:
If we want to select 'Mar' from the drop-down then we need to pass the value as 3 as "Mar" has the value as 3 for Value attribute.
Here in this example we are Validating verify Option Selected By Value Also.
Manual Mode:
Script Mode :
Using Katalon built-in keywords we can simple handle dropdowns, 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. You may download the source codehere.
For further instructions and help, please refer to Katalon Studio WebUI tutorials.