Executing javascript with Katalon

Hi,

I want to execute the following javascript which is responsible for opening the tooltip of the SVG chart (as it’s impossible to identify the tooltip’s Xpath using Katalon SpyWeb):

c = Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector(“#dashboardChartBorder”))[0]

p = c.series[2].points[5]

p.state = “”

c.tooltip.refresh([p])

Is there a way to do it with Katalon?

I tried the following code:

WebElement element = WebUI.executeJavaScript(‘var c = Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector(“#dashboardChartBorder”))[0]’, null)

but the “element” remains null.

Hi Lily

c = Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector("#dashboardChartBorder"))[0]

p = c.series[2].points[5]
p.state = ""
c.tooltip.refresh([p])

I don’t know the Highcharts library but, if the code above is meant to invoke a tooltip, then it should work from the browser console (in the Developer Tools).

I suggest you first try that. If it fails to work, keep working on it until it works correctly.

Once you have it working, you can incorporate it into your Test Case and make it work there.

Regarding this code:

WebElement element = WebUI.executeJavaScript('var c = 
Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector("#dashboardChartBorder"))[0]', null)

I don’t think the resultant array element c, is a WebElement. But I’m certainly not an expert on how Highcharts work - I could be wrong.

However, I am not wrong about this: your JavaScript doesn’t return anything since it has no return statement. The result of the anonymous function (which is how your javascript is executed in the browser) will be undefined.

2 Likes

Resolved the issue by putting " ; " between the javascript lines I wanted to execute:

WebUI.executeJavaScript(‘var c = Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector("#dashboardChartBorder"))[0];var p = c.series[2].points[0];p.state = “”;c.tooltip.refresh([p])’, null)

1 Like

Hi Lily

Please explain how you made it work. Adding semicolons was a good idea but it doesn’t address this - you said:

WebElement element = WebUI.executeJavaScript(‘var c =
Highcharts.charts.filter(c => c.container.parentElement.parentElement
=== document.querySelector("#dashboardChartBorder"))[0]’, null)

but the “element” remains null.

‘“element” remains null’ because your JavaScript returns undefined. Adding semicolons does not change that.

In this code you have removed the assignment to element (as well as adding semicolons):

WebUI.executeJavaScript('var c = Highcharts.charts.filter(c => 
c.container.parentElement.parentElement === 
document.querySelector("#dashboardChartBorder"))[0];var p = 
c.series[2].points[0];p.state = "";c.tooltip.refresh([p])', null)                        

I’m intrigued to know what the issue actually was because without knowing that, I don’t see how your original issue could be resolved.

Sorry, but if this isn’t made clear, neither of us has learned anything.

Hi Russ,

Apologies for passing incomplete information,

The original issue was invoking the tool-tip itself in a particular point of the SVG chart.
I couldn’t identify tool-tip’s Xpath using Katalon SpyWeb because it doesn’t work with SVG charts, so the only solution I found was to interact with the tool-tip using JavaScript .

The following code was the attempt to execute the first part of the javascript which is supposed to retrieve the first chart in the list of charts on the same page:

WebElement element = WebUI.executeJavaScript(‘var c = Highcharts.charts.filter(c => c.container.parentElement.parentElement === document.querySelector("#dashboardChartBorder"))[0]’, null)

I assumed, that I would be able to interact with the element if I convert the chart to the WebElement object.
However, although I do succeed to invoke the tool-tip now after the whole JavaScript snippet execution using semicolons between the statements, I had to omit the assignment to the WebElement object since, as you already mentioned, JavaScript returns undefined.

Hope it’s more clear now.

The second question is - is there a way to read the values from the opened tooltip (Katalon still can’t find the element, but I am able to find its values manually when the tooltip is visible and I pause using the browser debugger in that state)?

1 Like

Hi lily

Thank you. Yes, a good deal more clear. But I just want to make sure you are clear on this one thing:

I had to omit the assignment to the WebElement object since, as you already mentioned, JavaScript returns undefined.

Just in case you think that is some kind of error, be assured, that is NOT an error. It may not be what you want, or need, but that is how a JavaScript function behaves when it is not written to return a result. That’s how JavaScript works. That is “by spec”.

For example:

function myfunction() {
  alert("myfunction");
}

would also return undefined, simply because the function does not specify a return value. Here is a screenshot of this page’s developer tools with that function pasted into the console:

I hope that’s clear.

The second question is - is there a way to read the values from the
opened tooltip (Katalon still can’t find the element, but I am able to
find its values manually when the tooltip is visible and I pause using
the browser debugger in that state)?

If you can see the HTML, then yes (if it’s buried in a shadow dom then it might prove more difficult). Paste the HTML here and we’ll either use an in-memory test object to access it or use JavaScript (I favor the latter).

image.png

1 Like