Katalon CSS/Xpath not working with SVG charts

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