Power Automate Desktop - advanced UI elements

hi everyone i'm thomas and this is power platform done quick today i'd like to show you how to stabilize your robot using ui elements and editing the css selector it contains when you add a ui element for example the first listing here in feature that that's on my favorite test site you can just add it and use it and a lot of the time you know that'll work but it's very often that after a week or maybe a couple of days it'll fail because something in the structure of the ui element changes so always edit these the text we see here is called a css selector and this text can be edited by double clicking you can see when i get this editor up i have the different elements in the website is a tree structure starting with the whole website this is a body element then a division element division division all the way down to the span element that actually contains the text that i want to read in actuality we don't need all these activated we can deactivate them and now i'm just looking on the website for a span element with the class event text prime so now the question is how will i know if that element is enough and isn't it or so on so what i usually do on the website i'll hit f12 and that will give me the dev tool now the dev tool is used to inspect the html elements while the different elements on on the site i can use this uh in the top left tool to get me to the element and here is the uh the element that i added and it doesn't look that unique so probably there are more span elements with the attribute class event text you can see all the different element types are here in purple the division division division and so on and so on and all the attributes are next to it we usually don't want to use a class attribute to do anything because a class is very broad and a lot of elements will have the same class we like to use ids names or what have you so what i do is i look for something in this tree structure that actually is unique and there's a bunch of stuff actually this is dashboard featured event but that's fine there's the featured live and i can see all this is embedded into a section with the class attribute content box small padding featured event so this is perfect i'll use this section to identify that identify the box and within that i can look for my span element so section element there it is and it contains all this stuff the section element but maybe the programmer will actually change this class so i think i'll edit this to using a contains featured events so now paul ultimate is only looking for a section element which contains the class attribute containing the featured events string but this is perfect now i'm in the correct box when i have this activated and now i can just turn on my span element and let's see how this goes i have added a launch chrome attached running instance so i don't have to start up a new website at a time i want to test this uh and identify it by title the drop down will come down and just give you the available browser tabs you have open and next to get details of element on the actual element now always rename the element after you've added it because there's a lot of them and you have to have a good overview so i'll call this first event because it's the top event in the box all right you can see it's even marking this so it gets the correct text that's brilliant but why did it actually get the correct text if you take a look at the um span elements here event text prior and event exec there's actually more of them here so why did you get the correct one well when paul automate finds two different elements that are actually described the same uh it just chooses the first one it can find so the top one is here and that's the way i'll know i'll always get the the first events in in that box but what if i want to read the second event or the third event well in order to do that i can use something called ordinals ordinal is not something it's not an attribute attribute it's not you can see ordinals here anywhere in any of the elements but an ordinal is the order some element is in a box so in this division that has id id featured live there's a bunch of a elements and you can tell power automate that i would like the second a element within this box so let's try to do that by editing our ui element well this here is the box uh marking this section we already know that we are in the correct section so within this we can say okay i'd like the division with uh with the featured live id that's the um that's the box containing all of the live events and here anchor that's the a elements that we were looking at so the anc elements i can activate them and you see this has ordinal zero zero index so that means it's the first a element uh in this division but i can always do this one so now i get the second one i don't even have to include the class and i shouldn't include it if i don't need it as little as possible always and now i should get yeah this should work let's try it out super bad chessy classic yep that's the correct one perfect it works now this next exercise could be to check what all the events actually are by looping over them and that is very easily done you know i'll just choose a standard loop and start from zero the loop index here will be let's just say three the first three sorry the loop index here would be the numbered event so event number [Applause] pick one well and editing this should be quite easy we can choose the element and insert a variable in the ordinal place um but doing it like this just inserting a variable here sometimes bugs out and it's it's like it really doesn't work when i insert a variable in the editor like this so i had to change it to custom and do it like this i'm assuming this bug will be fixed at one point all right let's check it out okay so first it reads the first event text and now the second event text and the third and i don't have to scroll down you know it reads the text from these uh guys here so it doesn't matter what you can actually see on the web page i could keep going if i wanted to so awesome now the next thing i want to talk about is what if i want to check if an event is actually there on uh on the screen so let's say um this sunday study with uh video master meters rasma if uh i want to check if that element is actually there what i'm looking for is not the element type or the attributes it's the text within the element so let's check it out how that is now when you see this overview here elemental view you can see the actual text in the website contain like this you know you start a span element and then the span element ends within that span element this text is here so what i want to do is search for span element with attribute class equal event text prime but make sure that it has this text inside it now um that is very possible let me delete all this add a new element like this copy the text that's within open it and just get rid of all this redundant stuff now i just have a span with this class and as we talked about that's a lot of them but i can use a css operator called contains and enter the text that i'm looking for now this contains operator note the syntax it's a colon attached to the span element i could keep going and make more element if it wants elements if i wanted to and this is actually looking for the text on the website very handy now the plan is to check if the event is actually happening so checking if the element is on the website of course i'll first edit the name and in order to check it i'll use the specialized if sentence if web page contains yes contains element and i'll choose my event element and if it does [Applause] put in this display message so we know that it's actually entering the if sentence and running it perfect so that's where you can check if the elephant uh event is happening now let's just change this just a tiny bit w e in the middle of study and then nothing's happening all right i hope this helps and hope you'll have a good day goodbye

Channel: Thomas "Shaky" Petersen

Views: 9,403

Keywords:

Id: 2PcyBa22Jj8

Length: 10min 57sec (657 seconds)

Published: Sat May 07 2022