RPAChallenge.com in Blue Prism using CSS Selectors and XPath Expressions

[Music] hey everybody dave here today i'm gonna automate rpachallenge.com in blue prism for the third time but i promise there's a good reason for it the first time that i did it it was in order to build a full robust process that i would feel comfortable putting into production the second time which i ended up calling the streamlined version was just to show how would you automate rpacchallenge.com in blue prism if you were just going to build it all in a single action in an object that more closely mimicked what i do and have done in the other rpa tools the reason we're doing this again is that i discovered two features that i didn't know about before in blue prism one of them is xpath expressions now i kind of knew this existed i just didn't realize how versatile and useful it can be the other feature is something that was actually introduced in 6.9 the css selectors attribute here's the thing this actually dramatically improves the capability we have to spy elements in blue prism i don't know if it's possible to overstate how amazing this is i have been able to automate websites in the past with blue prism using some excessively complex techniques just to make it work not that blue prism didn't have the functionality exactly it's just it was a really difficult website and the features i was aware of in blue prism just did not work for it super well i did end up getting it to work but it was very difficult both of these features the xpath expressions and css selectors put together make a fantastic improvement to application modeler features in blue prism so let's use those two features this time when we automate rpa challenge.com in blue prism as i always do in these rpa challenge videos i'd like to point out a couple things before we start the first thing i want to show you is the website itself and then the second thing i'll show you is the changes that i made to the input excel spreadsheet that we use to enter data into this webpage rpachalge.com is a free website that you can go to and just have fun practicing your automations you can challenge yourself and challenge your rpa tool to see if it's possible to automate this web page now this is not your average everyday web page it's a little different so let me show you how the first thing i want to point out is that so you could automate downloading this excel spreadsheet but i typically don't i manually download this excel spreadsheet by clicking on this button and then what i do is make a few changes to it and then once you have that saved somewhere locally on your desktop then you design an automation to first click start and you see it changed the button to say round one and then what you may or may not have noticed these fields changed location so you'll see as i click submit that the locations of the labels and their associated input fields will change location on the page and this happens every single time you click submit or reload the page the idea here is that the rpa tool needs to be capable of adjusting to find those fields wherever they are on the page it can be a little bit challenging because these input text fields don't necessarily have an id associated with them or a specific name that tells you this text field is the first name field now i'm going to show you in a little bit that that's not actually the case there is some detail inside of this text field that tells you what it is but the point is you specifically cannot use absolute xpaths to identify where these fields are because it changes each time you reload the page so you click submit let's say you're typing in all this data row by row from the excel spreadsheet and you get to the end it's going to tell you your success rate it actually checks the input that you typed into the fields to verify whether you entered the right data or not the next thing i want to point out is the changes that i made to the excel spreadsheet if you click this download excel button you'll get a spreadsheet that looks like this called challenge and then i've put that locally in my c drive in a test folder i'm going to open up that spreadsheet and show you a couple things that i changed i did one thing up here which is to change the last name field from having a space at the end to not having space at the end because that would break the automation the other thing is that i actually manually deleted this h column and it was empty already but it looks like there used to be data in it so when you retrieve the data from excel it gives you an extra field so i right click and hit delete last thing that i did is i selected all of the cells that are below this last data filled row and i did ctrl shift and hit the down arrow key it's going to select everything right click and hit delete there must have been data in these rows in the past and so it thinks there's data there now so i've just manually deleted that and you can see they're empty now so when i go and retrieve the collection into blue prism it's going to only pull this data i'm going to now create an object i'm going to call this object rpa challenge version 3 check the box and now here we are in our object first let's go ahead and just rename this action like we did before rpa challenge we're going to do everything inside of this one action not best practice but we're just trying to get it done to make it more in comparison to how i do it in other rpa tools just for kind of demo purposes i'm gonna first get some data from excel let's drag an action stage and i'm gonna change this to point to the ms excel vbo we're gonna want open workbook and we're going to leave the handle empty because it's going to create one for us i'm going to hard code c colon backslash test backslash challenge.xlsx we're going to output the workbook name i'm going to copy the stage and duplicate it open the duplicate up and then i'm just going to change the action to get worksheet as collection fast this will just give me a collection from whatever sheet is open at the time and i'm going to hit this store in button to create the data collection and the last thing that i need to do is to close the spreadsheet let's just close all instances to make it easy no outputs i'm done okay so that is getting data from excel i'm going to run this really quick to make sure that it works and here's our data inside of the collection and current values looks good let's go ahead and kind of plan out what we're going to do by dragging some stages onto here and then that will help me know sort of which elements i want to spy so the first thing i know i want to do because of some issues i've been having lately with chrome automation in blue prism i'm actually going to bring on here an action from the utility environment vbo to kill the chrome process before we open it i don't know that it's 100 necessary but it definitely makes my life easier when that's the case now that's going to kill all my chrome windows so then we're going to launch chrome and it's going to go to the i can go ahead and drag this over here application root we haven't created an application model yet so i may have to come back in here and change this this is kind of just a placeholder so i want to launch and then i'm going to wait for the start button so that i know so i know that i want these stages launch failed is what we'll call this we'll call this a system exception and we'll just say launch failed and we're going to end up choosing the start button there so then i want to click the start button click start we don't have an application element to use yet and we can't connect this yet because we don't have a node inside this conditional weight after we've clicked start we want to loop through the data let's name this loop data so how i'm going to do this is i'm going to use a navigate stage and i'm going to put a lot of rows into it you don't have to do it this way but i'm going to do it like this for now let's type values into fields and we're going to end up adding a lot of rows to this let me just go ahead and click ok for now and then the next thing we want to do is click submit so let's rename this submit we'll end up putting the submit button in there and after that the last thing i want to do is i kind of want to make sure that chrome is completely closed at the end so we're going kill the chrome back in here and change that terminate chrome i could just close chrome but some of the difficulty that i've been running into lately it doesn't actually matter how i close chrome unless i do a specific way and so i'm just going to go with the easiest way which is let's just close the chrome window and then kill the process and we're good to go after that now i'm not going to put this in the main flow because i'm going to set this off to the side and i'll just end up setting next stage and running that once i've kind of done a test i've looked at the results and then i'll run this in order for it to close chrome for me we've got kind of everything laid out i don't think we're missing anything but we'll have to see i'm going to go into application modeler and start building that out i'll leave the application name the same i'll choose browser-based application and it's going to be a browser that is launched from an executable let's browse and go to google chrome application chrome.exe next here's where we'll type http colon forward slash forward slash challenge dot com i also i'm going to go ahead and type two other things in case i need them force renderer accessibility and also incognito because i want this to open in incognito mode that helps whenever you decide to close chrome by killing the process it's kind of useful to use incognito so that the restore pages pop up doesn't happen and there's some other benefits to it as well next next next all the way to the end now the fun part i'm gonna click launch over here it'll launch the window for me and it might take a second what happened here someone has challenged you now before we launch this i realized i typed in the address wrong so we need to go to rpachallenge.com not challenge.com that's something completely different so i'm going to click launch and it's going to launch my chrome in incognito mode and it should connect yep so we are connected to it now and eventually this page will load there we go i'm going to click identify on this first element we're going to choose first name hold ctrl left click and we'll name this first name now here's what we need to do we're going to create one element and then we're going to make the rest of them match that element uh let's go ahead and we'll actually know what we'll go ahead and spy all of them and then make them all match so one two three four five six seven i created seven elements i'm gonna go with the first one identify spy last name and then the next one let's rename this last name next one identify phone number phone phone number email identify email the next one is address identify address the next one we'll go with is company name identify company name the next one is role in company identify role in company now we've got all these elements spied what i'll show you first is that this is what's known as an absolute xpath it's the full path from the top all the way down to the input at the very bottom and what we don't want is to use this because this breaks i'll show you highlight it works right now but if i go to the web page and click submit try to use it again it's not going to work it's going to fail and even if i only use the web name and web id or whatever all of those will break so i'm going to uncheck all of these and i'm actually going to do something a little different i'm going to uncheck every single one of these that were checked already i'm going to scroll down to the web css selector i'm going to check that hit the match column so it's at the top we're going to use only this attribute and that exciting i should mention that this could be a more complex maybe in other web pages and you need more complex css selectors i'm not an expert in that in fact i know very little about it and so i think if i can learn something in a matter of an hour uh you can too so let's just use this pattern that i've discovered i want you to practice it too and see if you can make it work in some of your objects and let me know how it goes but this is how you do it so check just web css selector and have the match type set to equal and then have value as empty for now and we're going to go get some stuff and put it in there i'm going to click over to the web page and what i'm going to do is hit either f12 or you can go up here and click the three vertical dots go down to more tools and then click developer tools both of those f12 or doing that will bring up this what this is showing me is a representation of the html of the page so uh there's a lot here please don't take the time to try to look through this manually what you want to do is go to the top left there's an inspect button this inspect button is very similar to the identify button in blue prism's application modeler so click that and then as you mouse over fields it's like what you'd expect it's going to kind of highlight the various fields that you can spy so i'm going to go to the first name field and click it and what it's doing is bringing me to the html that's specifically for that element now ignore all the extra stuff around here and try to just pay attention to the highlighted portion in this case what i'm going to do is look for something that tells me this is the first name field and so that's what i see right here it says label first name if i go and click inspect again and choose any of the other ones let's say roland company and then i look at this one when i look at the same attribute it says label role so i can see already that they are different for each field and that means i might not need an anchor feature in order to uniquely identify each input field without doing some complex thing like i did last time so what i'm going to do is use this ng-reflect name attribute to identify this specific field so what i'm going to do is go to what it highlighted and i'm going to right click on it and go to copy and this might be let me get out of the way there we go okay so click copy element and then let's go back over to application modeler and i'm going to click into the first name element i'm going to go to the notes tab just so i have a little bit more space to work with and let's paste what we copied now what this is is the same html that you would have seen over here and i'm going to delete the things that we don't need so i can already tell that i don't know what this attribute is but it's not going to be useful to me i'm going to get rid of that then i'm also going to get rid of the id attribute and the name attribute and the class attribute because all of those either change at runtime or are not unique to this specific element so i'm going to delete those i'm also going to delete the angle brackets that are before and after and now we're left with almost this is almost it i mean it's this is very close to being done as our css selector we have to do a couple things to this though the pattern is that the type of field that this is which this one tells me this is an input field that type of field has to be at the very beginning right after that you want a square bracket to open at the very end you're going to want a close bracket square bracket then make sure i'm going to remove the spaces just because i don't know if it's necessary then you take the the attribute name which is kind of like a field name inside of the element that attribute name you just leave it right here just after the open square bracket then have an equal sign after the equal sign put single quote around this value so i think it has double quote to begin with so put single quote maybe it would work with double quote i don't know but when i look it up the css selector examples i'll show single quotes all right so that's it that is our css selector would you believe that's going to work let's test it let's copy this go to attributes i'm going to paste it in here so we've got web css selector equals this input here's the field name or the attribute name uh and the value that that is assigned to that attribute in this case oh man here we go oh wait let's let's close this and hit highlight oh it worked okay so here's what we can do i'm gonna have to go find out what this value is for every single field so let's just click around a little bit and kind of glance at what each one is and then set up the rest of these elements i'm going to go back over here i'm going to hit f12 and then hit the inspect button click the company name one this one is label company name so that's easy inspect label last name label phone so this one's not phone number it's just label phone we gotta remember that email this one is label email that's easy roland company we already saw this one before this is label roll instead of label rolling company so so far the um phone number one is just phone enrolling company is just roll let's click inspect and then address is the last one so this is label address so we can basically just go into application modeler and let's copy the element mask of this first one and then paste it onto the rest of them so right now last name looks like this i'm going to right click paste element mask so what it should do is make these these the match column similar to what first name is and it will even change some of the values a little bit but for the most part it's going to leave it empty like it did here and that's what i want let's go ahead and paste element mask onto the rest of these saves me a few clicks okay and then let's go back to last name and we want to paste what we had before just put in last name go to phone number paste that in change this to phone email label email address change this to label address and then change this one to company name and the last one we if we remember right it's gonna be just label roll and that's it for the input fields we could go through and check all of them but i know they all work and if it breaks at run time we'll come back and fix it let me add a few other elements and i'll need to show you one more thing so let's click element i know that i'm going to want to spy the whole window because i need to activate chrome to bring it to the foreground so let's do identify let's change this to show win32 mode select the whole window and then i'm just going to deselect all of these visible screen visible and enabled and the only ones left are these two oh i'm going to go ahead and just rename this window add element i know that i want to spy the start button let's hit identify spy the start button i also want to spy the submit button now i'm going to go ahead and type this here because it's fun to me i'm going to copy the element mask again and paste it onto oh i forgot to rename this one this was submit this one is similar let me just reorder this okay let me go grab this so the the submit button is not an input field if i go back over to developer tools hit inspect and click on submit this is going to tell me that this is oh it is an input okay well that's that's fine then we're not going to use the same css selector though because in this case i'd say the best thing for us to use is value submit because i think that there aren't any other inputs that have a value of submit so let's go back over here and change so this is going to be submit excuse me this is going to be input we need to change it instead of using ng reflect name i'm going to just type value because it matches over here let me tell you change the second part and then i'll i'll compare them submit all right so we've got input value equals submit so i look in here i find an element that is to of type input it has an attribute named value that has a value of submit and that's how we get this now let's just make sure it works okay it's hard for you to see because orange and red are very similar to each other but it did highlight it just then it would have thrown up an error if it didn't now the last thing we need to do i think this is the last thing we want to do is the start button this one's a little bit different let me show you why if i go into developer tools click inspect and i click on the start button it's going to bring me to what i'd expect which is to see that this is of type button but the this class this this attribute right here and the class attribute are the only things here and this doesn't look particularly useful to me as far as uniquely identifying this button but what does uniquely identify it is the text that's right here the start text so you can kind of see this first part is like the beginning of the button and this last part closes the button what's between them is literally the text that's going to show on the page i want to find an element that has the word start now there could be other elements on the page that say start of course and so i could adjust my technique for identifying it at that point but right now i know that there are no other elements that just say the word start let's go to our start element this time we're going to deselect everything except for web path xpath okay so we've only got xpath selected we are not going to use all of this stuff in fact we're probably going to delete most or all of it the way we're going to do this is we know this is a button and we know that the text inside of it is start so let's delete everything here now i've looked up the syntax ahead of time and that's the only reason that i know it so i recognize this is somewhat technical but if i can find it i know that you can find it because i did not know these things ahead of time so i'm going to type button because that's the type of element i'm working with this is going to be similar to that css selector i'm going to hit open and close square brackets inside of that i'm going to type text because this is the we're looking at the text that's in the button right equals single quotes around start now we're almost there at this point we have what looks very similar to the css selector right we're going to put a forward slash at the beginning and then we're going to put actually a second forward slash at the beginning what this tells it is hey look for a button element that has a text of start anywhere on the page by having two forward slashes as opposed to one now there's one more change we have to make and i can't explain you why this is but it's a thing so because there's not actually an attribute named text i guess it's more like a function so i'm going to open and close parentheses after this word text so it's kind of like a little function i i guess that's what we're going for here and so we've got two forward slashes button and then inside of open and close square brackets we have text open close parenthesis equals and then start inside of single quotes that was a lot of words but honestly that's not that complex right you could adjust that if you had another button on the page then you just change the text right here and you could just use this pattern over and over and over again for all the buttons on the page and it is performant let me tell you you can't see it right now but it highlights it immediately when you use the xpath and the css selectors the performance is actually pretty amazing i'm going to click ok we're back in the object now and i'm going to go plug in those elements that i just created into each of these stages so let's go to the launch stage and drag in the root node we've got launch selected here okay there we go so we've got launch selected and i'm going to leave all the stuff empty at the bottom because it should just use what's in application modeler i'm not going to pause after this step because instead of an arbitrary weight i'm going to use a conditional weight to look for the start button and the parent document to be loaded this is a relatively new feature that used to be in internet explorer and now it's in chrome automation as well this will wait for the button to appear and also wait for the whole page to load before it allows the process flow to continue so let's type start button i'm going to change this weight to 15 seconds because sometimes this webpage takes a while to load let's link this in to the start button make it straight up and down for my ocd and then let's open up this click start drag the start button in we want to click this and do we want to pause after this i guess we could do a short pause of one second i could put another conditional weight in here to look for something but i think we've already proved that we can do it here so i'm just going to leave it out for now we are going to loop through this data so that's already good the first thing that i want to do is bring the application to the foreground to make sure that we can type keys into it and stuff let's drag the window element over change the action to activate application and then i'm going to put i think i can put a weight of like 0.2 seconds and we'll see how well that works after this i'm going to create a bunch of rows and we're going to fill it out but let's just do two at a time i'm going to drag first name over twice the first one is going to be to focus to set focus into the field the second one is going to do global send keys to send some data over to it and what i want to do is use the collection data its first name field data.firstname because you remember we are looping through that data collection and so we'll be on one row at a time so i can just reference it with dot notation data.firstname and then the interval i'm actually going to leave empty and let it just type as fast as it wants the next thing is i'm going to add two more rows and we're going to go to each element and do the same thing over and over again data dot last name add two more rows phone number focus global send keys data dot phone number add two more rows drag email over choose focus global send keys data.email more rows address focus i did not i didn't drag address over twice okay global send keys data dot address have you fallen asleep yet uh add company name company name focus global send keys data dot company name two more rows and our last field focus global send keys data dot roll in company click ok and then we could have added submit at the end of that but i decided to make it a separate stage let's put submit into this one and choose click do we want to wait for a short period of time after this we probably should let's just do like a 0.5 second wait after this that way each time it clicks submit there would be a small wait afterward again we could do a conditional weight but we're just trying to get this done and let's hit reset which is also going to check for errors it looks like i did something wrong row one contains an argument which field which one is this oh right it's probably because um i kind of messed it up by not creating an application model at first so i'm going to delete this row click remove add the row back drag this back over click launch and then we should be good to go now let's hit errors oh we got one more error failed to find reference to application element in row one oh same thing here so we're going to have to oh i didn't actually fix this one let's drag this over click on terminate and that looks good check for errors one more time there's only warnings left i'm not worried about those okay let's um let's go ahead and close and we just terminated and then we also killed the process let's reset i'm going to turn this up to full speed and let's run it and see how it goes all right so it's obviously got the data already you can't quite see it moving over on the left because when you run it at full speed the ui is not going to update fast enough for all the stuff it's doing okay so we've started we just did the first row and it looks like it's putting everything into the right places you can see it's running relatively fast i mean it's immediately finding all the fields so it looks like this was a success that wasn't too bad right now i do think that an anchor feature would be useful in blue prism however i don't think the need is as great as i originally thought it was originally i thought well how am i going to automate some websites without an anchor feature but now that i see that the css selector is there we also have the xpath expressions to use and and i only showed you a basic example let me tell you i was looking this up there are a lot of ways to use this there's a lot of different types of stuff you can do inside of the expressions so our success rate is 100 and we are good to go now that was it so what did you think did you think it was too hard be honest with me do you think the xbath expressions and the css selectors is really difficult personally i don't think it's that bad i mean here's what i think though an improvement to blue prism could be um i mean we could use an anchor feature right but like with the css selectors and the xpath expressions it's not that big of a deal but here's what an improvement that i think we could have done in blue prism is that this web css selector it would be really nice if somehow we could add some extra attributes here and and the extra fields that are appear inside of various elements the extra attributes i should say will automatically be dynamically created over here now i don't know that that's viable that might not make sense in blue prism based upon how application modeler works but kind of like how there's web class and web client y and web id if these can be dynamically generated in blue prism i think that would be pretty awesome in the worst case though right we've got web css selector so we can type it in manually the only problem there is we have to go look at the html of the page to figure these things out and personally i don't mind that but i know that when we compare it to some other rpa tools we're all immediately going to ask well why is it easy in another tool when it's not in this one and that's that's really the only reason i would suggest the change at all uh because i think that at this point i don't know that there's any website that i can't automate um except for ones that are intentionally designed to to make rpa break so let me know in the comments what you think of these two techniques personally i think they are earth shattering i think this makes a huge difference in blue prism automation especially in complex websites because both of these methods are extremely performant thanks for watching and i'll see you in the next video

Channel: Dave The RPA Guy

Views: 726

Rating: 5 out of 5

Keywords: BP, Blue Prism, BluePrism, RPA, Robotic Process Automation, Robotic Processing Automation, IPA, ML, Machine Learning, AI, Artificial Intelligence, Intelligent Automation, Automation, Technology, Innovation, Application Development, Dave The RPA Guy, Tutorial, Application Modeller, RPAChallenge

Id: nW73nd6Qf5A

Length: 35min 25sec (2125 seconds)

Published: Wed Apr 28 2021