Mini-guide: Use ChroPath and @jokoum's selectors to automate web without appmask

A while back @jokoum posted guide to using selectors without an appmask here.

Install ChroPath for Firefox or for Chrome. (The developer reports problems with the Chrome store, but they’re probably fixed by now.

Screenshot of grabbing an XPath selector in ChroPath:

cp1

Here’s how a selector courtesy of @jokoum might look:

'domcontainer{<{<{<SelectorSeparator>}>}>}uia3:// input[id="query"]'

We can create a prefix for the selector up to and including ‘uia3:’, and then concatenate later to make creating selectors really easy. Note this line:

"set webSelectorPrefix to "domcontainer{<{<{<SelectorSeparator>}>}>}uia3:"

Using double quotes, we can create the prefix so that we only have to make one slight modification to the XPath selector from ChroPath before concatenating it with double quotes - remove the ‘@’ from the selector. Now we don’t have to use double quotes in the modified selector. (I’m not sure how much easier that is :grinning:)

Here’s the concatenation in the script:

WebAutomation.FormFilling.PopulateTextField \
    BrowserInstance: Browser \
    Control: webSelectorPrefix + "// input[id='query']" \
    Text:  'robin-language.org' \
    EmulateTyping:True \
    UnfocusAfterPopulate:False

Script screenshot:

Regards,
burque505

4 Likes

Thanks for sharing this @burque505 @jokoum

1 Like

Hi @burque505,
yes that is a great way to change selectors within code.

Two additional point I would like to add:

  • you can use CSS-Selectors too
  • you need no AddOn (or something else) to find the XPath/Selector. Everything is already in Chrome and Firefox available :grinning:

Firefox
Just right-click on the element you need and choose ‘Inspect Element’ Firefox%20Inspect

The developer tools open and the element in the DOM is already highlighted. Right-click there and choose Copy | Copy XPath

Chrome
Just right-click on the element you need and choose ‘Inspect’ Chrome%20Inspect

The developer tools open and the element in the DOM is already highlighted. Right-click there and choose Copy | CSS Selector

In the regards of XPath is Chrome a bit poor - it only gives you the full XPath

But as mentioned at the beginning: The technique you describe works also with CSS-Selectors :grinning:

e.g.:

‘domcontainer{<{<{< SelectorSeparator >}>}>}uia3:// table > tbody > tr > td > a:contains("’ + TicketNumber + ‘")’

Regards

3 Likes

Excellent guide! Bravo and thanks for sharing!

Best regards,
J.

1 Like

ChroPath gives a relative XPath, and you can copy it straight to the clipboard. And you have to click ‘Inspect’ to get to ChroPath anyway, which I suppose I should have mentioned. Granted it doesn’t provide much you can’t get from the browser’s developer tools and console, but it’s a LOT handier. As you can see from the screenshot, you can get relative XPath, absolute XPath, and CSS.

You can also create selectors by adding your own mini-template and inserting the selector via a variable; you can then download a list of those, created seriatim, to an XL sheet.

See the docs also, and a good 20-minute video on the ChroPath site. For now, it works better in Chrome than in Firefox for me for somethings, better in Firefox for others.


capture2

Regards,
burque505

1 Like