Katalon CSS/Xpath not working with SVG charts

Yes. My experiment “Test Cases/TC2” proves it. I wrote a XPath expression manually for the test case, which successfully selects a SVG element.

Hello @kazurayam

Thanks for the quick reply. I downloaded your Git repo and tried to run TC2.

But I am getting this error.
Caused by: org.openqa.selenium.ElementClickInterceptedException: Element is not clickable at point (1477,373) because another element obscures it

Could you please help here ? Why I am getting this error ?
Waiting for reply…!!

In the Log I found a message:

Caused by: org.openqa.selenium.ElementClickInterceptedException: Element <tspan> is not clickable at point (1087,373) because another element <button class="highcharts-a11y-proxy-button"> obscures it

This is the cause why we are getting this error.

I looked at the page source of https://www.highcharts.com/demo/line-basic now, and I found an HTML fragment:

<button aria-label="Toggle visibility of Installation" tabindex="-1" aria-pressed="true" class="highcharts-a11y-proxy-button" aria-hidden="false" style="border-width: 0px; background-color: transparent; cursor: pointer; outline: none; opacity: 0.001; z-index: 999; overflow: hidden; padding: 0px; margin: 0px; display: block; position: absolute; width: 90.7344px; height: 14px; left: 633px; top: 163.5px; visibility: visible;"></button>

This HTML <button> is located over the SVG <g:tspan> element. Therefore when I do a click, the click event is captured by the HTML element. The event does not reach to the SVG element.

I am quite sure that in January 2020 there were not <button> elements over <g:tspan> elements. I suppose that HIGHCHARTS people changed there web page. So the TC2 was successfull in January, but not now in July.

I have changed the source of TC2 as follows:

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')

WebUI.navigateToUrl('https://www.highcharts.com/demo/line-basic')

WebUI.verifyElementPresent(findTestObject('Object Repository/Page_Basic line  Highcharts/tspan_Installation - manually modified'), 10)

WebUI.delay(5)

WebUI.closeBrowser()

This version works without error.

This code is enough proving that my (complicated) XPath expression can select a SVG element in the target page.

@kazurayam

Thanks for the quick reply. I am also able to click on the ‘Installation’ button in the chart.

But my aim is to get the values plotted in the chart after I click on that ‘Installation’ button.
I want to get the details of plotted points.Checkout the screenshot from below link.I want to locate that element.

Shared with CloudApp

Could you please try whether it is working for you or not.I want to hover that element and try to get the data which comes after hover.

Hoping for you positive reply.

What do you mean by saying “the detail of plotted points”?

You would possibly get anything contained in the page source. But you would not be able to get anything NOT contained in the page source.

Are you sure that “the detail of plotted points” contained in the page source?

If yes, please show it to us by copying the code portion from the page source into your next post.

@kazurayam

May be yes. I want to locate the highlighted box into page source.

Shared with CloudApp

If you hover the mouse over there it will highlight some plotted point on the chart.

Let me know if we are not on the same page.

The image you pasted is hard to read. Too small characters …

Hello @kazurayam, need to fetch the value, we get on hover.

I could see what you want to know, but writing an appropriate XPath expression that selects a SVG element is a tuff job.

Please try it yourself first. This is not my problem. It’s yours isn’t it?

@kazurayam I think you are also stuck here, not an issue, we will let you know the solution :slight_smile:

@tapan.k I was also facing the same issue but able to get it while noticing the page behavior , when you hover on that particular svg element there is new property proposed in the current tag. like .‘aria-describedby’ or a new element ‘/html/body/div[2]’ . if you get any of these two, you will be able to get the hover text by using dynamic xpath solution.
let me know if you still not found the solution.

@pankaj.yadav : Could you please help on finding. I have a graphical area having aria-described by.

@pankaj.yadav

I was able to locate elements of svg graph. You can use CSS selector having svg elements or for short-cut you can use selector hub extension in chrome. You can select absolute path of any element you want to locate from that selector hub extension and it worked for me. Let me know if you have any query.

1 Like

@nandhini.ramanie you can also use the same solution.

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.