How to Handle Textbox Checkbox and Radio Button with katalon studio

Introduction

Hello Reader!!

Let’s move ahead with Katalon. We already know to create a test case in Katalon. Let us now go inside these test cases and learn to handle the different features available on a web page. Today, we are going to learn to handle the Textbox, Checkbox, and Radio Button with Katalon studio. We will see both the manual mode as well as the script mode.

So, without any further ado, let’s get started!!

Handling Textbox, Checkbox, and Radio Button

Handling the Textbox

Textbox

A textbox is a field in which users can enter the text as input. Textboxes and textareas are similar, the only difference is that the latter allows for more lines and characters.

Using the Katalon studio, we can perform actions like clear text, type text, and validate the provided text on textboxes.

Let us take an example to understand managing textbox in Katalon.

Scenario: Verifying the given text in the textbox

Let us take the example of the Healthcare sample provided in Katalon studio.

Follow the steps below to verify a given text in the textbox.

Launch the Browser.
Navigate to the URL.
Click on the Make appointment option.
Enter the username as “Katalon”.
Validate the username to check if the username entered is correct or not.

Manual Mode

Script Mode

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testng.keyword.TestNGBuiltinKeywords as TestNGKW
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
import internal.GlobalVariable as GlobalVariable
import org.openqa.selenium.Keys as Keys

WebUI.openBrowser('')

'Opening the browser\r\n'
WebUI.navigateToUrl('https://katalon-demo-cura.herokuapp.com/')

'Passing the URL\r\n'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service/a_Make Appointment'))

'Click on Make Appointment Button\r\n'
def userName = 'katalon'

'Declare a variable called username and assign a value to it'
WebUI.setText(findTestObject('Page_CURA Healthcare Service/input_Username_username'), userName)

'Enter the text you want to the username field\r\n'
input_Value = WebUI.getAttribute(findTestObject('Page_CURA Healthcare Service/input_Username_username'), 'value')

'Getting the attribute value of the username text field\r\n'
WebUI.verifyMatch(userName, input_Value, false)

'verifying the entered text and the attribute value'
WebUI.closeBrowser()

You can also try this code with Online Javascript Compiler

Run Code

In the script mode, def is a Groovy keyword used for variable declaration. The username is a variable name that has the value "Katalon" in this case.

Handling Button and Checkbox

Scenario: Making an appointment

Follow the steps below to understand the handling of the buttons and checkboxes in Katalon studio.

Run the test application(https://katalon-demo-cura.herokuapp.com/ ).
Select Make Appointment (verify the button and click operation).
Enter a valid username and password, then click on the Login button (verify the button and click operation).
Book an appointment (check, uncheck the Radio Button and verify the radio button check, uncheck status).

Manual Mode

Script Mode

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testng.keyword.TestNGBuiltinKeywords as TestNGKW
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
import internal.GlobalVariable as GlobalVariable
import org.openqa.selenium.Keys as Keys

'Launch  Browser\r\n'
WebUI.openBrowser('')

'Navigate to the URL'
WebUI.navigateToUrl('https://katalon-demo-cura.herokuapp.com/')

'Verify whether the element is clickable or not'
WebUI.verifyElementClickable(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/a_Make Appointment'))

'Click on the Make Appointment option'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/a_Make Appointment'))

'Click on the Login button\r\n'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/button_Login'))

'select the Seoul CURA Healthcare center'
WebUI.selectOptionByValue(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/select_Tokyo CURA Healthcare Center        _5b4107'), 
    'Seoul CURA Healthcare Center', true)

'Check the Hospital readmission check box'
WebUI.check(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/label_Apply for hospital readmission'))

'Verify whether the Hospital readmission checkbox is checked or not'
WebUI.verifyElementChecked(findTestObject('Page_CURA Healthcare Service (1)/label_Apply for hospital readmission'), 30)

'ub check the Hostpital readmission check box'
WebUI.uncheck(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/label_Apply for hospital readmission'))

'verify uncheck Hostpital readmission check box'
WebUI.verifyElementNotChecked(findTestObject('Page_CURA Healthcare Service (1)/label_Apply for hospital readmission'), 30)

'click on the Medicadi radio button'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/label_Medicaid'))

'click on the calender icon'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/input_Visit Date (Required)_visit_date'))

'select the date'
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/td_13'))

'enter "Katalon Studio" in the comment box'
WebUI.setText(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/textarea_Comment_comment'), 'Katalon Studio')

'click on Book Appointment '
WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (1)/button_Book Appointment'))

'Close the Browser'
WebUI.closeBrowser()

You can also try this code with Online Javascript Compiler

Run Code

In the above script, the VerifyElementClickable keyword is used to check whether the Make Appointment Button is clickable or not.

VerifyElementChecked and VerifyElementNotChecked are the keywords that are used to validate whether an element is checked or unchecked.

Handling the Radio Button

A radio button is a toggle button, it allows you to check a particular operation.

Scenario: Making an appointment

Follow the steps below to understand the handling of the buttons and checkboxes in Katalon studio.

Run the test application(https://katalon-demo-cura.herokuapp.com/ ).
Select Make Appointment (verify the button and click operation).
Enter a valid username and password, then click on the Login button (verify the button and click operation).
Book an appointment (check, uncheck the Radio Button and verify radio button check, uncheck status).

Manual Mode

Script Mode

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testobject.ObjectRepository.findWindowsObject
import com.kms.katalon.core.checkpoint.Checkpoint as Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testng.keyword.TestNGBuiltinKeywords as TestNGKW
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.windows.keyword.WindowsBuiltinKeywords as Windows
import internal.GlobalVariable as GlobalVariable
import org.openqa.selenium.Keys as Keys

WebUI.openBrowser('')

WebUI.navigateToUrl('https://katalon-demo-cura.herokuapp.com/')

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/a_Make Appointment'))

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Demo account_form-control'))

WebUI.setText(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Username_username'), 'John Doe')

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Demo account_form-control_1'))

WebUI.setEncryptedText(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Password_password'), 'g3/DOGG74jC3Flrr3yH+3D/yKbOqqUNM')

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/button_Login'))

WebUI.selectOptionByValue(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/select_Tokyo CURA Healthcare Center        _5b4107'), 
    'Seoul CURA Healthcare Center', true)

WebUI.check(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Apply for hospital readmission_hospit_63901f'))

'Check Medicaid radio button'
WebUI.check(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Medicaid_programs'))

WebUI.verifyElementChecked(findTestObject('Page_CURA Healthcare Service/input_Medicaid_programs'), 30)

WebUI.check(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/label_None'))

'Verify unchecked status of Medicaid radio button'
WebUI.verifyElementNotChecked(findTestObject('Page_CURA Healthcare Service/input_Medicaid_programs'), 30)

'Verify check status of None radio button'
WebUI.verifyElementChecked(findTestObject('Page_CURA Healthcare Service/label_None'), 30)

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/input_Visit Date (Required)_visit_date'))

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/td_8'))

WebUI.setText(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/textarea_Comment_comment'), 'Katalon Studio')

WebUI.click(findTestObject('Object Repository/Page_CURA Healthcare Service (2)/button_Book Appointment'))

WebUI.closeBrowser()

You can also try this code with Online Javascript Compiler

Run Code

Frequently Asked Questions

How do I verify a checkbox?

The isSelected() function over the checkbox element may be used to determine whether a checkbox is checked or unchecked. If the checkbox is checked, the isSelected() function produces a boolean value of true; otherwise, it returns a false value.

How does Katalon check dynamic text?

To check the dynamic text, Katalon uses use a combination of WebUI. getText() and WebUI. verifyMatch().

What is a check box with an example?

A checkbox (also known as a checkbox, tickbox, or tick box) is a graphical widget that enables users to select one of two potentially mutually exclusive options.

Conclusion

In this article, we learned to handle Textboxes, Checkboxes, and Radio Buttons in Katalon by taking examples from the Healthcare sample project in Katalon.

We hope that this blog has helped you understand the Katalon Studio and its working. To learn more about Katalon and its several features, you can refer to

You can also visit our website to read more such blogs. Make sure you enroll in the courses we provide, take mock tests, solve problems, and interview puzzles. Also, you can prepare for interviews with interview experiences and an interview bundle.

Keep learning and keep growing, Ninjas!