One of the easiest and most effective ways for freshers to start learning test automation is through the test recording method. With Katalon Studio, it provides a Web Recorder Utility function to ensure all actions being performed on the application are captured and converted into runnable code in the back-end.

This function is highly useful in helping you save time and avoid iterative builds by recording actions and reuse them. Additionally, the record and playback feature also allows recording and running the same tests on multiple browsers.

Make sure you already downloaded Katalon Studio at www.katalon.com

Record Test with the Record Web function

Scenario: Making an appointment

1. Launch the application under test *Example: http://demoaut.katalon.com/
2. Click Make Appointment
3. Provide a valid username, password, then click Login
4. Make an appointment

The following steps will help you get used to the Record & Playback feature for Web UI tests:

Step 1: Launch Katalon Studio, on the main toolbar:

Select New > Test Case and provide a name for the test case, then click OK to create a new test case.

Step 2: Click Record Web on the main toolbar.

You will see the Record dialog as below:

Step 3: Select a browser in the drop-down list, then click Record.

Step 4: Click Make Appointment once the application has finished loading. After that, it will direct to the Login page.

Step 5: Provide a username and password, ex: John Doe and ThisIsNotAPassword. Then click Login.

Step 6: Once the Make Appointment page has finished loading, in the Facility dropdown menu, choose option Hongkong CURA Healthcare Center.

Step 7: Select the Apply for hospital readmission checkbox.

Step 8: In the “Healthcare program” section, select the Medicaid checkbox.

Step 9: Click on the calendar icon and select a day in the Visit Date (Required) section.

Step 10: Input some text in the Comment field.

Step 11: Click Book Appointment.

Notes:

• Click the Stop button to stop recording at any time.
• For captured objects, you can choose between Basic, XPath and CSS in the “Selection Method”.
• For fresh manual testers, the Basic mode is highly useful as it automatically generates robust and unique selectors for captured objects.

Step 12: Once you’ve done recording, click OK to save all actions into Katalon Studio.

You will be asked to save the captured objects to the Object Repository folder so that they can be reused whenever needed. Plus, you can create a folder to maintain the page objects in any desired structure, then click OK.

Step 14: Recorded objects and actions will be saved in the test case, see below.

Click Run to execute the recorded test cases in any browser.

Script Code for Record and Playback

WebUI.openBrowser('')

WebUI.navigateToUrl('http://demoaut.katalon.com/')</p>

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

WebUI.click(findTestObject('Page_CURA Healthcare Service (1)/button_Login'))

WebUI.selectOptionByValue(findTestObject('Page_CURA Healthcare Service (2)/select_facility'), 'Hongkong CURA Healthcare Center',

true)

WebUI.click(findTestObject('Page_CURA Healthcare Service (2)/input_hospital_readmission'))

WebUI.click(findTestObject('Page_CURA Healthcare Service (2)/input_programs'))

WebUI.click(findTestObject('Page_CURA Healthcare Service (2)/div_input-group-addon'))

WebUI.click(findTestObject('Page_CURA Healthcare Service (2)/td_3'))

WebUI.setText(findTestObject('Page_CURA Healthcare Service (2)/textarea_comment'), 'Katalon')

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

WebUI.closeBrowser()

Rename Page Folders and Elements while Recording

Organize your test scripts in page object pattern by adding test objects in the corresponding folder. Doing this helps you to reuse and maintain the objects efficiently.

Scenario: Login with valid data

1. Launch the application under test

* In this example: http://demoaut.katalon.com/

2. Click Make Appointment

3. Provide a valid username, password, then click Login 

Step 1: Launch Katalon Studio and select First Test Case on the main toolbar.

Enter a name and click OK to create an empty test case.

Step 2: On the main toolbar, click Record Web.

 To start recording the test case, choose a browser (Firefox, Chrome, IE) then click Record.

Step 3: Click Make Appointment once the application has launched. Then, it will direct to the Login page.

Step 4: Rename the page from "Page_CURA Healthcare Service" to "Page_Home Page."

Step 5: Select the “a_Make Appointment” element in the “Captured Objects” frame.

Step 6: Rename from "a_Make Appointment" to "button_Make Appointment."

Step 7: Go back to the recording browser and continue recording. Click Login.

Step 8: Repeat the previous steps to rename the Login object and its folder.

Step 9: Rename the Page from "Page_CURA Healthcare Service" to "Page_Login."

Step 10: Click Stop to stop recording. To save the recorded actions, click OK.

Step 11: You will be prompted to save the captured objects to the Object Repository folder so that they can be reused whenever needed. Moreover, create a folder to maintain the page objects in your desired structure. Click OK to continue.

Step 12: Recorded objects and actions are saved in the test case, as shown below.

Click Run to execute the recorded test cases in your desired browser.

Source Code

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject</p>

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')

WebUI.navigateToUrl('http://demoaut.katalon.com/')

WebUI.click(findTestObject('Page_Home Page/button_Make Appointment'))

WebUI.click(findTestObject('Page_Login/button_Login'))

WebUI.closeBrowser()

Conclusion

This guide aimed at helping you quickly get on with the record and playback functions in Katalon Studio. To fully grasp the tool’s functionalities and advantages, explore other tutorials and download Katalon Studio at www.katalon.com.