Chropath Automation Testing with Sanjay Kumar

Five, four, three, two, one.

Drop that.

Welcome to the Test Guild Automation Podcast. We're all getting together to learn more about software testing and automation with your host, Joe Calantonio.

Hey, it's Joe. And welcome to another episode of the Test Guild Automation Podcast. Today we'll be talking with Sanjay Kumar all about the Crowpath plugin that offers a smart way to get locators and verify them. Sanjay is the inventor and creator of Crowpath and he's also a speaker with a passion for automation. He's an open source enthusiast and loves to develop tools to make testers and developers lives easier and this is one of the tools he created. I think you're really going to enjoy this episode. If you want to learn how to create more robust selenium locators and save yourself a bunch of time, you don't want to miss this episode. Check it out.

The Test Guild Automation Podcast is sponsored by the fantastic folks at Sauce Labs. Their cloud based test platform helps ensure your favorite mobile apps and websites work flawlessly on every browser, operating system and device. Get a free trial, visit testguild.com sourcelabs and click on the exclusive sponsor section to try it for free for 14 days. Check it out.

Hey Sanjay, welcome to the Guild.

Thank you Joe. Thank you so much.

Great to have you on. Before we get into it though, could you just tell us a bit more about yourself?

Sure Joe. Hello, this is Sanjay Kumar. I work for company Autonomic. It's a US based startup. Currently I'm based out of Bangalore, India. I have total around 8 plus years of experience in industry. I did my B tech in chemical engineer. So I'm basically from Academy I'm a chemical engineer and from my profession I'm a software engineer. So yeah, that's a pretty much a brief intro about me.

So how'd you get into automation then?

I was a campus hire from my college HBTI Kanpur. Then so from there I joined IBM. So there I worked for around three years as an automation test engineer. It was my passion. Like I always keep thinking whatever process or whatever work I used to do, keep thinking about like can we automate this thing that way. And then in IBM I almost written almost around 4045 automation tools but those were like internal so they never came out. And then later I joined Gwaibo as a SD automation test engineer. Then I worked for Urban later for some time. Then I was in Inmobi from where I started working on Crowpath. From there the journey start. Last year, October I joined Autonomic So.

I know you've been working on Crowpath for a while. For the folks that don't know at a high level what is Crowpath?

Yeah, so Crowpath is an automation tool. So basically the beginning when I started working on and the first version of Cropath came out, it was just an XPath tool or you can say selectors tool where you can generate the XPath relative unique relative XPath and you can verify your XPath and CSS selectors. But later on like it with the, with its upcoming version and the latest current version it has evolved like anything and it's a complete automation tool now. You can say you can generate your automation script steps, you can generate multiple XPath in few seconds for like hundreds of elements. Then you it supports iframe dynamic attributes and now it's like it has many advanced feature now. So not just an XPath or selectors tools, it's basically you can say now it's an automation tool and with the upcoming version 6.0 it has like so many things, it has automated like so many things. Like you'll be able to generate the manual test cases, you won't be writing the manual test test cases going forward. You generate like complete automation steps for iframe. You will not have to write the XPath like in single click you will get the relative XPath for iframe for elements and then this is going to be very first tool where you will get the relative XPath for SVG elements as well. Even though like you must be knowing that even Chrome dev tools doesn't provide the selectors and XPath for SVG elements. So yeah, there are like many unique features which cropath is consisting and it will be having great Sandra.

So before we get into these newer features, I just want to start off at what it started with and it almost sounds like I know you've been doing automation for eight years, but I'm a little bit older. So back in the day I used a tool like windrunner Quick Test Professional and they had something called a GUI spy where you'd point it to an element and then would tell you all the different attributes you can use to identify that particular field. It sounds like Crowpath does something similar. Similar. Could you just talk a little bit like what Most people started off using Crow Path for what it was for finding elements, I assume.

Yes. So from the GUI of the Crow Path like as soon as you will be looking for inspecting any element it will giving you all the possible selectors. Like if it could be like attribute class name or like Parcel in text. If that will be unique, it will be letting you know the occurrence of that particular element of that particular selectors for that element and then all types of possible selectors it will be giving you for the particular element, either you click on the DOM node or you inspect that element in dev tools. And it supports multiple browsers and it has no dependency on any other plugin. Like Firepath was dependent on Firebug. So like it supports Chrome Firefox Edge browser and Opera browser as well. And this is only XPath tool which supports these browsers. There's no other plugin Crowpath.

I thought it was just a Chrome plugin. So you're saying you can open this up and use it against IE or Firefox or there's individual plugins for each of those browsers as well?

Yes. Not for ie. This supports the latest Chromium based Microsoft Edge browser, not the IE browser. Currently it's not supporting IE browser, not supporting Safari browser, it's supporting Chrome Chromium based Microsoft Edge browser which is recently launched. You must be aware of and then Firefox, Firefox from the 47 version onwards where Firepath is stubborn and then Opera browser as well.

Cool. So I know some people may be skeptical and they might say oh big deal, I can look at the DOM and get the element myself. But you did a demo at Selenium conference I think in 2018, 2019 we issued the time it saves you. Can you just give an example of how much time this plugin can actually save you if you use it.

Generally people say like on an average for them if they are writing suppose 50 elements every day, 50 XPath every day for them. Like they say like in a month they are easily able to save at least 40 to 50% of time what they were spending earlier while writing and generating the selectors or while verifying the selectors in automation script. And if we say like rice. So it depends like how much test cases you are writing. So if we take the average on an average 30 to 40 hours one SDAT is saving by using this tool. And the example which I showed in the Selenium conference is like. So there are like some elements which are like very easy to write the selectors. You can directly get any attribute unique attribute for them. You can write just like double forward slash tag name and then attribute any unique attribute you immediately found. But for some element it it could be like time taken. Like there is no unique attribute. Then you have to write based on the parent and child philosophy. That logic. So what cropa does cropa in those kind of scenarios where you are wasting at 2, 3 minutes of time just writing single selector their cropath helps a lot. Because what cropath generate how cropa generate the robust unique selector it took the like whichever element you have inspected, it will first it will write the XPath for that particular element. If it doesn't found the unique it will try like all the possibilities, all the attributes and then if text is there that also it will try. If that is done from the unicorn, then it will go for the parent one, it will try keep trying for the parent, parent, parent and then if anywhere it found the unique one, then it will join this child to that parent which is the unique one and it will try to make the smallest X path which a normal people or a normal we like me or you or any normalized that will take some time to find those kind of selectors. We can do it like manually of course, but just that like cropath will make it easy for you and quite time saving the other things like you know, like when we are inspecting element or writing our own XPath or using dev tools. If we are copying XPath it never tell you that this element is inside iframe. So what happened in many cases like we are we keep trying that script is failing but we are not able to find by this element not found error we are getting. And after debugging and after some time we will realize that this element is inside iframe. Then we switch inside iframe and then we perform the actions. But crop as soon as you will inspect the element it will tell you immediately that this element is inside iframe. So please take care. Please switch inside the iframe and then perform your action. So so there are like lot of scenario where cropass saves a lot of time for you. And as an editor also.

It has many features like it highlights all the elements, it extract all the matching notes in one place and give it to you. You need not to scroll up and down in the dev tools, it highlights scroll the UI as well. So that way it helps a lot while debugging as well. And as well as you can get the complete command like because you must be knowing about this that many people use the page object model BDD where we have we used to write all the selectors in single page. So if you have that command you just paste the command. There's an option to append the command XPath because nobody used to write just direct XPath in their script, right? So like if I take a very simple example we used to write. If we have to just write a basic test test case driver dot find element then by dot x path and then, then we paste that xath, right? So here what you can do. Like in Crow path there is an option add command. You click on that, you just paste that command there and now you inspect your elements. It will generate that complete command driver find element by XPath and then it will append that XPath over there in that command. And there's a copy button. You just click on that copy button. You need not to control A, then control C. And just by clicking on that copy icon you got that complete thing driver dot find element PI XPath with XPath and then you just whatever action now you want to perform, you just add that in your editor. So just like in single go you got the complete Command along with XPath and this you can generate like this command. You can. It could be any command for your framework. Like many people used to have that find by and then I mean custom commands because people used to write wrappers for page object model and for their framework. So it could be anything or it could be in any language. Not just Selenium, it could be Cypress. You you might be aware like there are very good tutorials on Udemy and Edureka. They used to first tell the cropa that like you use Crow path for these things. So for Cypress also you can use. It could be in Python, Ruby, JavaScript, C, sub. Any language it will support any automation API supports. Because everybody, those who are writing UI automation, they need the XPath so they can use it easily. And the command they can just pass and like multi selectors option is there. You just click on that record icon. There's a right side few icons are there. If you click on that, it will Recorder mode will be on now. And you just inspect all the elements for which you want to generate the Command or the XPath. Then you just inspect inspect. All of them will be generated in single shot. You just copy and paste in your editor and there you go. Like in just what work. Like let's say you were writing your complete page selectors. Maybe half a day or one hour it was taking earlier for you. Now it will be completed in one minute for you. You just have to click, click, click and you're ready, your page is ready. So that's how crowpath is saving a lot of time for users.

Does it only work with XPath or does it give you other elements that maybe would be better?

Yes, so joy, currently it used to give the css Selectors relative XPath partial link text and link text. So it gives those selectors currently locators currently which are unique. This I'm talking about the current version which is there in production which is 5.0. We are calling the upcoming next version 6.0 which will be maybe like in another 12 week it will be launched. I'm just finishing up everything wrapping up in that version 6.0 version I will share the the link of a small tutorial I have made for 6.0. So in that version you will get all the possible selector for inspected element for each element. So let's say for one element there are like name is there, class name is there, ID is there and value and let's say all eight possible selectors are available for that particular element. Then crowpath will give all possible selectors for that particular element and it will tell you the occurrences of each selector. Like let's say of XPath. Of course it will be unique so it will always be one. But tag name it could be like 100, 100 text could be there for same tag name ID. If ID is unique then it will say ID is one class name. If class name one is it will suggest you so it will give you the occurrences in front of each locator but it will give you all possible selectors so that problem will solve. Because currently what happened like like you ask and very well suggested that what if like other attributes are there why people will use x? Because ID is better, class name is better, name is better. So cropath will suggest but currently cropa doesn't give them all the selectors. But going forward in 6.0 cropath will give all the selectors and it will suggest you why you can't use the name why you can't use the class name. Because if they are like more than one matching node then you cropath will highlight them like in different color matching node in different color. If it is 1 then it will be in green, if it is 23 then it will be in orange, if it is like zero then it will be red. So those kind of things cropad will suggest. So more advanced feature will be there for users and if ID or class will be dynamic value like alpha numeric value because for many applications nowadays ID is dynamic. If application is in react or something or class is dynamic then cropath will suggest you that these values are dynamic. Please generate without ID and without class. So one good feature is there in cropath that you can generate the XPath with your desired attribute attribute so you can pass the attribute name. Like means any attribute which you want to generate with. Like let's say you want to generate XPath with placeholder or maybe you want to generate with QA ID or data id. You can just pass that attribute name in the attribute box. Is there one you just pass and after that you just inspect Normally what there's a normal way you generate the selectors for element it will generate the XPath with the attribute you passed and there is shortcut for ID class title placeholder so you just uncheck those boxes and it will generate Nice.

So I forgot to mention to highlight that like you said, it's not just for Selenium. For some reason I thought it's just for Selenium, but it's not. It's obviously can use across any technology.

Yeah, yeah. So it's basically we always say autonomic Crowpath is for UI automation testing and for like web development and any programming language or any API you are using for UI automation like Catalog Studio users are using Crowpath Cypress using web developers use while writing their code if sometimes they need the CSS selector or sometimes they want to verify their selectors so they also use it.

Very cool. So also you mentioned debugging and I thought once again this may be old. You probably improved on it since then. But in one of your Selenium conf things you talked about how as a feature that can help you with exceptions happen. Could you just talk a little bit about any other debugging features that it has while debugging?

What happens? Let's say because in UI automation most of the time R script used to fail just because of element not found or element is hidden or timeout exception that element doesn't found stale element. So those kind of error. So the very first thing we used to do we come early morning in office we used to check our automation report and then what we found. Like these are the element not found errors always most of the time like 90% of the time UI or test case used to fail just because element not found. So first thing we will copy the XPath and we'll paste in. If let's say we don't have crow path we will paste in that dev tools small window command F and then we paste there. If element found let's say one element found or three let's say three element found. As soon as you will hit and you blink your eyes you will just found that three element found but you will not See which are those three elements. Now you will have to scroll in the domain that which are three elements. Even in the UI you won't be able to find that which are those three elements. Matching Every time you will have to press Enter. Then it will highlight for like just for a second and as soon as your eyes will blink it will go away. Then again you will have to press Enter and then again it will go to the next one, but it will not highlight that particular one. So what happened there? People struggle. Like this is just a one scenario. Suppose if you got 10 matching node, if you got 100 matching node and now you have to look for which element you want, then that used to like on a regular basis. If you have to debug 10 test cases, then it will take a lot of time. For one test case, okay, it will take like let's say half a minute or one minute of time, that's fine. But if we consider like let's say 10 test cases, 100 test cases we have to debug, then it will take a lot take an hours of time. That's where crowpath helps a lot Here. If you paste the same XPath which you verified in DevTools, now you paste the same XPath in CrowPath. As soon as you hit Enter first it will extract all the matching node and it will give you in crowpath tab you will see all the matching nodes as well as it will highlight all those matching nodes in the UI in web page. And if the first matching node, if it is hidden somewhere, it will scroll that element to the viewable area in front of your eyes. So it will be easy for you. You will not have to scrol up and down where is that element as well as in the extracted node in proper tab it will add the attribute like xpath1, xpath2, xpath3 so that it you will be aware that this is the first matching node, this is the second matching node, this is the third matching node. And at any point of time you want to see that which is this third matching node, which is the third matching node in the web page. You just hover on that third matching node, it will scroll autonomic crow path will scroll that element in the view area and highlight in different color so that it makes a lot easy and saves a lot of time for users to while debugging as well and as well as like let's say what happens many times when you paste that X path and sometimes if a beginner has written that test case or some by mistake, somebody typed comma or some comma is missing or some bracket is missing missing. In XPath if you paste that value in Dev tools it will say zero matching node but it will not say that it is invalid XPath pattern. But if you will paste that XPath in Crowpath tab it will immediately tell you that this is incorrect format of XPath. So please correct it. So that way. Also it helps you that okay, somebody has written the wrong format itself or some comma or bracket or something missing. So those small small things it helps a lot. So that's where it saves a lot of time for developers and automation test engineer while debugging.

Also I don't think I made it clear. Is this open an open source solution?

This is not currently open source. It's a free tool, free to use for everyone, available for everyone, free to use, free to install.

So how hard is it to install when it gets set up and running?

It's just a single click. Not it will not take even a 30 seconds. So you just search for Crowpath and Automic IO Crowpath. So that's a homepage. There you have all the links for all of the Crow path like for Chrome, Firefox and all the links are available, all videos are available there tutorials and you just like for whichever browser you want you just click on that two clicks you will have to do add to Chrome, add to Firefox or whichever browser just add to Chrome. That's all only single click and it it got installed. Once it is installed you just restart your browser and there you go. And sometimes I want to highlight this sometimes what happened like when user install and they see that Crow path is not visible in dev tool. So please make sure it will be the last tab on the sidebar like elements tab, keep the elements tab open on the side. You will see that styles and those small small tabs will be there on the right side of elements like style computed event listener. So there it will be the last step after accessibility. If it is not visible, please expand the sidebar. Then it will be visible. Or else just follow any video tutorial of Crowpath. You'll be able to see that.

So you did mention earlier that Crowpath 6.0 is going to be like it almost sound like a different tool or an all in one solution. How different is it going to be from what people know from Crowpath 5.

Yes. So in Crowpath 5 like in 6.0 the complete new UI will be there a lot improvement in the relative XPath generation. There are like lot of new Features which are there coming and unique like SVG XPath for SVG element iframe XPath along with the element XPath then there will be a smart maintenance feature. Crowpath Studio is gonna be introduced in 6.0 where you will see like manual testers or automation test engineer or developer will not have to write any kind of manual test cases. You will just perform your action. It will write your English test cases automatically along with the XPath and the Command. So it will solve all the problems, all the manual effort which we are wasting today. And let me tell you one scenario here like how 6.0 is gonna solve like so many problems in 6.0 with the Cropath studio today. So what happened today like in every company and everywhere, this is the situation that when a developer used to give a build to a tester he will explain that that these are the feature you have to test and in between for sure like what he will tell. Meanwhile when he will reach to his desk he will miss some or other steps and what he has developer has explained what tester will test there some gap will be there and few things will be missing and some or other thing will break in production. So to reduce that gap and to reduce the manual effort of writing manual test cases, we have introduced the Cropath Studio while doing the because whenever you do develop any feature you always do the basic testing, basic flow testing every developer do. So you just turn on the Cropath Studio, you just single click and it will open. After that you just perform your basic testing. It will write all the English test steps for that. And then once you are done developer can give that test case to the tester that this is the steps, these are the. This is the flow which you have to test. I have already done it. So this is the proof that this is working. Now you test it, take these test cases and you do your testing. Similar thing manual tester or automation testing can do or like anybody a PM or whoever is doing the testing, they can also just turn on the Crowpath Studio and they can just perform their action. If they found any bug immediately they have all the steps they need not to rewrite the steps that what is the what what are the steps to reproduce this bug? They have immediate those steps already so they need not to write those steps as well. So yeah, these are the like couple of things which is going to reduce a lot of manual effort and gap between development and testing and going to save quite much effort and going to make a lot easier for development and testing. And definitely it will Improve a lot quality and the product development.

Excellent. So where does Autonomic come into play? Do you have to buy anything to get these features? Is this just something that they're offering up for free? And then there's some other features you could pay for that maybe has extra features that it would unlock.

Autonomic is the parent company of Crowpath and Autonomic has an enterprise version which is the complete solution for testing. So you can say the this is the first step we do like developers or automation test engineer do. We used to use Crowpath. So in Crowpath you have to do the next thing. Next step you we will have to write the automation script in our editor or wherever. But with the Autonomic enterprise version that tool generates the complete automation script. You just upload your English test cases or you just add your manual steps in the tool that you want to do this, you want to do this and then click here, do this, that and all kinds of actions and everything. You just add your manual steps over there in the tool and it will write your complete automation escape, auto inhealing is there, auto maintenance is there and lots of features are there. So yeah, that is a complete solution.

Okay Sanjay, before we go, is there one piece of actionable advice you can give someone to help them with their automation testing efforts and let us know the best way to find contact you or get our hands on Crowpath.

Yes, definitely. Like I always suggest everyone like keep sharing your knowledge and whatever you know, whatever framework you have done or anything good you have done in your in your day to day work, just share with everyone. And this is how we did like we created Crowpath. We shared with everyone and that's how like everybody's saving a lot of effort and we are growing and everybody is getting help. So yes, so if you have done something amazing in your day to day work which is saving your time, help others as well with that and let others also save the time and we let's grow together. Anybody can directly contact me on LinkedIn or Twitter. So my handle is Sancheumar K U M A R r and in LinkedIn you can just search for cropath creator. You will find my profile and in cropa tab there are like options you can directly there are we have given the Slack link over there. You can write if any doubt or anything you can directly write it to me. Crowpathonomic IO you can drop me an email or anywhere you can ping me. So yes on Slack you can drop a mail or a Crowpath page you there is a chat option. There are multiple options. You can connect me anywhere.

Thank you Sanjay for your automation awesomeness. For links to everything of value we covered in this episode, head on over to testguild.com a294. And while you're there, make sure to click on that Try for Free today link under the Exclusive Sponsor section to learn all about Sauce Lab's awesome products and services. So that's it for this episode of the Test Guild Automation Podcast. I'm Joe and my mission is to help you succeed with creating end to end full stack Automation awesomeness. As always, test everything and keep the good. Cheers.

Thanks for listening to the Test Guild Automation Podcast. Head on over to testguild.com for full show notes, amazing blog articles, and online testing conferences. Make sure to subscribe to join the Guild and continue your testing journey. This has been a Joe Calantonio production.