Katalon Web Recorder Plus

note

• 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 web apps built on advanced web technologies. For web apps like Flutter apps, apps with HTML5 Canvas elements and closed Shadow DOM, see Enable web smart inspectors. 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, and 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.

Enable Web Recorder Plus in Katalon Studio

1. From the main menu, go to Katalon Studio > Preferences > Katalon > Beta Features and check the box for Katalon Web Recorder Plus.

2. Select the option to launch Katalon Web Recorder Plus in either New browser (which is the 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, 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.

3. Click Apply and Close to save your settings.

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

Web Recorder Plus is now enabled.

tip

• In the recording window, to access the hotkey menu and see the full list of shortcuts:
  • macOS: use Shift + Option + `
  • Windows: use Alt + `

Install the Katalon Studio Recording Engine extension

This section is specifically for recording with an Active browser using Recorder Plus.

When recording with an Active browser, you must install the Katalon Studio Recording Engine extension to enable proper recording functionality.

If you select the Active browser option, install the extension:

• For Chrome: Install from Chrome Web Store.

  Extension compatibility versions

Since the Chrome Extension Marketplace only provides the latest version, you may encounter unexpected issues if you are not using a compatible version of the extension. In such cases, it is recommended to use New Browser mode for recording instead. :::

• For Edge: Install from Edge Add-ons.

Refer to the following table for browser extension version compatibility with Katalon Studio Enterprise (KSE):

KSE version	Katalon Studio Recording Engine extension version
Before 10.2.4	1.0.8
10.3.0 and later	1.0.9
:::

Check the version of your Katalon Studio Recording Engine extension.

• For Chrome: Go to chrome://extensions/ and use search to find your Katalon Studio Recording Engine extension.

  • You can quickly view the version of your extension on the tile itself.
  
  • Or you can click Details and navigate to the Version field.
  

• For Edge: Same as with Chrome, go to the Extensions page and use search to find your Katalon Studio Recording Engine extension on the list.

  • You can quickly view the version of your extension on the tile itself, or you can click Details and navigate to the Version field.

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 + `

Execute test cases recorded using Web Recorder Plus

Test cases recorded using Web Recorder Plus can be executed normally without requiring additional configuration in most scenarios.

However, if your Web Application Under Test (AUT) includes special cases, we recommend enabling Smart Web Inspectors to ensure test stability. You can do this via Project > Settings > Execution > WebUI > Enable Smart Web Inspectors, and specify the web AUT:

This feature is particularly helpful for the following scenarios:

• Flutter web app: Built with the Flutter framework, these apps use unique DOM structures that often require specialized handling.

  note

  Only Web Recorder Plus supports recording interactions on Flutter-based web applications. If you're working with such apps, you must use Recorder Plus for reliable element detection and script creation.

• Canvas text extraction: Content rendered inside HTML5 Canvas elements, which traditional locators cannot detect.

• Closed Shadow DOM: Components encapsulated in closed Shadow DOM, which limits access to internal elements using standard methods.

• Obstructed UI elements: Certain elements—such as calendars, dropdowns, or select boxes—may be partially or fully hidden behind transparent or invisible layers, making them difficult to capture or interact with during recording or execution.

For more information about WebUI execution settings, see WebUI settings.

If you are testing a Flutter web app using Katalon Studio version earlier than 10.2.0, use a custom keyword to inject JavaScript that enables element interaction by exposing Flutter semantic nodes.. For implementation guidance, 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.

Configure locator strategy

You can configure how locators are generated for new test objects during recording or spying sessions using Web Recorder Plus.

See the following documentation for more information: Set the default selection method.

Configure exclusion patterns from locator generation

To define specific patterns to exclude from locator generation:

1. Go to Project > Settings > Test Design > WebUI.

2. Under the Recorder Plus section, use the input field to specify patterns (e.g., pa-*) for class or attribute names you want Recorder Plus to ignore. This helps prevent unstable or dynamic identifiers (like auto-generated class names) from being used as part of your locators.

   
   note

   This exclusion rule applies only to element class and attribute names.

3. Click Apply or Apply and close to save your changes.

Changes and known limitations in Web Recorder Plus

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

First Header	Second Header
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

Settings in Test Design > WebUI

Katalon Studio offers configuration options for element locators under Project > Settings > Test Design > WebUI, including default locator strategies (XPath, CSS, Attributes) and pattern exclusions for element classes or attributes.

However, these settings may not fully apply to Web Recorder Plus recordings. While some locator preferences are honored, others—like excluded class patterns—may be bypassed depending on how elements are captured. We recommend reviewing and adjusting generated locators after recording to ensure accuracy and maintainability.

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.

Follow these steps 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.