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, 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

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

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 by Web Recorder Plus can be executed as normal with no further steps required.

However, if your Web AUT is in these special cases, we recommend you turn on Enable Smart Web Inspectors in Project > Settings > Execution > WebUI and select the web AUT to make sure that your tests will pass as expected.

• Flutter web app: Web applications built using the Flutter framework, which typically requires specialized handling due to unique DOM structures.
• Canvas text extraction: Web applications containing text content rendered within HTML5 Canvas elements.
• Closed Shadow DOM: Web app components within closed Shadow DOM structures that standard testing methods typically cannot access.

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

If you are testing for Flutter-based web applications using Katalon Studio versions earlier than 10.2.0, 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

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

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.

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.