Creating test cases using Record & Playback

Estimated reading time: 6 minutes

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 will show 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 will be created.

Create-Test-Case

Step 2: Click Record Web from the main toolbar.

Record-Web

Step 3: The Record dialog will be displayed.

Web recorder

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

recording-test-case

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

Make-Appointment

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

Login-to-Make-Appointment

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

Make-Appointment-page

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.

Calendar

Step 11: Enter text in the Comment field.

Step 12: Click Book Appointment.

Step 13: You can stop the recording anytime by clicking Stop. Katalon Studio allows users to 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 will automatically generate 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 this guide.

Katalon Web Recorder

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

You will be 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.

Object-Repository

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

Recorded-objects

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/')</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

To organize your test scripts in page object pattern, you need to add test objects in the folder corresponding to the page. This will help 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 click First Test Case on the main toolbar. Provide a name for your test case and click OK. An empty test case will be created.

Change-Element-Name

Step 2: Click Record Web on the main toolbar.

Record-Web

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

recording-test-case

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

Record-Dialog-Box

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

Web-Recorder-Utility

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

Login-to-Make-Appointment

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

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

Web-Recorder-Utility-2

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

Step 13: You will be 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.

Objects-repository

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

Recorded-objects-and-actions

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()


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, please refer to Recording WebUI Test and Record and Playback tutorials.

User Contributed Notes