Cannot locate svg elements (web development using vue.js)

Using CSS Selector in Chrome is working.
image

However, elemental objects cannot be captured in Katalon.
image

Web development using vue and webpack,This is part of the source code.

What do I do?

If you’re talking about capturing the element(s) using the record web tool, I can’t help you.

If you want to manipulate the elements in some other way (like clicks) then we can define test objects that target clickable web elements by hand and either store them or use them directly and discard them without storing them. This leads to the question…

What do you WANT to do?

Locate the chart elements and get all the data from them.For example, all the indicator values in the chart

Trying to locate this svg element using this URL method also fails to locate this svg element:

//*[name()=‘svg’]

But it is possible to locate a higher level div element.
In katalon it’s like this.

But the svg object can be located properly in the chrome console.
I don’t know what’s wrong.

Machine translation was used,I hope you’ll understand.

This CSS selector will return the first text element inside the svg element in your screenshot:

div.highcharts-wqngav5-0 svg > text

You can test it in the browser console and retrieve the x attribute:

document.querySelector("div.highcharts-wqngav5-0 svg > text").getAttribute("x")

>>> 925

In using the xpath like done in your link, if the tag you are trying to get is the svg, it may be as simple as: //svg. Nothing else needed if there is only the one svg element on the page. However, I don’t see it giving you much progress. Like your link shows, much of your information is under the g tags.

You can make a List<WebElment> of all, or specific, g tags and go from there. There are several answers on this forum, like your own link, about getting a list of elements.

@applehdh

The URL of your Application Under Test — is it public? Can we get access to it via Internet? If so please share the URL.

the application is for internal use and not available on the internet.

highcharts-wqngav5-0
The id is dynamically generated and changes with each request. after I try to change the parameters, I can’t get the element.

image

Working in this way.
image

Here is an example project in which a xpath selector can successfully locate a <svg> element generated by Highcharts.

I think that the XML Namespace xmlns="http://www.w3.org/2000/svg" in the target <svg> element matters.

I’ve seen your article before, adding namespace-uri() = “http://www.w3.org/2000/svg”, the element cannot be found in katalon.

App seems to have used this plugin when developing the application.

This is an online demo of DEMO.
http://www.dulinrain.top/vue-highcharts/

This demo program seems to be relatively close to the problem I’m having.

The following code worked just fine.

<svg> element in the suggested online demo http://www.dulinrain.top/vue-highcharts/ was successfully located.

import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser('')
WebUI.navigateToUrl('http://www.dulinrain.top/vue-highcharts/')

TestObject tObjSvg = new TestObject('tObjSvg').addProperty('xpath',
	ConditionType.EQUALS,
	"//*[local-name()='svg']")
WebUI.verifyElementPresent(tObjSvg, 10)

WebUI.closeBrowser()

I do not see what’s wrong with your code.

The direct use of scripts to locate svg elements was successful and also allowed the internal data to be fetched properly.
The Objects sky tool made me make a wrong decision.Thank you very much for your patience.

What was it? Would you share your case for reference?

Sorry, spelling mistake.The correct spelling is ‘Object spy’ tool.
Using this tool that comes with katalon, even with the correct xpath, it says the object unable to find.

I think that most of the software tools that work on HTML do not fully support XML Namespaces specification. These tools might not process appropriately HTML documents with nodes with XML Namespace (e.g., <svg xmlns="http://www.w3.org/2000/svg">). Katalon’s Object Spy is one of them. I wouldn’t say it is buggy. It does its best. Locating <svg> element in HTML — it is an exceptional case; there aren’t many who want to do it.

If we want to locate SVG nodes in a web page, we need to be capable of writing XPath expressions manually without tools support, I think.