Robotic Process Automation (RPA)

Hi there

As I continue to create robots focused around websites and web apps I have noticed that one day they work and then about 4 days later the robots stop working. I have come to determine that it is because I am using the css selector type when creating my Set Value to Field Command. I use css because through my playing around that seems to be the only one that I can get working though there are many to choose from.

Is there a document outlining how to use the other selector types effectively I am trying to determine if there is an approach that is less app to change when using the Set Value to Field Command. I am finding that the css selector value changes too often.

Thanks

------------------------------
Troy DesBarres
------------------------------

Hi Troy!

Good and essential question when automating against web sites. Also a generic one and I'm afraid that there is not a silver bullet for it. Just searched the internet and there's a lot of discussions going on regarding the topic and also some nice article / blogs about it. Having read through some of them, they kind of verify that there really is not any easy answer to this.

I have found myself using more XPath selectors than CSS ones recently. I have not run any extensive testing, but I have a gut feeling - at least with the web UIs that I've been working with - that XPath works more reliable. But as said, I have not really tested this in excess to say anything confident about this. So, as quite often, I guess it depends on the web site you are using 😕

------------------------------
Jukka Juselius
Senior Solution Architect - IBM EMEA
WDG Automation Program Lead for EMEA
IBM Digital Business Automation
------------------------------

Original Message:
Sent: Thu January 14, 2021 03:10 PM
From: Troy DesBarres
Subject: HTML Elements

Hi there

As I continue to create robots focused around websites and web apps I have noticed that one day they work and then about 4 days later the robots stop working. I have come to determine that it is because I am using the css selector type when creating my Set Value to Field Command. I use css because through my playing around that seems to be the only one that I can get working though there are many to choose from.

Is there a document outlining how to use the other selector types effectively I am trying to determine if there is an approach that is less app to change when using the Set Value to Field Command. I am finding that the css selector value changes too often.

Thanks

------------------------------
Troy DesBarres
------------------------------

Hi Troy,
I'm going to weigh in on this.
In my opinion, CSS will be the best option in all cases, followed by xPath in a close second.
The thing is, you can't always trust the CSS generated by the browser, and you usually have to do some tweaking in it.
I've compiled some tips I think are useful when choosing your CSS selector.

1 - Remove classes

One of the divs has the class ".col-md-8.col-xs-12". People used to web design will recognize this, but what you need to know is that if your screen size changes, this selector will change, and your robot will stop working. So, how can we improve this?
It still works, and it isn't dependant on the screen size.

2- Don't depend on ID's that look 'machine-generated'.

If you try to get the CSS of an element that has an id(id="loginInput"), the selector generated by the browser will be the id with a #(#loginInput).
That's fine for most cases, but sometimes you will find something like this:

3- Don't trust selectors that depends on too many elements.

As your selector gets bigger, it has more and more dependencies. That means that even if one of those elements changes, your whole selector stops working.
How can we make this selector smaller?
In this case, span has a class called "timeAgoFormat". We can add this tag to its But now, instead of matching only the one span, it matches all of them on the page. So we could use the attribute selector: You will find more information about CSS selectors here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

4- Debugging selectors without running your bot every time

To check if your selector works, open the "developer console" in the browser, go into the console, and use this syntax:
There are other functions with similar capabilities, but querySelectorAll returns an array of all the elements your selector matches (instead of only the first one). This is useful not to see if your selector matches exactly the elements you want to, not more and not less.



Hope that helps!

------------------------------
Lucas Lima Oliveira
------------------------------

Original Message:
Sent: Thu January 14, 2021 03:10 PM
From: Troy DesBarres
Subject: HTML Elements

Hi there

As I continue to create robots focused around websites and web apps I have noticed that one day they work and then about 4 days later the robots stop working. I have come to determine that it is because I am using the css selector type when creating my Set Value to Field Command. I use css because through my playing around that seems to be the only one that I can get working though there are many to choose from.

Is there a document outlining how to use the other selector types effectively I am trying to determine if there is an approach that is less app to change when using the Set Value to Field Command. I am finding that the css selector value changes too often.

Thanks

------------------------------
Troy DesBarres
------------------------------

Hi Lucas and thanks so much for your input. I really agree with your CSS assessment. If you just zone in on the element and not the part that can change this is a great idea.

Thanks so much I am really enjoying the tool my only hope is that IBM RPA / WDG remains true to RPA and uses the additional tools of IBM such as Capture, Workflow & AI and does not become a part of or solely reliant on any of those tools. In fact I would decouple some of the current RPA commands that are there now and add additional ones that are more RPA in nature but this is for a different thread.

Again thanks for your insights I really appreciate it.

------------------------------
Troy DesBarres
------------------------------

Original Message:
Sent: Mon January 18, 2021 08:58 AM
From: Lucas Lima Oliveira
Subject: HTML Elements

Hi Troy,
I'm going to weigh in on this.
In my opinion, CSS will be the best option in all cases, followed by xPath in a close second.
The thing is, you can't always trust the CSS generated by the browser, and you usually have to do some tweaking in it.
I've compiled some tips I think are useful when choosing your CSS selector.

1 - Remove classes

#MainCopy_ctl06_ucMessageList_rptMessageList_pnlMessage_1 > div:nth-child(1) > div.col-md-8.col-xs-12 > div > div > span

One of the divs has the class ".col-md-8.col-xs-12". People used to web design will recognize this, but what you need to know is that if your screen size changes, this selector will change, and your robot will stop working. So, how can we improve this?

#MainCopy_ctl06_ucMessageList_rptMessageList_pnlMessage_1 > div:nth-child(1) > div > div > div > span

It still works, and it isn't dependant on the screen size.

2- Don't depend on ID's that look 'machine-generated'.

If you try to get the CSS of an element that has an id(id="loginInput"), the selector generated by the browser will be the id with a #(#loginInput).
That's fine for most cases, but sometimes you will find something like this:

id="luid-1f0349e8-7fda-40c9-aedc-b73be4a9bd47"

This wasn't a name chosen by a human programmer, so this ID will likely change in the future (often even after you refresh the page). Here is a video showing you how to generate a css selector without depending on an element ID.

3- Don't trust selectors that depends on too many elements.

As your selector gets bigger, it has more and more dependencies. That means that even if one of those elements changes, your whole selector stops working.

#MainCopy_ctl06_ucMessageList_rptMessageList_pnlMessage_1 > div:nth-child(1) > div.col-md-8.col-xs-12 > div > div > span

<span class="timeAgoFormat text-muted" data-source="rh_department">Posted yesterday</span>

How can we make this selector smaller?
In this case, span has a class called "timeAgoFormat". We can add this tag to its

span.timeAgoFormat

But now, instead of matching only the one span, it matches all of them on the page. So we could use the attribute selector:

span[data-source='rh_department']

You will find more information about CSS selectors here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

4- Debugging selectors without running your bot every time

To check if your selector works, open the "developer console" in the browser, go into the console, and use this syntax:

document.querySelectorAll("your-selector")

There are other functions with similar capabilities, but querySelectorAll returns an array of all the elements your selector matches (instead of only the first one). This is useful not to see if your selector matches exactly the elements you want to, not more and not less.

Hope that helps!

------------------------------
Lucas Lima Oliveira

Original Message:
Sent: Thu January 14, 2021 03:10 PM
From: Troy DesBarres
Subject: HTML Elements

Hi there

As I continue to create robots focused around websites and web apps I have noticed that one day they work and then about 4 days later the robots stop working. I have come to determine that it is because I am using the css selector type when creating my Set Value to Field Command. I use css because through my playing around that seems to be the only one that I can get working though there are many to choose from.

Is there a document outlining how to use the other selector types effectively I am trying to determine if there is an approach that is less app to change when using the Set Value to Field Command. I am finding that the css selector value changes too often.

Thanks

------------------------------
Troy DesBarres
------------------------------