Finding Element's xpath address

Archive
,
1

Hello there,
I’m trying to get an attribute of the small arrow next to ‘Date’ that is shown in the pic:

I used Katalon recorder to find the element’s xpath address and it gave me the following xpath:

"//div[5]/sort-direction/iron-icon[2]"

but this xpath is not enough because I need the “d” attribute that inside the ‘path’ tag (as you can see in the pic).
I tried to modify the xpath like this :

"//div[5]/sort-direction/iron-icon[2]/svg/g/path"

but then I got an NoSuchElementException alert.

Any ideas of getting this attribute??

last modified arrow.png

1 Like
2

depending on what you are trying to do…perhaps just record the actual column and use click to click the column for sorting.

you can also try something like this:
//*[@d=‘M7 1015 5 5-5z’]

3

you may try also with https://chrome.google.com/webstore/detail/xpal-xpath-generator-test/lpfjogcaifigkimnlkepjlkfhpdhebap tool. It generates great xpath range.

4

Also you can refer this link to write dynamics xpath- https://www.softwaretestingmaterial.com/dynamic-xpath-in-selenium/

Or by inspect element you can also find exact xpath, Just point your down arrow and copy -> Copy Xpath.

5

Use Ranorex Selocity Chrome browser extension. It generates both xpath and css.

6

All above comments are not helpful to this issue. Katalon seems cannot access svg elements after I try different ways of xpath… Need help please.

7

Please try xpath by something like “//[local-name() = ‘svg’]" for svg tag and then you can access svg inside element like "//div[5]/sort-direction/iron-icon[2]/[local-name() = ‘svg’]/g/path”. Don’t trust on web spy since it won’t find anything about svg tag but the test can run with the xpath.

8

You can use both the xpath or css locator scheme to the date arrow icon. Here is the step by step description to use locators in selenium.

9

In the attached image, I found the following tags in the target HTML,
<sort-direction>
<iron-icon>

These tag names are not usual tag names defined in the HTML4 or HTML5 Specification. I wondered what they are. I did a few searches and found the following page:

The page says:

What are web components?
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.

<sort-direction>, <iron-icon> — these tags seem to be custom HTML tags based on the Web Components supported by browsers as an experimenting feature.

On the other hand, WebDriver (+ Katalon Studio) is based on the classic HTML and DOM specs. I suppose that the Recorder of Katalon Studio can not find the custom HTML tags based on the new Web Components Spec because these are out of the scope of the classic HTML & DOM specs.

10

Andrej_Podhajsky has posted the following:

His code enables you to send an XPath expression contained in a TestObject to browser, and let browser evaluate the expression using browser’s XPath engine over the page’s DOM, and return the evaluation result from browser to Katalon.

This method might be effective to the custom HTML tags based on the Web Components such as <iron-icon>

Sorry but I have not tried this approach yet.

1 Like