Can xpath obtained from chrome be used as a css selector in uipath

Help Activities
,
1

Can xpath obtained from chrome be used as a css selector in uipath?
If not how can we convert a xpath into the selector required by uipath?

2

Hi @haberar911

Can xpath obtained from chrome be used as a css selector in uipath? Not as is extracted
If not how can we convert a xpath into the selector required by uipath? Here is the explanation, using your post as an example:

  1. You need to get the XPath complete instead XPath. Why, the simple XPath applies a query selector and we need the entire css path
    XPath: //*[@id=“post_1”]/div/div[2]/div[2]/div/p
    XPath Complete: /html/body/section/div/div[3]/div[2]/div[4]/div[3]/section/div[1]/div[2]/div/div/article/div/div[2]/div[2]/div/p

  2. The index on the XPath must be removed, the XPath will be look like this
    /html/body/section/div/div/div/div/div/section/div/div/div/div/article/div/div/div/div/p

  3. The UiPath selectors for web elements are composed by an XML of two nodes, the first one indicates the application in which you are working on (e.g. Chrome), the second node indicates the element on that application.
    Having said that, your XPath needs to be aplitted on two parts
    Node1: /html
    Node2: /body/section/div/div/div/div/div/section/div/div/div/div/article/div/div/div/div/p

  4. We will remove the first slash on each node
    Node1: html
    Node2: body/section/div/div/div/div/div/section/div/div/div/div/article/div/div/div/div/p

  5. We will replace the remaining slashes with a greater than sign:
    Node1: html
    Node2: body>section>div>div>div>div>div>section>div>div>div>div>article>div>div>div>div>p

  6. Converting this xpath into a UiPath selector will look like this:
    Node1: <html app='chrome.exe' />
    Node2: <webctrl css-selector='body&gt;section&gt;div&gt;div&gt;div&gt;div&gt;div&gt;section&gt;div&gt;div&gt;div&gt;div&gt;article&gt;div&gt;div&gt;div&gt;div&gt;p' />

image
image1249×426 35.6 KB

Note an HTML encode is applied on the greater than sign to define the css-selector attribute.

Here you can find more information about selectors and the attributes you can use:
About Selectors (uipath.com)

And my last recommendation, you can get your selector using the UiExplorer, it allows you to set additional attributes and validate the selector in an easier way.

Bests,

Andres

1 Like
3

Hey @AndresTarazona
Thanks for the detailed explaination.
But removing index from the selector might cause choosing the wrong element correct(By default if index is not given it choose the first one)

4

Hi again,

yes, there is the possibility that error you mention occur, in that case, you will need to to create additional nodes for the UiPath Selector, I mean, for each

Node1: <html app='chrome.exe' />
Node2: <webctrl tag='body' />
Node3: <webctrl tag='section' />
Node4: <webctrl tag='div' />
Node5: <webctrl tag='div' idx='3' />
Node6: <webctrl tag='div' idx='2' />
…
LastNode: <webctrl tag='div' idx='2' />

Node the CSS index are added as idx attribute.

Regards,
Andres