Automate Complex Graphs with Selenium || Complex SVG Graph UI Elements

hey guys this is navini welcome back to naveen automation lab so one very interesting scenario and very complex use case today i got from one of the uh linkedin profile that her name is naisa shree and it's saying can we solve this hi naveen i tried to contact you through email so i got her email also today to find the solution to my problem and the problem is that she's saying could you please help me to understand of how do we automate below graph this graph is available i tried reaching out to many automation trainers and nobody could solve it after going through your video somehow somewhat confidence that you could solve this below is the url i want to automate and fetch value from graph which is quite complex graph and emi payment per year can you please let me know how can we do this so we will go to the site and i haven't tried much but let's try to solve it now so uh this is the application that they have created i mean they have given and in this application if you see this uh there are graphs are available all the graphs are not recommended to automate because uh uh difficult to you know difficulty ui and difficult complex uh html expert and everything so so the concept is that from this emi payment per year you can see it over here we have to capture the details for each and every you can see these vertical bars are there right so see this is uh year 2021 there is a tool tip also and a tooltip is gone the moment you remove the mouse from here so let's see i remove uh move to this particular element it's saying something like this okay some year interest and total payment like that okay and then there is a uh you know orange bar and then there is a green bar so here you will see that okay you can go to this bar also like that and then again you can go to the green bar also like this so you for every single bar there are two sections are available orange and the green for orange you can have a different tool tape and then for green you have a different tool tip so she's asking that is exact same thing from this emi payment per year can you please let me know how to fetch the value from the graph so we just need to fetch the tooltip value the year interest and the total payment very interesting and very complex so let's see how to solve it so um let me just try to inspect it and let's see uh this is the first time i'm writing the code guys i haven't tried it earlier i just write this driver equal to new firefox driver or we can use a chrome driver as well okay we will reuse in chrome and then we will check the same thing in firefox as well and then i'm launching the url and then waiting for five seconds so that the page is completely loaded and let's try to inspect this guy and let's try to identify oh this is rect and this is g and this is available under svg so it's a complete svg element is available okay this is a svg web element it means normal xpath will not work here okay so let's do one thing and this coming under this particular div and then i can see high chart and some number is there so this number will be changed next time because uh i possibly let's see if i refresh this and you just try to inspect it over here and uh here you can see that the number got changed so this is the dynamic id that they are using it but we have to start the xpath somewhere from here so i'll do one thing let's start creating the xpath for this guy and i'll just press ctrl f if you don't know how to create the xpath so you should know how to create the expert you can watch a separate video on svg expert creation so for expert svg what you have to start with let's say double slash and then i'll put a star over here and then we have to write the local hyphen name which is equal to svg now there are 24 svg elements are available you can see it is right now it's pointing to this and then we have one more which is uh like that over here right so this is the second one that we have reached it means under this svg we have to go inside multiple g's and everything over here so here i can see that i have to collect let's see have to go to the specific g g is also an svg element so what should i do double slash star and then i have to write okay where name the child node name is a g so it means there are a 41 g's are available you can see 141 which is pointing to this pie chart also but we are not bothered about this this pie chart we are bothered about this um we will just keep running keep pressing and then we have reached over here somewhere okay so you can see that now we have reached over here like this it means i need this uh g and this g also having see one more g then there is one more g is available like that see this is uh this twelve thousand twenty four thousand is represented by this and this is actually i'm looking for actually okay this one i'm looking for the exact graph is available because the data the tooltip is available on that particular vertical bar only so after that what should i do that after name g and then i'm looking for where a class equal to this right so i'll put one end condition that end i'll add one more attribute which is equal to this let's see okay so now it is point giving me 2 that's good so we have filled it out from 41 to 24 24 to now finally i think 41 to 2 now so now it is coming over here like this now under this particular g we have to collect all these rect can you see that the html tag is wrecked so these are the svg html tag these are not the normal one guys so this vertical bar is actually created by rect over here you can see and it's having x coordinate y coordinates something like this width and height and fill is equal to rgb this color or whatever maybe green color or something like this it's written there or maybe orange color this is a color code for orange so this is a rect over here so we have to jump from g to rect and rect is again rec means i think rectangle and rect is again representing a svg element so what we have to do in this case again you write a star over here and then let's write name which is equal to rect okay nice now we are getting 42 okay so it means this is the first element that we have captured see it is pointing to this guy okay so we have to point to this guy and see this second one third four five six seven eight nine uh 10 11 12 13 14 15 16 17 18 19 20 and then 21 and then again it will start from the green from the beginning can you see that it's coming over here to this particular green okay so see now 22 23 like that awesome so we got the complete list of orange plus green together so there are 42 uh there are 21 vertical parts and each and every bar is divided into two parts it means 20 1 multiply by 2 is equal to 42 web elements or svg elements we have to capture so i'll do one thing i'll just capture this x path first of all i got this expert so this expert is totally different guys the normal expert will not work in that case svgx path is totally different you can refer my previous one more video i'll share the link in the description you just go there how to create what do you mean by svg everything i have crystal clear i've already explained over there so just go there and watch it so let's see i'll do one thing i'm going to create one xpath here this is my for example let's see a vertical expert a vertical bar xpath whatever the name that you want to give so i'll just paste it over here okay and then what exactly i'm gonna do that i'll do one thing that uh i'll be using driver dot finally meant uh this time and then i'll be using by dot this is my x path and this is the vertical x path i'll be passing it over here and then i'm just do one thing let me store in a list over here inside the list of element and let's try this this is my vertical or let's see this is my bars list that i have captured in a variable and let's see first i'm going to print the size of the total number of vertical bars so i'll just check that okay is it really working or not i'll say that okay system dot or println i'll write total uh bars on the graph which is a bars list dot size so it should give you 42 it means here it's giving you 42 but in our script also as selenium is able to read this x path or creating the list or not so let's see so run as java application i hope it should work otherwise we will see some other approach for me also this is the first time i'm doing this thing and uh okay let's come over here it's waiting for five seconds and uh great it's giving you 42 here it means this is the right xpath so so far approach is good after that what i have to do is that we have to see this carefully that we have to create a list and after that you have to the list is already available and we have to go to this particular element one by one i guess right because then only this tool tip is available you can see right so we have to move to this particular element so how will you move we have to use a concept of actions class so what exactly i'm going to do that i'm going to start a for loop here and then this is my web element e in this particular bars list i'll be using it and uh i'll do one thing i'll be creating the object of actions class out of the for loop and let's see act is equal to new actions pass the driver in the actions class constructor and then here at dot i have to use move to element method and which element the element is e here and then i'll be writing dot perform and let's see this is actually working or not so what exactly is gonna do that okay move to this particular element then second element and third element up to 1 to 42 it means 0 to 41 times it will be moving it means 42 times it should move to that specific element and then i'll do one thing let's do one thing thread dot sleep for 500 milliseconds it means for every 0.5 seconds you just move to the second element like that okay so each and every element in every 500 milliseconds just move it over there so let's see it is still here it's working or not okay so manually i'm just you can use a scroll into view also up to go to this particular section but see awesome see this is absolutely working fine it is going to e it is moving to each and every orange bar then it will go to the green bar perfect and awesome this is nice this is what i want so see it is going to each and every uh the tooltip you can see that okay and then once the 42 is done it's the program is done perfect there are no exceptions absolutely working fine so far now the real thing is that i guess because the how will you capture the tooltip text so we have reached over here so when you mouse over this tool tip is will be visible can you see this year 2021 interest or total payment so the question here she is asking that you have to fetch the value from the graph uh okay we have to fetch this particular value year interest and the total payment that three values you have to capture it now the problem is that how will you inspect this guy see this is a tool tip the moment you try to inspect it's gone so i cannot inspect so i'm not able to create any locator for this so in this case let's do one thing what you have to do you have to go to sources and then you have to pause in the debug mode so just simple press f8 over here function f8 from your keyboard so what will happen it's saying that okay paused in the debugger mode and then you just go to element and then what you do is you start the pause once again and then you just do once again a mouse over the tooltip will be visible and then again press f8 it means pause the script pause the entire dom so you can see the paused in debugger the chrome dev tools completely will be paused over here now i can inspect this tooltip okay so see this somewhere it's coming over here but see i'm not still i'm not able to inspect it properly so i'll do one thing see it's coming over here so let's keep scrolling down somewhere see this is in this particular g we have already reached and all these rect will be over okay which is fine this is again g another g is available and let me go to the last g yes see finally i found this particular tooltip here i'll just open this g this is again svg so this tooltip is also made of svg guys this is like another level of svg element and i don't want any path all those things so let's keep scrolling down this is what i want now so there is another text is available this is again svg and the text is having three t span over here and the actual text is available can you see that year 2021 this is your interest amount and this is your total payment amount so i have to reach over here so how will you reach so in this case i'll do one thing i'll just try to modify the expert slightly that okay so let me just remove all these things from here so name equal to g that we have reached okay but we are looking for which we are looking for uh somewhere over here once again i'll show you once again let me go to this graphical okay this g so we have reached here and then keep scrolling down we have to go to um g and uh we will directly do one thing we can directly capture this g see this g can you see that high charts label high charge tooltip is available right guys see this this is the complete three classes together we can take it and then i'll put a one and over here i'll simply write at the rate class which is equal to this this is awesome we have reached here and then after this g we have to capture the text so this text is also an svg so you cannot write single slash or double slash text over here is giving you zero because this is the wrong x but what do you have to do you have to create this star once again and then you have to tell that name of your svg element is equal to text here this is perfect so this is where we have reached so i'll do one thing i'll just capture the next part now and then we will try to capture the get text so we will use in selenium.gettext method which ideally should give me year interest and the total payment right so let's copy this this is a game of svg expert guide then only you can solve these kind of problems otherwise uh it is like really really difficult to solve and then you should have some really good practice on xpath creation okay so this is vertical actually so let me write vertical and then i'm writing this is my uh what this is my uh text expert something like this whatever the name that you want to give and i'll just paste it over here so this is my text expert that i have written now what i want that uh you wait for 500 milliseconds by the time that uh the tooltip will be visible and from this tooltip you capture this text so can i do one thing that i simply write that driver dot uh find element by dot xpath which expert the text expert and then from there you capture what you capture dot get text it means capture the text so it will should give you so because still here we have created the expert it should give you the text of these three child elements from t span so let's see it is working or not and i'll do one thing i'll store in a string and let's see storing in a text over here and then printed on the console system.our.intellin printed on the text okay so let's see this is working or not so right click on it go to run as java application so in every 500 millisecond it will move to the respective vertical bar and then should keep capturing the text on the page so let's see oh nice awesome can you see on the console guys we are getting the exact text this is perfect this is how we have to capture the uh you know values or the text from the graphs and uh on the graph also we have these tool tips and see this is absolutely working fine for all the 42 you can see on the console for all the 42 vertical bars and once this is done the program is over and then you can use this to validate your data whatever for the respective ear wise according to your expected data this is your actual data you can match it with your database or apis also you can do that so this is the approach that i have used okay but let's see this is actually working on firefox or not so i'll be doing one thing i'll just make it to firefox driver and let's run it again and let's see awesome yeah see this is time which is absolutely working fine on firefox as well it will go to each and every orange bar in every 500 milliseconds and perfectly working fine this is super cool right guys see this is how we have to automate the graphs so let it run completely and uh there are no exceptions it's absolutely working fine and then done you can see the data is coming like that okay now i'll do one thing let me just comment this thread dots leave from here and then i'll i don't want to wait for 500 milliseconds between two vertical bars so let's run it again okay so it will be a little fast now because now we are not waiting for 500 milliseconds okay so yeah awesome see this is so nice great perfect so this is how guys we have to solve this problem now let me check with the uh back to this chrome driver only okay i'll be writing chrome driver and commenting out i'll be running in the headless mode so i'll do one thing i'm just going to create the object of chrome options which is co is equal to let's see new chrome options and import this and pass one argument that is co dot add argument and then i'm passing hyphen hyphen headless over here okay and then pass the same co here and let's see it is actually running it is picking on headless in headless mode or not so chrome will not be launched this time but it's running in the headless mode and let's see it is working or not so i really want to check that okay the move to element is working or not see it is absolutely working fine guys in the headless mode also so this is how we have to solve these problems so the query is solved there is no problem to handle such like graph for svg graphs so whenever you see certain graphs especially on some you know bank bazaar.com or emi calculator or some any banking application where you have to display the data in the form of graphs so generally we say okay graphs are not recommended to automate but i think we can automate and it's like easily if i can do that so it's a game of what svg expert if you're really good in these things and you really really know how to play with the xpath inside the dom with svg you can easily automate such things so that query is solved i'll share this thing with her also and i'll upload this video and just have a look i'll share this code also in my repository and just have a look and just try i'm giving you an assignment you have to capture the text from here actually the total interest tooltip and uh principal loan amount 41.7 percent that you have to do it okay later on we can do some interesting scenarios like that you can just move it to from here to here like this also you can do that these are the complex scenarios right not very straightforward but that isn't some other video we can try that so that's all for this video guys if you like this video please like comment and share share with others so that people also get to know how to automate certain things complex use cases like that with selenium till then take care and god bless you always

Channel: Naveen AutomationLabs

Views: 12,008

Keywords: automate graph using selenium, Complex SVG Graph UI Elements, Automate Complex Graphs with Selenium, how to automate svg tags in selenium, how to automate svg elements, how to automate svg graph, Graph UI automation, svg elements automation, grapth automation by naveen, naveen automationlabs

Id: J-Zc02wp-6E

Length: 21min 28sec (1288 seconds)

Published: Wed Aug 04 2021