Katalon Web Recorder Plus

This document introduces Katalon Web Recorder Plus - an enhanced version of Web Recorder. You'll learn its capabilities apart from the standard Web Recorder's, setting up, tutorials, and key features.

Overview

Katalon Web Recorder Plus (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.

Feature comparison: Web Recorder vs. Web Recorder Plus

Web Recorder Plus extends the capabilities of the standard recorder by supporting more complex web technologies and offering improved functionality for web test automation:

Feature	KS 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.
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.	Yellow 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.

Get Started

Install the KS Recording Engine extension

• For Chrome: Install from Chrome Web Store.
• For Edge: Install from Edge Add-ons.

warning

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.

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

You can 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. The version is displayed right next to the extension name. You can also click Details > Version.

  

• For Edge: Go to the Extensions page and use search to find your Katalon Studio Recording Engine extension on the list. You can also click Details > Version.

Enable Web Recorder Plus in Katalon Studio

note

Web Recorder Plus is for evaluation purposes only and not recommended for production use.

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

2. Click Apply and Close to save your settings.

Once enabled, selecting Katalon Web Recorder opens Web Recorder Plus instead. You can begin recording test cases or capturing objects with enhanced capabilities (details below).

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

Record a new session with Web Recorder Plus

1. Once you've enabled Katalon Web Recorder Plus, click Katalon Web Recorder to open Web Recorder Plus.
2. Choose to start recording in a new browser, active browser, or in custom capability mode. Quick start by selecting new browser mode.
   • Select your preferred browser from the dropdown list.
   • Enter a valid URL for the web application you want to record.
   • Click Start Record to launch a new browser session and begin recording.
3. Recording controls:
   • As you interact with your web application, actions and test objects are automatically captured in the test steps panel and the test object panel.
   • You can pause/resume recording to interact with the app's UI without recording the interaction.
   • You can switch between browsers while recording - KS will pause recording to avoid issues. Once you're all set, click Resume to continue.
   • Run steps to verify actions, then view Running Logs to see the execution status, step results, and any errors that occur during playback.
   • Save your progress at any time.

Web Recorder Plus feature details

Browser types

Web Recorder Plus allows recording session starting in a new browser, an active browser, or in a custom capability-configured browser.

New Browser

To record in a new browser, select your browser (chrome, edge, ...), paste in an URL, and start recording.

Active Browser

To record in an active browser, simply select one active browser you want, and start recording.

Each browser shows a status label (e.g., Compatible or Incompatible). Incompatible label indicates that the current KS version and the Recorder Engine are not compatible - upgrade to the compatible version for the best recording experience.

Custom Capability Browser

This mode allows you to start recording in a browser pre-configured in the custom capability menu. You can enter a URL to start right away, or re-configure the browser using the button +Configure custom capability as a quick access to the menu.

Record from an existing test case

You can also initiate recording directly from an existing test case: Open the existing test case, then click the Record Web icon.

• Click Yes to continue recording steps for the selected test case.
• After editing, you can choose to save as a new test case or save to the current test case.

Engine Status

The Engine Status shows the current state of the selected browser engine:

• Connected: green indicator.
• Recording: blinking red indicator. If you click Pause, the status changes to Paused.
• Paused: yellow indicator. Click Resume to return to the Recording state (icon switches back to blinking red).
• Disconnected: gray indicator, plus error message (e.g. Connection lost). You can continue by selecting another connected browser from the Select Available Browser dropdown.

Supported actions

Apart from basic actions (click, set texts, ...) Web Recorder Plus allows handling mouse down and mouse over (hover) events.

When you hover over an element, use these shortcuts to copy its locator to your clipboard, making it much easier to reuse in test scripts:

• macOS: Use Option + C (or Shift + Option + C)
• Windows: Use Alt + C

Edit test case mid-session

Web Recorder Plus offers convenient panels so you can edit/execute test runs on recorded steps mid-session, for quality control:

• Recorded Steps: All test steps are captured in the Recorded Steps tab when you start recording.
  • You can:
    • View, edit, duplicate, reorder, delete, or replay steps.
    • Run selected step to execute a specific step.
    • Run from selected step to continue execution from that step onward.
    • Disable any step you don’t want to run.
    • View, delete, or reorder code statements (Statements in Katalon Studio) that already exist in the test case. You can add/edit them once you save the script as a test case, and make edits directly to the test case.

Captured Objects: Manage all elements captured during recording.

• Object Details:
  • Object Name: The name of the captured element.
  • Locator Type: Show how the element is identified (XPath, Attributes, Accessibility ID, etc.). Use Show More to see more types like Name, Image, etc. This version of KS supports viewing the locators only - editing locators during recording will become available in later versions.
  • Locator: An element's default locator is XPath - you can select a locator type and click Make Default to set it as the default locator.

• Buttons:
  • Verify & Highlight: Locate and highlight the element in the browser, for validation purpose.
  • Image locator > Take Screenshot: Capture a screenshot of the element to make an image locator.

Variables: Add and manage variables for your session.

Web Recorder Plus advanced settings

Settings for executing recorded test cases in 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 AppointmentXPath: //a[@id = 'btn-make-appointment']CSS: #btn-make-appointment	Object name: a_btn-make-appointmentXPath: //*[@id = 'btn-make-appointment']CSS: #btn-make-appointment
Object name: label_MedicaidXPath: //section[@id = 'appointment' ]/div/div/form/div[3]/div/label[2]CSS: empty	Object name: input_programsXPath: //*[@id = 'radio_program_medicaid']CSS: #radio_program_medicaid
Object name: label_Apply for hospital readmissionXPath: //section[@id = 'appointment' ]/div/div/form/div[2]/div/labelCSS: label.checkbox-inline	Object name: label_Apply for hospital readmissionXPath: //*[@class and contains(concat(' ', normalize-space(@class), ' '), ' checkbox-inline ')]CSS: .checkbox-inline
Object name: input_Visit Date (Required)_visit_dateXPath: //input[@id = 'txt_visit_date']CSS: #txt_visit_date	Object name: input_dd_mm_yyyyXPath: //*[@id = 'txt_visit_date']CSS: #txt_visit_date
Object name: select_Tokyo CURA Healthcare Center _5b4107XPath: //select[@id = 'combo_facility']CSS: #combo_facility	Object name: select_FacilityXPath: //*[@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.