Katalon Web Recorder Plus

Note:

• Katalon Web Recorder Plus is currently in beta.

• You can use Web Recorder Plus with Web Recorder and Object Spy in Chrome and Edge Chromium. Both Active Browsers and New Browsers options are supported.

What is Katalon Web Recorder Plus?

Katalon Web Recorder Plus is an enhancement of Web Recorder that improves test automation capabilities with advanced locators, support for complex web technologies, and a streamlined recording experience.

In this document, you will learn how Web Recorder Plus differs from the standard Web Recorder, along with a tutorial for using it. We also discuss its key changes, behaviors, and current limitations compared to the standard recorder.

Feature comparison: Web Recorder vs. Web Recorder Plus

The Web Recorder Plus extends the capabilities of the standard recorder by supporting more complex web technologies and offering improved functionality for web test automation. Here's a breakdown of the key differences:

Feature	Web Recorder	Web Recorder Plus
Enterprise compatibility	May face challenges with the unpacked extension due to strict security policies.	Provides an official Katalon Studio Recording Engine extension that can be whitelisted and installed, eventually replacing Katalon Compact Utility.
Application technologies	General web applications.	Enhanced support for Flutter-based web applications. See Activate Flutter-based web app testing with a custom keyword.
Locator strategy	Basic XPath and CSS.	Generates unique, stable locators using advanced CSS operators, excludes text-based locators for improved stability.
Text attribute behavior	Uses the element text as a default for test object names.	Adds the @text attribute to capture the original element text. Test object names are generated using a new algorithm.
Actions supported	Basic interactions.	Auto-detect hover actions, support for mouse down events, and capturing actions like mouse over.
Event handling	Limited event hooking.	Enhanced event hooking with support for pointer event phases to improve accuracy.
User interface enhancements	Default element highlighting.	Updated Katalon green branding for element highlights; optimized UI for shadow DOM and iframe isolation.
Performance optimization	Standard performance.	Locator caching for faster interaction and improved stability when interacting with complex elements.

How to use Web Recorder Plus

To start using Web Recorder Plus, follow these steps:

1. From the main menu, go to Katalon Studio > Settings... > Preferences > Katalon > Beta Features.
   
2. Check the box for Katalon Web Recorder Plus.
3. Select the option to launch the recorder in either New browser (default option) or Active browser mode:

   • New browser: Starts recording in a new browser.

   • Active browser: Uses the current browser to start recording.

   If you select the Active browser option, you'll need to install the extension:

   • For Chrome: Install from Chrome Web Store.

   • For Edge: Install from Edge Add-ons.

   Note:

   • After installing the extension for the Active browser option, you may need to reload the browser to activate it.

4. Click Apply and Close to save your settings.
5. Once enabled, you can begin recording test cases or capture objects by selecting Record Web or Spy Web on the main toolbar.

   For more details on how to record a test case or capture objects, see: Record a new test case or Capture objects.

You are now using Web Recorder Plus.

Recording actions in Web Recorder Plus

With Web Recorder Plus, you can now handle:

• Mouse over events: Allows capturing hover actions on elements.

• Locator value copying:

  • macOS: use Option + C (or Shift + Option + C)

  • Windows: use Alt + C

    When hovering over an element, this shortcut copies its locator (for example, #btn-make-appointment) to your clipboard, making it easy to reuse in your test scripts.

    

Tip:

• In the recording window, to access the hotkey menu and see the full list of shortcuts:

  • macOS: use Shift + Option + `

  • Windows: use Alt + `

Activate Flutter-based web app testing with a custom keyword

To enable testing for Flutter-based web applications in Katalon Web Recorder Plus, you can use a custom keyword to handle the unique rendering behavior of Flutter apps. To learn how to create a custom keyword, see Introduction to custom keywords.

Below is the custom keyword script that enables interaction with Flutter-based web applications:

package mypackage

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


public class FlutterBasedKeywords {
	static String script = """
(function(){"use strict";function l(t){new MutationObserver(e=>{e.some(r=>!(r.type!=="childList"||r.addedNodes.length===0))&&t()}).observe(document,{childList:!0,subtree:!0})}function s(t=document){if(!t.querySelector("flutter-view"))return;t.querySelectorAll("flt-semantics-placeholder").forEach(i=>{i.click()});const e=t.querySelector("flt-glass-pane");if(!e||e.activated)return;e.activated=!0;const n=document.createElement("style");n.innerHTML=`
    flt-semantics {
      pointer-events: all !important;
    }
    flt-semantics-container {
      left: 0;
      top: 0;
    }
  `,n.id="flutter-override-styles",document.head.appendChild(n);const r=e.shadowRoot?.querySelector("flt-semantics-placeholder");r&&r.click()}function o(){navigator.webdriver&&(s(),l(()=>{s()}))}o()})();
	""";

	@Keyword
	public static void activateFlutterBasedWebApp() {
		WebUI.executeJavaScript(script, null)
	}
}

Here is an example of how to use the custom keyword in your test script:

WebUI.openBrowser('https://flutter.github.io/samples/web/material_3_demo/')

CustomKeywords.'mypackage.FlutterBasedKeywords.activateFlutterBasedWebApp'()
// or FlutterBasedKeywords.activateFlutterBasedWebApp()

WebUI.click(findTestObject('Object Repository/Page_Material 3/flt-semantics_Elevated'))

Note:

• Update the mypackage name to match your project structure.

Changes and known limitations in Web Recorder Plus (beta)

Locator changes

No text-based locator

Web Recorder Plus does not use the text content of elements to create locators, as this approach can be unreliable across different versions or content updates.

CSS-based strategy

Locators are generated based on CSS selectors. XPath conversion is available but limited. XPath locators may be less stable than CSS locators, especially for dynamic content. You should set CSS as the default locator strategy to ensure better stability and reliability.

Certain locator changes

You can compare how the locator strategies differ between Web Recorder and Web Recorder Plus in the table below.

The following table shows objects captured by each application on our demo website https://katalon-demo-cura.herokuapp.com/.

Captured by Web Recorder	Captured by Web Recorder Plus
Object name: a_Make Appointment XPath: //a[@id = 'btn-make-appointment'] CSS: #btn-make-appointment	Object name: a_btn-make-appointment XPath: //*[@id = 'btn-make-appointment'] CSS: #btn-make-appointment
Object name: label_Medicaid XPath: //section[@id = 'appointment' ]/div/div/form/div[3]/div/label[2] CSS: empty	Object name: input_programs XPath: //*[@id = 'radio_program_medicaid'] CSS: #radio_program_medicaid
Object name: label_Apply for hospital readmission XPath: //section[@id = 'appointment' ]/div/div/form/div[2]/div/label CSS: label.checkbox-inline	Object name: label_Apply for hospital readmission XPath: //*[@class and contains(concat(' ', normalize-space(@class), ' '), ' checkbox-inline ')] CSS: .checkbox-inline
Object name: input_Visit Date (Required)_visit_date XPath: //input[@id = 'txt_visit_date'] CSS: #txt_visit_date	Object name: input_dd_mm_yyyy XPath: //*[@id = 'txt_visit_date'] CSS: #txt_visit_date
Object name: select_Tokyo CURA Healthcare Center _5b4107 XPath: //select[@id = 'combo_facility'] CSS: #combo_facility	Object name: select_Facility XPath: //*[@id = 'combo_facility'] CSS: #combo_facility

Attribute escaping behavior

In Web Recorder Plus, attributes like src and href are automatically escaped using CSS.escape() function. This adds backslashes (\) before special characters like slashes (/) and dots (.) to enhance stability and compatibility. Do note that these backslashes will not affect the execution of your test scripts.

To learn more about the standard escaping function, see MDN documentation on CSS.escape(): CSS: escape() static method.

Settings in Test Design > WebUI

Certain settings within the Project > Settings > Test Design > WebUI section may not fully apply to tests recorded with Web Recorder Plus. You should review recorded steps to ensure that all locators and configurations meet your test requirements.

New tab not supported

Currently, recording interactions across multiple tabs is not supported.

Performance issues with Smart Locator

On certain websites, using Web Recorder Plus with the Smart Locator feature enabled may cause performance issues. To avoid this, turn off Smart Locator after starting Web Recorder Plus.

Here's how to turn off Smart Locator:

1. Locate the Katalon Studio Recording Engine extension icon in the browser instance's toolbar.

2. Click the icon, and uncheck the Enable Smart Locator Capture option.