1

I am quite new to Karate UI automation and I have a front end UI that has a SVG element which when clicked brings a drop down.

When I am writing the UI test for it, I get javascript evaluation error and hence seek some advice/help.

Here are the screenshots of the UI element and its CSS locator clearly seen on the screen

The button that needs clicking marked in yellow

This is how the CSS locator shows up for the SVG element

The CSS locator of the SVG element

This uniquely identifies the SVG element(the plus button)

svg[class='svg-inline--fa fa-plus-square fa-w-14 ']

This is the part of code that I have written to click it

 And click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']")

And here is the error I get:

 javascript evaluation failed: click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']"), js eval failed twice:document.querySelector("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']").click(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'click' of null\n    at <anonymous>:1:78","objectId":"{\"injectedScriptId\":2,\"id\":3}"}

I tried various things that can uniquely identify the SVG element like using the compelete Xpath and also using the parent class name(though it was already unique with just the class name) but it still did not work. I tried wildcard locators as well but since there is no text/name of the element, it did not work. When the tags are say input or button etc the same way of css locator works but SVG ones did not for me.

tagname[unique_id of the element like key=value pair]

I am wondering if we need to use a different way to identify SVG elements using Karate UI? The same path when used in Selenium worked.

Since this is a UI that requires VPN connection and secure acccess, it may not be possible to provide a minimum code to try and replicate it. But am happy to provide more details if needed.

I have many such SVG elements on my UI and any help in this would be greatly appreciated.

Mihir
  • 491
  • 5
  • 21

2 Answers2

1

Use selector hub as an extension to chrome, firefox, edge and opera. Ive only used with chrome and it worked fine and allowed me to quickly and easily find svg relative / absolute xpath. This worked no problems in a find and click capacity on numerous svg elements (via karate script)

jbart18
  • 138
  • 7
0

2 suggestions.

  1. Try to get some nearby element and work backwards: https://stackoverflow.com/a/63988977/143475

  2. Figure out the location of the SVG and fire a mouse-click: https://stackoverflow.com/a/63828083/143475

Unable to give you specifics without a way to replicate, but - it should be possible to find a "pattern" so you can write a custom function as described in the docs. So that can be your goal, something like this:

* svgClick('svg-inline--fa')
Peter Thomas
  • 54,465
  • 21
  • 84
  • 248