I am struggling to capture elements of type SVG
I have a div with 2 children, one span and one svg.
div[data-qa-target = ‘fs_rmbs’] span WORKS
div[data-qa-target = ‘fs_rmbs’] svg FAILS
Both of those queries work in chrome.
document.querySelector(“div[data-qa-target = ‘fs_rmbs’] svg”);
I also tried bypassing with nth-child but I can’t get that to work either,
It think maybe some of your spaces are causing an issue.
I don’t have a site locally that uses SVG but I do know a site that does. I used https://tiddlywiki.com/#ButtonWidget to make my test. Also, I used Firefox 63.0.
In the developer tools I used this selector:
document.querySelector("div[data-tiddler-title = 'ButtonWidget'] svg:nth-child(1)")
which works fine. However, this selector (note the extra space after “svg”) selects the inner data from the SVG:
document.querySelector("div[data-tiddler-title = 'ButtonWidget'] svg :nth-child(1)")
Personally, I tend to write without any unnecessary spaces:
Hope this moves you forward…
Assuming page A Simple SVG Example from google
document.querySelector("div > svg")
selects the first SVG in the page that’s a child of a div.
<svg x="0px" y="0px" width="409px" height="48px" viewBox="0 0 409 100" style="enable-background:new 0 0 409 100;" xml:space="preserve">…</svg>
No combination of spaces works in Katalon when using the CSS selector.
The syntax is correct as you can see in the screenshots below because div>svg returns nothing while div>p returns 4 results.
Yep, agreed, that looks buggy. You can of course just build your test objects yourself and dispense with the Object Spy.
But certainly report the issue on the bugs forum.
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.