Skip to main content

[WebUI] Create and Run Web UI Test Case using Record and Playback in Katalon Studio

This tutorial demonstrates how to create a Web UI test case with Katalon Studio using Record and Playback.

Go through the scenario "Sign in the shopping page to purchase a tank top" to get familiar with these features. The basic steps are:

  1. Create a new project to store recorded actions.
  2. Interact with the web page.
    • Sign in.
    • Purchase a tank top.
  3. Stop recording and Save scripts.

Shopping Cart sample project is available here.

Create and Run your first Web UI test case​

Create New Project​

  1. In the Test Explorer on the sidebar > click New Project.

  2. In the displayed New Project dialog:

    • Enter project Name.
    • In project Type, select Web.
    • In Project, select Sample Web UI...(Shopping Cart), the Repository URL is filled automatically.

    • Browse a Location to store your project > click OK.



Record​

  1. From the main toolbar, click on Web Recorder Utility icon to open the Web Recorder.



  2. In the displayed Web Recorder:

    • Enter URL: https://demo-store.katalon.com.

    • Select a browser to start recording (Chrome is recommended).



  3. Wait until the browser is launched and ready to interact.

    When you hover an element, the browser highlights and displays that element's correspondent XPath on the top of the page.



    Tip:

    You can use hotkeys to capture objects. The default currently for Chrome and Firefox browsers is ⌥+` for Mac (or Ctrl+` for Windows). The captured object will be highlighted with a green border.

    For more information on how to configure the hotkey settings, see: Object Spy Preferences in Katalon Studio.

  4. Interact with the web page. In this scenario, we will sign in and purchase a tank top.

    During your recording, Katalon Web Recorder captures all the objects that you have interacted with. When you enter the Password field, Katalon Web Recorder uses the 'Set Encrypted Text' keyword automatically. This input value will be encrypted to ensure security.



  5. Once you finish purchasing > click Save script to stop recording and save the captured objects. Katalon Web Recorder exports a list of objects used in the test case.

    Create a new folder or select an existing one in Object Repository > click OK.



    Note:
    • Katalon Studio allows you to continue recording using the existing test case to reduce your effort on modifying existing ones.

Playback a test case​

To playback the recorded scenario:

  1. Select the test case where you saved the recorded actions.

  2. From the main toolbar, select any browser on the drop-down list next to Run.

    Katalon Studio will execute the chosen test case with the recorded steps accordingly.

    Playback

View the test case in 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://demo-store.katalon.com/')

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/svg_Zack Market_svg-inline--fa fa-user fa-w-14'))

WebUI.setText(findTestObject('Object Repository/shoppingCart/Page_Zack Market/input_Email_email'), 'thuy.ngo@katalon.com')

WebUI.setEncryptedText(findTestObject('Object Repository/shoppingCart/Page_Zack Market/input_Password_password'), 'GklqZBguAPQ=')

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/input_Password_button_btn__2lzmo'))

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/div_All Products_search_auto__TZ-uB'))

WebUI.setText(findTestObject('Object Repository/shoppingCart/Page_Zack Market/input_All Products_auto_input__2ud9e'), 'tank top')

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/span_Tank Top'))

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/img_Clear All_card-img-top'))

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/img'))

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/span_Buy Now'))

WebUI.click(findTestObject('Object Repository/shoppingCart/Page_Zack Market/span_Confirm checkout'))

WebUI.closeBrowser()

Next: Execute and Debug a Test Case.

See also: Troubleshoot automated web testing.