Clicking on image with Svg format

Product Forums Katalon Studio
,
1

HTML.zip (3.4 KB)
Hi,

I am unable to click on an image which has a SVG format (attached full HTML file). Tried the following but it’s throwing an error:

                              String expr =  '''
                             //*[local-name()="svg"]
                                /*[local-name()="g" and @class="svgZoomPanel"]
                               /*[local-name()="g" and @class="svgDrawingSurface"]
                                  /*[local-name()="g" and @class="svgFixedLayer"]
                                       /*[local-name()="g" and @class="svgShapeLayer"]
                                         /*[local-name()="g" and@class="sapGalileiSymbolLink"]
                                          /*[local-name()="g" and @id="Galilei_ActionSymbol1"]
                                      '''

                                     TestObject tObj = new TestObject()

                                     tObj.addProperty('xpath', ConditionType.EQUALS, expr)

                                     String storefirstvalue = WebUI.click(tObj)

Thanks in advance for the help :slight_smile:

BR,
Saumil

1 Like
2

Show me a screenshot of the rendered svg element.

3

The start of the SVG element is highlighted in blue:

d1
d11030×697 72.8 KB

And the tag in concern is highlighted in blue:

d2
d2908×513 48.8 KB

4

Cautionary note: I don’t work with XPath. I work with CSS. Even so, looking at your XPath it looks quite fragile. Long XPath locators and long CSS selectors are inherently fragile - one seemingly minor change to the page and your selector are prone to breakage. That said…

This CSS selector will target the svg element itself:

#svgRoot-1

This will target the <g> element:

#Galilei_ActionSymbol1
6

@saumil.sah

The zip file you attached contained HTML.txt file which contains <svg> element only without wrapping <html> structure. When I open the HTML.txt file, browser shows the source but can not render the image. Therefore it is impossible for me to reproduce your problem.

Is your Application Under Test publicly accessible? If so, please share the URL.

7

Sadly it is not publicly accesssible. Have tried copying the Inner HTML (attached). HTML.zip (3.4 KB)

8

Your new zip does not contain <html>...</html> markups; it only contains SVG markups. It is not enough. Because the SVG markup detail is not in question. Rather whole HTML markup structure is in question.

Please make a full HTML file which contains your SVG markup so that others can reproduce your problem on their side. For example, on having the page is rendered in your Chrome browser, you can do right-click the page > Save as … to get the full HTML source.

Unless you provide it, sorry I am not able to look into your problem.

9

I am not sure whether the page will be accessible at your end but here is the entire HTML (attached) source

The element that i have to click is:

sendemail
sendemail862×274 27.1 KB

Campaign Designer.html (698.4 KB)

10

I could open Campaign Designer.html in Chrome browser.
I could open it in browser launched by Katalon Studio.

I tried to perform some operations on the SEND EMAIL box and got success.

My test case script:

import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import java.nio.file.Path
import java.nio.file.Paths

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

Path projectDir = Paths.get(RunConfiguration.getProjectDir())
Path html = projectDir.resolve("Include/fixtures/Campaign Designer.html")
String htmlURL = html.toFile().toURI().toURL().toExternalForm()
WebUI.comment("opening ${htmlURL}")

WebUI.openBrowser('')
WebUI.navigateToUrl(htmlURL)

TestObject to = findTestObject('Campaign Designer/g_Galilei_ActionSymbol1')

WebUI.verifyElementPresent(to, 10)
WebUI.scrollToElement(to, 10)
WebUI.click(to)
WebUI.delay(5)

WebUI.closeBrowser()

The Test Object for the SEND EMAIL box:

11
112144×1840 561 KB

I used the following XPath expression — the simplest one worked fine.

//*[@id="Galilei_ActionSymbol1"]

Here I share the project pushished on GitHub:

11

I have already tried similar solutions:

  1. Tried with just selecting the xpath attribute:

    1
    11368×904 189 KB

  2. And then by selecting other attributes:

    2
    21392×902 180 KB

The error that i am getting is:

3
3926×712 197 KB

This is how the element properties look like in my browser when i right click and inspect them (highlighted in blue):

4
4861×167 14.5 KB

12

Then, what is your question?

13

i am unable to click on the box with the xpath values that i have mentioned. The Spy Web also does not capture the xpath values for the ‘Select Box’. What am i doing wrong here?

14

No, it is not similar at all.

The XPath of your test object is completely different from mine.

15

Tried replicating the xpath value that you are using in your test case. Still, getting an error

16

It is a bad idea to rely on the Spy Web tool. Don’t expect it to provide you a complete solution. Especially when the HTML of your Application Under Test is complexed, simply the tool fails to be useful.

And you should study XPath technology and/or CSS Selector technology first. Once you got enough understanding about the XPath/CSS, then the Spy Web tool can be a nice help for you. Without the background knowledge, a GUI tool would be just a puzzle.

17

You can create/modify a Test Object manually. Spy tool is just one of the methods to edit Test Objects.

18

@saumil.sah

Seriously, what is your problem. You have been given TWO solutions. One by me in CSS and one by @kazurayam in XPath. Apart from syntactic changes, they are identical.

Pick one. Get it working (with apologies to John Cleese) “before one of us dies”.

19

@saumil.sah a bit of added info here:
spy tool will just ‘guestimate’ and propose some selectors to you, based on internal implemented algorithms (which may change in time) and what can capture on the rendered page (which sometime can be browser dependant)
You don’te have to trust them blindly, it is just a quick helper.
study the proposed topics (css vs xpath) and a bit of html basics to understand how to use the selectors properly.

w3schools is a good source for all of above.

20

Until now i used to blindly trust the Spy tool! this was an eye opener. Will keep it in mind :slight_smile: You are right! i need to update myself with the right way of writing xpath and i guess it’s about time that CSS should be in my learning plans

21

Lesson learnt- Not to trust the Spy tool blindly!

I will update with the solution from my end once I am able to understand the xpath behaviour