How to use an external javascript function into Katalon Recorder

Product Forums Katalon Recorder
1

based on different topics and forums, I tried to use a js file with the following function and import it (as extension script) into KR:

Selenium.prototype.getDomElementPath = function(el) {
  var stack = [];
  console.log("la");
  while ( el.parentNode != null ) {
    console.log(el.nodeName);
    var sibCount = 0;
    var sibIndex = 0;
    for ( var i = 0; i < el.parentNode.childNodes.length; i++ ) {
      var sib = el.parentNode.childNodes[i];
      if ( sib.nodeName == el.nodeName ) {
        if ( sib === el ) {
          sibIndex = sibCount;
        }
        sibCount++;
      }
    }
    if ( el.hasAttribute('id') && el.id != '' ) {
      stack.unshift(el.nodeName.toLowerCase() + '#' + el.id);
    } else if ( sibCount > 1 ) {
      stack.unshift(el.nodeName.toLowerCase() + ':eq(' + sibIndex + ')');
    } else {
      stack.unshift(el.nodeName.toLowerCase());
    }
    el = el.parentNode;
  }

  return stack.slice(1); // removes the html element
}

image

And I tried to call :

image
image1289×72 4.46 KB

but it’s not working and I get an error in the console:
image
image883×92 6.62 KB

The error appears in Chrome and Firefox.

I don’t know if it’s the best practice.

Could you help me with that ?

Thanks in advance for your help.

2

Here is an example of custom JS commands in recorder you could check for reference. Also, check this link, given recorder is based on Selenium.

3

Dear @chen.lee,
Thanks for your helpI have tried your code. First import into KR the script. Then relaunch the tool and refresh the page. I have now access to the command storeTextLength. So I tried that:

image
image761×72 4.48 KB

My field exists in the form and is correctly naming:
image

When I execute the step I get this result:
image

The result should be 5 and not 0, isn’t it?.

Could you tell me if I do something wrong ?

4

Probably need to see your script and HTML to be able to figure out the problem.

5

there the script imported (that you add in our prost):

// Usage: Add this to Extension Scripts, restart Katalon Recorder, and refresh the browser tab

Selenium.prototype.getTextLength = function(locator) {
    return this.getText(locator).length;
};

Selenium.prototype.doTypeRepeated = function(locator, text) {
    // All locator-strategies are automatically handled by "findElement"
    var element = this.page().findElement(locator);

    // Create the text to type
    var valueToType = text + text;

    // Replace the element text with the new text
    this.page().replaceText(element, valueToType);
};

Selenium.prototype.assertValueRepeated = function(locator, text) {
    // All locator-strategies are automatically handled by "findElement"
    var element = this.page().findElement(locator);

    // Create the text to verify
    var expectedValue = text + text;

    // Get the actual element value
    var actualValue = element.value;

    // Make sure the actual value matches the expected
    Assert.matches(expectedValue, actualValue);
};

And my html code:

<div class="col-md-9"><input formcontrolname="plannedAmount" id="cpm-details-card-plannedAmount" euiinputnumber="" min="0" pattern="^[0-9]\d*(\.\d+)?$" ng-reflect-id="cpm-details-card-plannedAmount" ng-reflect-name="plannedAmount" ng-reflect-pattern="^[0-9]\d*(\.\d+)?$" ng-reflect-fraction-digits="2" placeholder="" aria-disabled="false" type="eui-number" class="eui-input-number ng-untouched ng-pristine ng-valid ng-star-inserted"><!--container--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>
6

Try to change your XPath from //*[@id='cpm-details-card-plannedAmount'] to //input[@id='cpm-details-card-plannedAmount'].

7

@chen.lee The problem is still present after the update