Katalon CSS/Xpath not working with SVG charts

Hi,
We are working with SVG charts for our applications, the identification via spy web is not working.
Basic Application available at : https://www.highcharts.com/demo/line-basic
Elements we tried to verify: Chart Title “Solar Employment Growth by Sector, 2010-2016”

Please help.

4 Likes

Please elaborate more details about this. Which steps have you done on this chart?

1 Like

Hi,

1. Create new test case
2. Open Spy Web and enter url as : Basic line | Highcharts.com and click on start
3. Added Chart Title “Solar Employment Growth by Sector, 2010-2016” to repository
4. Selected all 3 options including xpath and click on Verify and highlight … showing error
5. Move to Xpath advanced mode, “//*[@id=“highcharts-uovjq49-0”]/svg/text[1]/tspan[1]” and click on verify and highlight … showing error
6. Move to CSS advanced mode, “#highcharts-uovjq49-0 > svg > text.highcharts-title > tspan:nth-child(1)” and click on verify and highlight … showing error

please refer the below screen shots. I tried both record actions and spy web … both are showing error.

Katalon1.PNG

Katalon2.PNG

Katalon3.PNG

1 Like

Amy help? Same svg issues

Please try xpath by something like “//[local-name() = ‘svg’]" for svg tag and then you can access svg inside element like "//[@0"]/*[local-name() = ‘svg’]/text[1]/tspan[1]”. Don’t trust on web spy since it won’t find anything about svg tag but the test can run with the xpath.

The following XPath expression selects the svg node of the target document:

//div[@ id="container"]/div/*[namespace-uri() = "http://www.w3.org/2000/svg" and local-name()="svg"]

(Please ignore a single space character between @ and id, this space character is inserted to work-around a markup problem of this forum)

The target document has only one svg node so that you can relax the predicate and simplify the expression as follows:

//div[@ id="container"]/div/*[local-name()="svg"]

Supposing you create a Test Object named ‘Page_Basic line/svg_highcharts-title’ with the following xpath:

//div[@ id="container"]/div/*[local-name()="svg"]/*[local-name()="text" and @ class="highcharts-title"]

then the following code in a TestCase would work

WebUI.verifyElementText(findTestObject('Page_Basic line/svg_highcharts-title'),
    "Solar Employment Growth by Sector, 2010-2016", FailureHandling.OPTIONAL)
def title = WebUI.getText(findTestObject('Page_Basic line/svg_highcharts-title'))
WebUI.comment("SVG Title: ${title}")

The key is XML Namespace. See https://www.w3schools.com/xml/xml_namespaces.asp

---------

I made a demo here
https://github.com/kazurayam/KatalonDiscussion4977

3 Likes

@4280-kazurayam Thanks a lot for your help! The comments are really detailed and helpful!

Hello guys,

Your discussions were really helpful for me to understand the xpath writing conventions for SVG elements. However, I am having trouble clicking on an element which is under the svg tag.

Have to click on an element which is under a SVG tag but there are several layers within it as shown below. (The element concerning me is highlighted with Red)

ask1

Upon expanding the g tag, it has several other tags within it:

ask2

And when I finally expand it, the element that i want to click has the following attributes as shown below in the highlighted part:

My xpath is as follows:

//[local-name()=“svg”]/[local-name()=“g” and @class=“sapHpaJourneyChartChannelData”]/[local-name()=“g” and @class=“sapHpaJourneyChannelData”]/[local-name()=“g” and @class=“sapHpaJourneyItemIconGroup” and @x=“110” and @y=“178.801703163017”]

which is unable to locate the xpath element. Since there is no id associated with this SVG tag, i am only taking the class attribute and then the coordinates of the element.

Am I missing out here on something?

Thanks in advance,
Saumil

Your xpath looks incorrect against the screenshot images you provided.
Your xpath does not look at the <text> node.
How about this?

// *[local-name()=“svg”]/* [local-name()=“g” and @class=“sapHpaJourneyChartChannelData”]/ *[local-name()=“g” and @class=“sapHpaJourneyChannelData”]/* [local-name()=“g” and @class=“sapHpaJourneyItemIconGroup”]/*[local-name()="text" and @x=“110”]

Hi,

Tried it but it’s still not working

Is your target URL publicly accessible? if so, please share the URL.
Otherwise, please save the full HTML into file and share it.

Unfortunately, the URL is not publicly accessible. The HTML is as follows:

save.txt (166 Bytes)

save.txt contains just a single line of <text> node. No, this is not enough.

I need full text of your target HTML (from the 1st line to the very last line) in order to develop a proper XPath.

Thanks for your help. Really appreciate it. Attached is my entire HTML text.save.txt (10.4 KB)

I also came across a Katalon document which tells how to generate dynamic xpaths and then click on it:

String dynamicId = ‘Katalon123’

String xpath = ‘//div[@id="’ + dynamicId + ‘"]’

TestObject to = new TestObject(“objectName”)

to.addProperty(“xpath”, ConditionType.EQUALS, xpath)

WebUI.click(to)

Bit I am puzzled by a couple of things:

  1. How to input the xpath from my case
  2. What to input in the dynamic id and can the “objectName” be anything?

BR,
Saumil

The save.txt file is NOT a valid HTML. Apparently you edited the original; to make it short, to make it readable for me. Consequently the file is turned to be invalid HTML format, which is unable for any tools to parse correctly.

You can put the whole HTML into zip archive, which will be small enough to attache to the forum page.

Do you mean, there is some portions in your target HTML which changes dynamically (changes every time you requested the URL)? If so which portions? Please identify and describe it (hopefully you can write a xpath expression which identifies the dynamic portion).

In most cases, the best strategy is write a XPath or CSS selector which IS NOT dependent on the dynamic portion.

Uploading the zip file

save.zip (1.8 KB)

It was regarding some other xpath issues that i was having. i think i can work on it :slight_smile: