Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Handle Dropdowns Using Katalon Studio

DZone's Guide to

How to Handle Dropdowns Using Katalon Studio

Let's see how we can use Katalon Studio to help test and verify a number of options for dropdowns, combo boxes, and more.

· DevOps Zone ·
Free Resource

The need for DevOps innovation has never been greater. Get the results from over 100 business value assessments in this whitepaper, Digital Darwinism: Driving Digital Transformation, to see the positive impact of DevOps first hand.

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

DropDown Methods Explanation

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.

Multiple Attribute

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

DeSelectAll Manual

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.

Get-Number-Of-Selected-Options-Example

Manual Mode

Get_Number_of_Selected_Option_manual

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’.

Total_Options_Image

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

Manual Mode

Get Number of Total Options Manual

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

SelectAll Manual

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.

Select by Index Example

Manual Mode

SelectbyIndex manual

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_options_by_passing_Range_value

Input_Dialog_Box

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.

SelectByLabel_Expample

Manual Mode

Select_option_By_label_Manual

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.

SelectByValue Example











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.

Interested in Kubernetes but unsure where to start? Check out this whitepaper, A Roundup of Managed Kubernetes Platforms from Codeship by Cloudbees, for an overview and comparison of Kubernetes platforms. 

Topics:
automation testing ,automation solution ,dropdown ,devops

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}