Skip to main content
Version: current

Create test cases using Record and Playback in Katalon Studio

Test recording is the easiest way for new automation testers to start learning test automation. Identifying objects on applications is time-consuming. The Web Recorder Utility function captures your actions being performed on the application and converts them into runnable code in the back-end.

You can quickly automate a few functionalities of your app and save time by recording actions that have to be performed many times in iterative builds. This function supports recording and running the same tests on multiple browsers. This document shows you how to:

  1. Record test with the Record Web function
  2. Rename Page Folders and Elements while runtime recording

Record Test with the Record Web function

Scenario: To make an appointment

  1. Launch the application under test (Example: http://demoaut.katalon.com/)
  2. Click the Make Appointment button
  3. Enter a valid username, password, and click Login
  4. Make an appointment

Follow the below steps to get familiar with the Record & Playback feature for Web UI tests

Step 1: Launch Katalon Studio and click New > Test Case on the main toolbar. Provide a name for your test case and click OK. An empty test case is created.

new test case

Step 2: Click Record Web from the main toolbar.

record web

Step 3: The Record dialog displays.

record web dialog

Step 4: Select a browser, then click Record to start recording the test case.

select browser

Step 5: Once your application has been launched, click on the Make Appointment button. You are directed to the Login page.

make appointment

Step 6: Enter valid username and password (John Doe and ThisIsNotAPassword), then click Login.

Step 7: Once the Make Appointment page has been loaded, select the value Hongkong CURA Healthcare Center from the Facility dropdown menu.

set facility

Step 8: Select the Apply for hospital readmission checkbox.

Step 9: Then move the cursor to click on the Medicaid checkbox.

Step 10: Click the calendar icon next to Visit Date (Required). Select a date.

set date

Step 11: Enter text in the Comment field.

Step 12: Click Book Appointment.

Step 13: You can stop the recording anytime by clicking Stop. You can select the Selection Method for the captured objects. The Basic mode is recommended to manual testers who have just started automated testing. With basic mode, Katalon Studio automatically generates robust and unique selectors for captured objects.

Advanced testers who want to manually input the selectors have the option to choose between CSS and XPath modes. For more details about Selection Method, refer to Manage Web Test Objects.

selection method

Step 14: When you are done recording, click OK to save the recorded actions into Katalon Studio.

You are prompted to save captured objects to the Object Repository, which can be reused whenever needed. You can also create a folder to maintain page objects in desired structure. Click OK to continue.

add element

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

manual mode

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

Script Code for Record and Playback

WebUI.openBrowser('')

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

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

To organize your test scripts in page object pattern, you need to add test objects in the folder corresponding to the page. This action helps you reuse and maintain the objects.

Scenario: Login with valid data

  1. Launch the application under test (Example: http://demoaut.katalon.com/)
  2. Click the Make Appointment button
  3. Enter a valid username, password, and click Login

Step 1: Launch Katalon Studio and go to File > New > Test Case on the main toolbar. Provide a name for your test case and click OK. An empty test case is created.

change element name

Step 2: Click Record Web on the main toolbar.

record web

Step 3: The Record dialog displays. Select a browser and click the Record button to start recording the test case.

select browser

Step 4: Once your application has been launched, click on the Make Appointment button. You are directed to the Login page.

captured object

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

Step 7: In the Captured Objects frame, select the a_Make Appointment element.

Step 8: Rename the element name from "a_Make Appointment" to "button_Make Appointment."

button

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

login

Step 10: Repeat the same steps above to change the name of the object Login and its folder.

Step 11: You can stop recording by clicking Stop. Click OK to save recorded actions into Katalon Studio.

Step 12: You are prompted to save the captured objects to Object Repository, which can be reused whenever needed. You can also create a folder to maintain page objects in your desired structure. Click OK to continue.

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

test case

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

Source Code:

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
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()

Thus we can record the actions being performed using Katalon Studio. However, there are a few actions which cannot be recorded.

What cannot be recorded?

Though recording your tests saves time, we cannot validate some scenarios such as Web Table handling, switching to multiple frames, switching to windows, handling captcha, image recognition, and video playbacks.

You can download the source code here.

For further instructions and help, you can refer to Recording WebUI Test tutorial.