How to handle Drop-down menu with Katalon Studio

Handling the Drop-Down Menu 

Get the number of Selected Options

For finding the number of options that are selected by the user, we can use the inbuilt keyword - getNumberOfTotalOption

Script Mode:

//Launch the browser first
WebUI.openBrowser('(Path to your HTML doc)')

//Maximize the Window
WebUI.maximizeWindow()

//Select All options of the dropdown by Select All option
WebUI.selectAllOption(findTestObject('comboBox_days’))

//Then, count the number of selected Values and store in a variable'
SelectedItems = WebUI.getNumberOfTotalOption(findTestObject('comboBox_days'))
println('Number of Selected Options are ' + SelectedItems)

//To Verify the number of Options selected
WebUI.verifyEqual(SelectedItems, 5)

You can also try this code with Online Java Compiler

Run Code

Get Number of Total Options

To get the number of total options in a drop-down, we use the keyword - getNumberOfTotalOption

Script Mode:

//Launch Browser first
WebUI.openBrowser('(Path to the HTML page)')

//Maximizing the window
WebUI.maximizeWindow()

//Counting the total Number of  Values in the dropdown and storing it in a variable
totalOptions = WebUI.getNumberOfTotalOption(findTestObject('comboBox_days'))
println('No of Days are :' + totalOptions)

//To Verify the number of Options in the dropdown
WebUI.verifyEqual(totalOptions, 7)

You can also try this code with Online Java Compiler

Run Code

Select All Option​

To select all options from the list, we write the following script.

Script;

//Launch Browser first
WebUI.openBrowser('(Path to the HTML page)')

//Maximizing the window
WebUI.maximizeWindow()

//Selecting all Options
WebUI.selectAllOption(findTestObject('comboBox_Days'))

//counting the number of selected Values and storing in a variable'
SelectedOptions = WebUI.getNumberOfSelectedOption(findTestObject('comboBox_Days'))

//To Verify the number of selected options 
WebUI.verifyEqual(SelectedOptions, 7)

You can also try this code with Online Java Compiler

Run Code

Select Option By Index​

It’s important to note that the index always starts with 0, just like in arrays in C++.

To select the option at a particular index, for example, if we wish to select the option, Wednesday, we pass the input as 3 in value.

Script Mode:

//Launch Browser first
WebUI.openBrowser('(Path to the HTML page)')

//Maximizing the window
WebUI.maximizeWindow()

//Select the dropdown option by Select option By index Method
WebUI.selectOptionByIndex(findTestObject('dropdown_Day'), 3)

//To Verify the Option
WebUI.verifyOptionSelectedByIndex(findTestObject('dropdown_Day'), 3, wed)

You can also try this code with Online Java Compiler

Run Code

Select Option By Label​

Selecting the option by the label will select the option having the displayed text of a specific option.

If we want to select 'Wednesday' from the drop-down, then we need to pass ‘Wednesday’ only. 

Script Mode:

//Launch Browser first
WebUI.openBrowser('(Path to the html page)')

//Maximizing the window
WebUI.maximizeWindow()

//Select the dropdown value by Select option
WebUI.selectOptionByLabel(findTestObject('dropdown_Day'), 'Wednesday', false)

//Verifying the Option is Selected by Label option
WebUI.verifyOptionSelectedByLabel(findTestObject('dropdown_Day'), 'Wednesday', false, 60)
WebUI.closeBrowser()

You can also try this code with Online Java Compiler

Run Code

Select Option by Value​

This will Select the option having value in the "value" attribute.

E.g. if we want to select 'Tuesday' from the drop-down menu, then we pass the value as ‘tue’ (as given in the Value attribute).

Script Mode:

//Launch Browser first
WebUI.openBrowser('(Path to the HTML page)')

//Maximizing the window
WebUI.maximizeWindow()

//Selecting the Day from Select By value method
WebUI.selectOptionByValue(findTestObject('dropdown_Day'), 'tue,' false)

//To Verify the Option is Selected by Value option
WebUI.verifyOptionSelectedByValue(findTestObject('dropdown_Day'), 'tue', false, 60)
WebUI.closeBrowser()

You can also try this code with Online Java Compiler

Run Code

Deselect All Options​

We can select multiple options in a combo box by using multiple= ‘true’ .

For deselecting all the options, we use the keyword deselectAllOption. It de-selects the selected items in a combo box.

Script Mode:

//Launch Browser first
WebUI.openBrowser('(Path to the HTML page)')

//Maximizing the window
WebUI.maximizeWindow()

//Selecting all the Options
WebUI.selectAllOption(findTestObject('comboBox_Day'))

//Deselecting all the options
WebUI.deselectAllOption(findTestObject('comboBox_Day'))

You can also try this code with Online Java Compiler

Run Code

Frequently Asked Questions

What is a Katalon Keyword?

Keywords are built-in words to ease and increase functionality.

Which tag do we use to create a drop-down menu?

We use the select tag to create a drop-down menu in HTML.

What is the value attribute of the Select tag?

The value of the "value" attribute refers to the value that will be sent to the server after submitting the form. 

Conclusion

We hope the blog helped you successfully understand the handling of the Drop-Down menu in Katalon Studio. 

If you found this blog interesting and insightful, refer to similar blogs:

Web Application Testing Tools

Web API introduction

Terminate, Upgrade and Downgrade the webdrivers in Katalon Studio

Refer to the Basics of C++ with Data Structure, DBMS, and Operating System by Coding Ninjas, and keep practicing on our platform Coding Ninjas Studio. You can check out the mock test series on code studio.

You can also refer to our Guided Path on Coding Ninjas Studio to upskill yourself in domains like Data Structures and Algorithms, Competitive Programming, Aptitude, and many more! Refer to the interview bundle if you want to prepare for placement interviews. Check out interview experiences to understand various companies' interview questions.

Give your career an edge over others by considering our premium courses!

Happy Learning!