How to Automate Chrome Extension | Selenium | LetCode

Hi everyone! In this video we are going to see how to automate Chrome extension I'm going to do that using selenium and as well as Protractor. so let's see how to do that using selenium I am going to automate this Chrome extension which is Google dictionary by Google that's an awkward name but that's okay we are going to automate this thing right so I am going to add to Chrome and it'll ask the permission it says that it can't read and change all your data that's okay and then it will say like it has been added okay the usage of this extension is you can click here and here you can search for anything so let's find the meaning of define itself so define and here I'm going to click on the define now this is going to give us some result based on some google dictionary okay now we can change this to Hindi as well so if I go to this option page here I can change the language to Hindi and once I click on this then if I go and search for define again so define and if I click on define again so now we are getting the meaning in Hindi right so this is what the scenario to do so we are going to automate this now let us understand the basic concept of extensions first so here if I go to this chrome colon slash slash extensions here we have so many extensions so I am using so many extension here and here we have this extension part and if you go down here you can see that Chrome apps right so these are apps okay and these are extension now the major difference we will see in our Chrome extension development series as of now to automate understand that there are majorly two types one is extension type and another one is Apps type so in extension we have to understand few keywords as well so let me go to some blank page maybe letcode.in okay so once I click on this we are getting some HTML page right this HTML page is coming from this extension now this is known as pop-up page technically in terms of extension development and once I do the right click and if I click on options this is known as options page okay now if you see here here we are getting this ID right so this URL is saying that option dot HTML most of the time this is how they have specified but in your case it might be differs based on the developers but mostly like either pop-up page or the options page so we have to load this extension in our browser first right because if I give this URL directly I will not get anything because obviously when we launched our Chrome browser using automation or using selenium it is not going to add any extension by default right so we have to add the extension so for that what we can do is we can go to this windows R and app data and within the app data we have to navigate to local then go to Google so Google and then go to Chrome and within user data here you will find a folder called extension but I am using two three profiles I'm going to go inside the default and here I can see for extension now these are the extension I have in my browser and this 25 which is today date right so this is the chrome ext.. I mean Google dictionary I think okay so we are going to use this so here I can see background not this one I think let me open this option dot page yeah so we are going to use this one right so we have to load this within our script so how do you do that okay so Chrome extension are this files are actually converted into a zip code file which is actually not a Zip it is known as CRX file okay so we are going to do that now so what's the pop up page let's find that so maybe browser action! yeah so here instead of proper place they have named it as browser action right okay that's fine we will anyway take this so here I am going to copy the entire file path and here within my Chrome extension so chrome colon slash slash extensions Here I am going to pack the extension now by default you might not see this option you have to toggle this okay so turn on on developer mode and then click on pack extension and here you have to specify your for file path basically the path we copied right and then this is option so leave as it is and here you can pack extension now this will say that it has been created within the same folder so if I go back to that folder so here I can find a CRX file basically so if I go back and here yes so we are getting this CRX file right so let me copy this and if I go to my VSCode here I can paste that so it will be very easy to access sometimes when you try to load from this C:// folder you might get permission denied error so just copy the CRX file and paste in your working directory now within this I am going to create a main method and here I am going to call my chrome driver so chrome driver driver equal to basic stuff right now here I am going to say driver.get() here we will load that URL but before that let us try to add the extension to our browser right so here I am going to use the chrome options so here we have a method called add extension right so we are going to use this so add extension is asking for file path right so if I mouse over on this you can see that it's needs a file right so here we are going to get the file so new file and import it from Java dot IO and here we have to specify the file path which is four point one point five let's rename this as app so it would be easier to access so here I am going to say app dot CRX so by default it is going to take from our project folder right that's fine now we have to pass this option to our chromedriver constructor now let's try to launch this maybe we will see that the extension has loaded successfully or not so I'm going to run this and this is going to bring my browser and yes we got it right so here you can see this google extension we got this right google dictionary fine so we are able to achieve this successfully now there are two things you might get as an exception one is permission error because you are trying to access it directly from C folder so just copy the extension file and put it in your workspace second thing you might get an exception saying that CRX three or CRX two is not compatible something like that so what do you have to do is you have to pack it again so ask your developer they will do for you or else as I did here pack extension you can do that that will convert your file into CRX three format now let's understand how we can open this pop-up page right so here we can see that it has some ID now each and every chrome extension has a unique ID so based on this ID we can automate things so I'm going to copy this and I am going to new open new tab and here I'm going to say Chrome - extension and then colon double slash and paste the ID and then we know that this browser_underscore.html is our actual file right so I'm going to just copy and paste it here now if I hit enter I'm able to see this right so let's try to do something let's say that hey and define so here we are obviously getting our answer I mean our meaning side so this this we have to pass within our driver.get() so what I'm going to do is here within the drive dot get here I'm going to pass this stuff oh that's ok now let's first run this and then we'll move on so let's run this first yeah so we got this browser right so we are able to get this on here we can type something and we can click on the defend everything so these are basic hope you is to write your selenium script or protractor script or web driver IO script so this is going to be very similar so let me quickly inspect and check what we have here I believe there should be id because that is how everything was design yeah so we have ID so I can take this so here I am going to say drive dot find element by ID on this one so find element by ID and here I'm have to pass the value and then I'm going to type something so dot sendkeys and within this I have to pass my research data so let's do with the define itself and then what I have to do I have to click on the define button right so let me inspect this so here we have ID which is define button so it's driver dot find element by ID very quickly and here I'm going to dot click right so obviously I have to write some web driver wait logic to wait for the text to appear but I'm just going to use the thread.sleepas of now I know this is not a good practice but I'm not here to teach you the exception I mean explicit wait and all so I am just going to use the thread of sleep as of now so here maybe five seconds yes now after that here we are getting this thing so let's print this whatever we are getting in the head there so here we have this class called headword right so let me copy this and here driver dot maybe I can use the class name so find element by class name and Here I am going to pass this and here believes they get text and we will print this okay so let me store that into a local variable and here I'm going to just text is fine and here I am going to log this so sys out and text okay now we are getting some method here because of course we have to handle the what we call that exception right so thread dot sleep and why I'm not getting any suggestion oh sorry for that I have to pass within() the integers not this thing okay my bad so now I am getting compile time error so I have to add the throws declaration or try catch anything is fine that's okay right now let's first try to run this and we will print something so that we can make sure it's working till now okay so of course it's different is going to search for the different word and it's getting some meanings and I hope that we are getting as define dot something like that which we got here right so define yeah so he got this word so here you can see we are getting the exact output as we wanted right now what we are going to do is we are going to change this to option page right so we will go to this option page and from there we can change the language right so let me copy this URL and let me click here so here I am going to do again so driver dot get and Here I am going to pass this URL and after that I'm going to select this one right so let me inspect this and it has a language selector as in select so I can use that so driver dot find element by ID and by ID and here within this I have to pass this now let us store this in a new local variable and this is going to be your language selector and selector that's fine and here I'm going to pass that you need in the select constructor so new select not this select so new select and here I am going to pass my web element which is this selLan and here I'm going to say dot select by visible text maybe so select by a visible text and here I am going to pass this as Hindi right so let me quickly copy this so what this guy yeah so copy and paste it here that's fine now also we have to click on the Save button right so quickly find that so within this we have this Save button which has ID so I'm going to take that and here document sorry not document so driver dot find element by maybe by dot ID this time so by dot and here we can pass the value then I can click on this site so click on this right now it's going to save this so that's going to work fine I think so after that what we can do this again we can load this website now so we can same we can repeat the same stuff here so what I'm going to do is I'm going to just convert this to a method so maybe get data ok and here we can see for a private static get data ok so here we are going to bring this value right so it's going to print for two times yeah so let's call this method again so get data here also after once we save the data I mean save the language selection once we change the language selection then again I'm going to call the same method here ok so let me close my all my terminals and let me run this then I will explain you again ok so let it be run so the first time it's going to search for the define and it is going to give us in English meaning then it is going to search for oh it was very quick guys so you can see the differences right so we got this know Hindi Hindi meaning so it was very quick I think so here in the console you can see right so we are getting this thing again so let me explain you the code again so it is very easy it is like basically like how be automate our regular pages the same thing it's going to be happen here also only difference is how you are going to load the Chrome extension ok so first thing remember that you have to pack your extension and make that as an CRX file now now there are plenty of websites available which can do that but I will not recommend you to do that because that might bring some code error or maybe it can break your package so instead of that you can use the inbuilt function or in built option in the Chrome browser itself so you can do that and then here we are writing converted this code into a method so that I no need to write the code again in again so here the only thing you have to is how we are going to load the Chrome extension right so first time we have loaded this browser dot I mean browser underscore action dot HTML which is our pop-up page and let me write a comment here so here it is going to be our pop-up page and here this is going to be our option page so option page is basically the settings of that particular extension okay so I hope this is very clear to you there are some limitation as well so you cannot do all the stuff for example if you check extensions like grammerly they are very complicated to automate because they are using the shadow Dom concept and we know that selenium is very not much shaft for the shadow Dom so that kind of automatic extension are going to be really challenged for that maybe if time permits we will do that and this type of simple applications are going to be very easy if you have this pop-up page and the option page and some of the applications have right click context click to do that I don't think that possible I will try to figure it out if I find any solution I will update update in our channel and that's pretty much enough we are going to do that same stuff using protractor in the next video so if you liked the video hit the thumbs up and if you are new here please to subscribe that's it from my side I hope you have learned something new and you have enjoyed the video see you in the next one

Channel: LetCode with Koushik

Views: 52,342

Keywords: add extension in chrome using selenium, add extension, add extension with selenium, add chrome extension, add chrome extension in selenium, chrome extension, crx3 error while loading chrome extension, crx error, chrome extension test with selenium, letcode, letcode koushik, selenium ide, selenium, selenium webdriver tutorial, selenium webdriver, How to Automate Chrome Extension, webdriver, learn javascript, selenium tutorial, java, how to automate chrome extension, extenison test

Id: 5-2vtcy9LzQ

Length: 18min 27sec (1107 seconds)

Published: Sun Apr 26 2020