I have made a demo that runs successful.
See the test case TC1 where you will find a XPath expression I propose.
3 Likes
This worked wonderfully. Thanks again for your guidance 
Hello there,
We’ve improved the performance of Katalon Studio to handle SVG elements better in version 7.1. Please upgrade when the new version’s available and let me know it you still encounter this issue.
Read more about the release note of Katalon Studio 7.1.
Jass
Hello @kazurayam
Can you please help me getText of the below highlighted element(text between tspan tags).
I tried to write the xpath as below :
//div[@ id=“container”]/div/[local-name()=“svg”]/ [local-name()=“g” and @class=“highcharts-axis-labels highcharts-xaxis-labels ”]/[local-name()=“text” and @x=“303”]/[local-name()=“tspan”]
But it is unable to find the text.
Any suggestions would be of great help.
Thanks in advance.
How about this?
//div[@id="container"]/div/*[local-name()="svg"]
/*[local-name()="g" and
contains(@class, "highcharts-axis-labels") and
contains(@class, "highcharts-xaxis-labels")]
/*[local-name()="text" and @x="303"]
/*[local-name()="tspan"]
I can not find the immediate answer (successful XPath expression) because you haven’t informed us of the URL of your Application Under Test. You have to try more to find appropriate XPath expression for yourself.
How to find a XPath which selects the text you want? — Try top-down/step-by-step approach:
- verify if
//div[@id="container"]can select the nodes in the Web page (DOM). - if it works, then modify the XPath to be a bit more specific. Verify
//div[@id="container"]/div - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"] - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g"] - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels")] - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels") and contains(@class, "highcharts-xaxis-labels")] - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels") and contains(@class, "highcharts-xaxis-labels")]/*[local-name()="text"] - if it works, then veirfy
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels") and contains(@class, "highcharts-xaxis-labels")]/*[local-name()="text" and @x="303"] - if it works, then verify
//div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels") and contains(@class, "highcharts-xaxis-labels")]/*[local-name()="text" and @x="303"]/*[local-name()="tspan"]
At some point, your xpath will fail to select any node. That is the point where your XPath falls short. Look at it more carefully, find reasons and fix them.
Katalon Studio is not very good tool to perform such step-by-step verifications of XPath. I would rather suggest to you to use Google Chrome’s Developer tools to verify xpaths. See
@kazurayam Thank you for such detailed reply. Sure I will try these steps as I cannot share the URL.
Hi @kazurayam,
I tried in Chrome Dev tools… Xpath was failing because of dynamic x value in step no.8
It works in Chrome but fails in Mozilla where the value is x=303.
Is there a way to handle this ? As I will need all the text values for verification of my test case.
Then, your XPath should not look at the @x attribute.
You should find alternative way of identifying the <tspan>...</tspan> node of your interest somehow.
What kind of “alternative way” is possible?
For exampe,
//div[@id="container"]/div/*[local-name()="svg"]
/*[local-name()="g" and
contains(@class, "highcharts-axis-labels") and
contains(@class, "highcharts-xaxis-labels")]
/*[local-name()="text"]
/*[local-name()="tspan" and .="Nov 01"]
This expression would work, but I suppose it would not be satisfactory for you.
What else? … difficult. I think your HTML is not designed E2E testing in mind at all.
Let me assume you can ask your Web developer to modify the server-side application to generate a HTML code with the following fragment:
<text id="thisIsIt" x="305.5" ...>
<tspan>Nov 01</tspan>
</text>
Then I would say that the Web app is designed “E2E testing in mind” because you can write a handy XPath expression to select the node:
//*[@id="thisIsIt"]/tspan
So your problem will be solved.
I think you should speak to your developers. Developers and Testers should discuss and compromise each other for better E2E testing.
@yashaswini.sadananda svg will work differently. CSS selectors will give you better results. You can try some thing like below:
g.highcharts-axis-labels.highcharts-xaxis-labels :first-child
Thank you… will try it out
Hi Jass,
I saw in the release notes for v7.1 that the Web Recorder was updated to generate XPath locator for SVG elements. I’ve have a highcharts graph that I’ve been hoping to capture for some time. However, after upgrading to version 7.2.1, I am still having the same issue. Using the Web Spy, I can see can capture the element, however, if I then ask it to highlight the element it just captured, it says the element cannot be found.
Hi @RTQ
Verifying SVG on the page seems to be having a problem. If you execute the test then does it run ?
I have made a GitHub project:
Problem to solve
In the Katalon Forum, there was a post Katalon CSS/Xpath not working with SVG charts - #36 by RTQ
I saw in the release notes for v7.1 that the Web Recorder was updated to generate XPath locator for SVG elements. I’ve have a highcharts graph that I’ve been hoping to capture for some time. However, after upgrading to version 7.2.1, I am still having the same issue. Using the Web Spy, I can see can capture the element, however, if I then ask it to highlight the element it just captured, it says the element cannot be found.
In my opinion, Katalon Studio is not capable of generating appropriate XPath locators for SVG elements . You need to be capable of modifying the generated XPath locators for yourself so that the locators can appropriately select the SVG elements of your interest.
I will describe my view here. I used Katalon Studio verion 7.2.1 to test.
See the demo
I used the following URL as my Application Under Test:
This is a demo page of the “highcharts” JavaScript library which generates SVG elements. I wanted to click the SVG element as a chart legend which shows a text “Installation”.
“Test cases/TC1”
I used “Web Recorder” to generate a Test Object Object Repository/Page_Basic line Highcharts/tspan_Installation . That Test Object has the following properties: 
When I tried for the first time the test object had a locator as follows:
//*[(text() = 'Installation' or . = 'Installation')]
When I ran the TC1, it failed. I changed the test object a bit so that it had a locator as follows:
id("highcharts-mli3vbi-0")
/svg[@class="highcharts-root highcharts-legend-series-active"]
/g[@class="highcharts-legend"]
/g[1]
/g[1]
/g[@class="highcharts-legend-item highcharts-line-series highcharts-color-0 highcharts-series-0"]
/text[1]
/tspan[1][count(. | //*[(text() = 'Installation' or . = 'Installation')]) = count(//*[(text() = 'Installation' or . = 'Installation')])]
When I ran the TC1 once more, it failed again. Both selectors failed to find a SVG <tspan>Installation</tspan> .
This experiments revealed that the locators generated by Katalon Web Recorder are not appropriate at all.
“Test Cases/TC2”
I made another script “Test Cases/TC2”. I made another test object manually . Object Repository/Page_Basic line Highcharts/tspan_Installation - manually modified , which has the following XPath expression:
//div[starts-with(@id,"highcharts-")]
/*[local-name()="svg" and contains(@class,"highcharts-root")]
/*[local-name()="g" and contains(@class,"highcharts-legend")]
/*[local-name()="g"][1]
/*[local-name()="g"][1]
/*[local-name()="g" and contains(@class,"highcharts-legend-item")][1]
/*[local-name()="text"][1]
/*[local-name()="tspan"][1]
When I ran the TC2, it passed. It can locate the SVG <tspan>Installation<tspan> node.
Discussion
“Test Cases/TC1” failed. This tells you Katalon Studio’s Web Recorder tool is not capable of dealing with SVG elements appropriately. I haven’t checked the Web Spy tool, but I presume it would be no cleverer than Web Recorder.
On the other hand, the XPath expression that I wrote manually for “Test Cases/TC2” can deal with SVG elements appropriately.
In fact, there is a big semantic gap between the 2 XPath instances. I would not go deep into this discussion here; too much technical implecations in detail there.
Will the Web Recorder and the Web Spy be sometime in future improved so that they generate XPath expressions which deal with SVG Elements appropriately out of box? Honestly, I do not expect it to happen. It would be super difficult. If you just wait for some improvements to come up, you will waste your time.
I would recommend to those who need to test SVG in Web pages using Katalon Studio
- You should not expect Web Recorder and Spy tools to automatically generate locators to point SVG elements of your interest at 100% accuracy.
- Rather you should train yourself for the W3C XPath technology and the W3C XML Namespace specification so that you can understand the differences between the 2 XPath expressions presented above.
- You need to train yourself so that you can write appropriate XPath for yourself manually, or modify the auto-generated XPath to make it appropriate.
- For getting started with XPath, see XPath in Selenium: How to Find & Write? (Text, Contains, AND)
- For getting started with XML Namespace, see XML Namespaces
2 Likes
Hey @kazurayam
I just read your answer here and it is quite interesting.
My question is Katalon really can’t able to locate the SVG elements with correct xpath or it just not finding proper locator in web spy or recording.
Is Katalon able to locate SVG elements if I provide proper locator or it just not handle the SVG elements.