Katalon CSS/Xpath not working with SVG charts

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:

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 :slight_smile:

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

@jass Sures, I will check with latest version and update here.

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"]

Hi @kazurayam
Thank u for replying. I tried with above xpath but still unable to get text .

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:

  1. verify if //div[@id="container"] can select the nodes in the Web page (DOM).
  2. if it works, then modify the XPath to be a bit more specific. Verify //div[@id="container"]/div
  3. if it works, then verify //div[@id="container"]/div/*[local-name()="svg"]
  4. if it works, then verify //div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g"]
  5. if it works, then verify //div[@id="container"]/div/*[local-name()="svg"]/*[local-name()="g" and contains(@class, "highcharts-axis-labels")]
  6. 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")]
  7. 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"]
  8. 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"]
  9. 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.

@kazurayam Totally agree with u… Thanks alot for all ur help.

@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