Android Mobile Browser Automation with Appium

welcome guys so in this uh lecture let us see how can we automate chrome browsers from the mobile so i am sure that most of us browse internet through mobile apps only right so we really don't go to the laptop and search for something if you need anything very quick we will quickly open our browsers from our mobile and start testing it so in the 2021 analysis it's like more than 50 percent of users are coming from mobile browsers than web browsers in the google so the need of testing of mobile browsers is increasing of course the code base is same even if you load the website in through mobile chrome browser or web chrome browser the back end code to render the website will not change but you have to see if that browser is fitting the website what you have is fitting correctly in your mobile browser or not that's very important okay so if you have a footer section in your website and let's say if you are not able to access it on mobile browser properly then that's a problem so this is my website and if people really struggle to come to the bottom from a mobile browser then i would lose my audience right so we have to make sure that there is a proper testing at least a high level regression is happening from mobile browsers as well that's how most of the companies are now writing some tests for their mobile chrome browsers or any other browsers with support on mobile so in this section we are going to see how to automate our test cases through the mobile browser okay so through web browser we have lot of automation tools like selenium which can test for that so for mobile browser the only stable automation tool you know which is rpm so in the last few sections we are keep we have keep on learning appiam on how to automate mobile apps okay now in this section we will see how to automate mobile browser which is chrome using rpm okay so for that these are the step-by-step instructions you have to follow first you have to build desired capabilities especially for mobile browser just like how we have built these desired capabilities for mobile apps until last lecture so if you are not aware of this desired capabilities maybe you are not watching this course in the sequence or you have missed my pre-request youtube video which explains how to set up android rpm everything and how to build desired capabilities i would request you to watch them and come back right so we are directly focusing on start writing desired capabilities from this lecture okay so first you build those desired capabilities and you have to understand how to inspect and grab the browser locators okay so you want to send some information in the edit fields and all you just want to make sure that even the browser the locators are not changing okay there is some um misconception here which i will explain when i talk this point and we'll run the automated test directly once you have everything ready and let's understand like how to scroll in the browsers okay so there are some things which might not work um like appian have touch events like tapping everything those may not support in the browser the only mobile gesture with support for browser is scrolling like if you want to scroll to the bottom or top so let's see these things and that way you can get started so first i will start with our desired capabilities let me go back to my eclipse and we'll create a new class here browse java okay so first let me initialize the android driver so it should be generic so you have to clearly say that whatever we are seeing it's an android element okay so move your cursor and import all the related packages right so this is the first step we did not initialize this driver object yet we declared one variable but this do not have life yet so before that um i'll create object for my desired capabilities class so you can say capabilities equals to new desired capabilities right so let's import the package now the first capability what i want to set here um is the device name okay capability start set capability and you see here it gives a capability type and a value okay so set capability mobile capability type type dot so what is the device name so it's the device on which you want to run this automated test okay so here the device name what i have is rahul emulator one this is the my device name okay so that you can give the emulator name of your device or if you are running on the real device then you can give the real device name it will be mostly like android device if it is a real one so right now i am working on this emulator and name of this is rahul emulator one okay so that's why i gave those details so as it is android automation we have to give automation name so it's very simple so this time automation name so for android you have to use a name of the automation which is ui auto mesh automator 2 so this is the framework which will help you to perform automation testing on your android so appium internally uses ui automator 2 framework to run your test cases so this ui automator 2 is exposed by android guys okay it's their inbuilt testing tool so rpm is taking the help of this inbuilt android testing framework which is ui automator 2 to drive your automation execution so that's why we clearly needs to tell that we are depending upon this framework for android so based upon that rpm can understand and inject such kind of methods which can underlyingly use this framework right and now we don't have any app to give the details because in this section we are purely testing a web mobile browser okay so you have to tell which browser you want to automate dot and it's like browser name okay so what browser you need to work on chrome so just give the chrome browser so earlier in the previous lectures we worked on automating android apps there we used to give like this dot app app and the app path but in this case we are working on browser right mobile browser that's why i give chrome and that's it now you can create object of this android driver class so you already initialized that variable right driver equals to new android driver so basically you are creating object of this android driver class so this android driver class take two arguments one is the url where your appium server is listening and the next one is the capabilities object so you have capabilities object here so i can paste it here right so this object will have the knowledge of all the details what it has to automate it's a device name uh which automation which is at android one and the browser which you want to execute now here where we have to uh provide uh rpm url so rpm is ideally will listen at four seven two three port so when you start rpm server here you can see that rpm the bottom rpm is started on 4723 port in your local system okay so if you want to give the ip address of that you just can't give that directly in java so you have to initialize a class called new url and in that url class argument you have to pass the ip address of yours so your local ip address can be identified like this 127.0.1 so we have already seen these kind of desired capabilities um in previous sections when we are dealing with android apps this is like just a revision of what we have learnt wd stands for web driver hub so this is your appian server location if you are not sure which port it is starting go and start your ipm server and see the port number so that's how you can match it okay so that's it guys so we have successfully created driver object here with the help of capabilities so before we continue with our execution uh let's place this in one separate class so that we can reuse this capabilities every time when you write new automation test for your mobile browser okay so this is not good that to repeat these steps every time when you create new mobile browser test so instead what i will do i'll just create one more new class and i would call this as a base chrome something like that and here i'll create one method and in that method let's wrap all these data so that you can call that method name directly so set method return type to void for now let's return void but later let's fix this let's copy all this code carefully i'll cut it from here and in my base chrome i'll paste it here and at the end i will return this driver because this is what we need right we need this driver object to drive all your mobile browser tests um change method return type to android driver element because we are writing the driver which is the return type of this so that's why we change return type of this method as well okay so if i want to call this method in every class you have to create object of this class and then call this method with object dot method so instead if you make this method static then you can directly call this method without creating object of the class okay this is the basic of java now go back to your test so let's directly inherit our base class which is a base chrome and now you see error is gone so this method is actually returning you the driver right so driver equals to capabilities so android element is the return type perfect so now you have uh successfully uh brought and inherited the driver object from your capabilities method so what should we test now this is important so let me go back to my chrome browser and let's say i want to go to the website called rahulcityacademy.com angular app demo okay so this is how this page looks like in web browser but i want to render this web page in mobile browser and do a quick validation um okay so for that you would have clicked this products and then um you want to verify if the third element in this product is devops that is your validation okay now so in web if it is web automation in browser you know that you can select this products and you can continue so if you try to run same test in browsers it might fail because you don't know how this web page renders in mobile view right so for that what you can do right click inspect and here initially it looks like this but if you carefully observe there is one toggle here so focus on this if you toggle this then you can use this in a mobile view okay so in mobile there is no products displaying here there is one menu coming here see and you have options here so basically you can choose any device name and it will show how this page renders on that device it's a cool feature right so let's select iphone x this is how it loads in iphone so there is no products to click you have to open this menu and you have to choose this products so if you have same web automation test that will not work here right here the whole concept is different the way it loads in the mobile browser so now let's write a separate test for this and now you might get a doubt like how would i get object of it it's again straightforward guys you can use the inspect here and if you inspect on this you will see the locators for this okay but if you are in the normal mode you won't get that hamburger menu and you will not be able to get object of it if you want to get object of it first you should be able to toggle to that device view and this is how you can toggle and now you can happily go ahead and write objects for this here ui is actually not changed it is actually stringed as per mobile view if you go to ipad then again it is little bit increasing right that's how modern websites are all developed so basically all modern websites use bootstrap css so if you design for web that is enough if you open that in mobile it will make sure that it perfectly fits in the mobile and there is another type of websites now for example creekbust.com okay this is how it loads but when you open this qrikbus.com in mobile the look will be different try to open qrikbus.com from your mobile right now and see you will get a website like this m.q.bus.com see this is how it loads okay mobile dot you see when you open that url in your mobile and the whole website is different here and this website is different what you see so these guys have completely have different code base for rendering websites in the mobile so here there is no separate code base it's the same code base but it got shrinked exactly to fit in the mobile so you should carefully observe all these while automating okay i'm explaining this because you should be understandable first like how objects are varying from web to mobile and if there is any separate code base that all you have to speak with your developer when they say that go and start writing mobile tests you should talk to them and see how our web pages render in the mobile browsers okay with that information you can start working if they say that we have separate a website like this m.q.bus.com then you have to bring that url in your browser so that you can go ahead and inspect objects okay so all object inspectation you can still do from web only but while doing uh make sure you inspect the way how it looks in a mobile if you try to inspect here then there is no point because in mobile these three are not showing up so that's why when you are trying to develop a test first take that into separate mobile view select any mobile here and then you can start working our goal is to select this products and make sure that devops is displaying okay so let's write automation test for it the first thing what i need is i have to land on this web page right so i selected that url out and now let's go back to our rpm test and say driver dot get so first this will hit this url in your mobile browser so this capabilities method will help you to launch chrome browser okay because we clearly gave that go and launch chrome browser so i hit this url and now my next goal is to select that hamburger menu okay all right so looks like this is the html with which you can grab the object so let me take css we have a class called navbar hyphen toggler so we can use this css to identify that hamburger menu okay so this is the class let's validate if that css is correct or not using the locator tools like crow path and selector hub hit and enter perfect it's validating you see so this is a right css i hope you are aware of how to write xpath and css if not you can watch out my videos to figure out that find element um by dot css selector so i have to make a click on this and this will open a products right when you select this products will open and next i have to click on this products okay so we have anchor a tag and href attribute so i will use regular expression here anchor a href attribute um regular expression star equals to i'll just look for products because in this href attribute there is products right i'm asking the tag name attribute equals to value i'm using regular expression so i can use subtext of that href okay it says two element matches but by default it will select the first element it found the first element we have is the products here so no worries it will identify that so driver dot find element dot click okay so we have done three steps um hitting the url in the mobile browser selecting that hamburger menu and selecting products icon right let's run here and see if this is working fine as expected and then we can continue for further validations so make sure your apm server is started before you run and also verify if your emulator is successfully open and ready for invoking your test and then go ahead and run this test so you can monitor the logs actually here to see what exactly it is trying to do you see it's opening the chrome browser it is hitting our url and then it clicked on hamburger menu and also it clicked on the products so we successfully landed on this page and now you are able to see product list in your mobile okay so we have automated until this page but you see all these pages automation we directly done from our web browser only by toggling our uh browser setting so that is the beauty so earlier when you don't have this future three four years ago people used to come and see how that is loading in emulator but thanks to chrome with this feature you can now directly see everything like how it looks on mobile okay so if you run into any issue while running this mobile browser test let me show you there are some instances that you may run into issue like chrome browser compatibility now you can see that if you run into error like no chrome driver found that can automate this so that means the chrome browser what you have in your emulator and chrome driver what rpm have is mismatch okay so when you download appium it gives you one chrome driver to help you to execute tests from the chrome browser but your emulator or your real device have another chrome browser version so that chrome browser version may not be compatible with the chrome driver what your rpm jars have so if you run into mismatch like this then what i suggest is read out the logs you have to update your rpm chrome driver to the version what you have in your emulator okay so because you want to automate chrome browser in your emulator so that means you need to have the chrome driver which supports this chrome browser version but your appian may have some other version so to bring that compatibility here it clearly says that a found chrome bundle in your android this is the uh chrome browser 83 okay in my emulator there is a version 83 but rpm is giving me 86 so what you can do go to this path in mac you will see path like this in windows uh you will have another path that you can get from your appium server logs okay if your test is failed then go to ibm server logs and see where exactly your chrome driver is located and go to that location delete the existing chrome driver this is the existing chrome driver what i have for rpm in my system in this location mac slash chrome driver so this is version 86 go and delete this you go and delete this version and you see what version your mobile is supporting that version chrome driver download and place it in this path you have to do this to make this work okay or you can update your chrome browser in your mobile to suitable for your rpm but that is tricky and require a lot of steps to do do that instead you can just blindly see what is your mobile chrome version that information you have already here found chrome bundle and go and download chrome version of 83 and put it here in your case it could be 95 or 96 whatever when you are watching this video but read the logs go to that path and delete the existing and replace with the version of this if you don't know where to find chrome driver i will show you just type chrome driver download in your google history and you see here are the different chrome versions and the respective drivers are present you can scroll down that if you need 83 85 90 or whatever and you can select it to go to that respective page and you can download it okay so that's how you can bring the version and replace it if you run into error of compatibility of chrome versions if you don't run into that error then this should perfectly pass without any issues all right now in the next lecture let us continue our execution because we have automated until reaching this point where products are displayed but after products are displaying we have to scroll down our app to this level and then identify this devops so i have to extract this text and see if it is equals to devops or not so now we have to scroll down our product list page to this product and we have to uh choose this title right we have to extract this title and we need to put assertion to see if this title equals to devops so first thing what we have to do is a scroll so if you remember we have already handled in previous lectures when we are dealing with android apps on scrolling and swiping right we did this with the help of javascript executer okay so if you remember or if you revised my previous lectures on android apps i have shown you how to scroll swipe and pinch using javascript executer so here also let's apply same logic even to scroll on mobile browsers you have to still rely on javascript executed so let me create object of javascript executor class equals to basically you need to cast your driver to javascript executor and create an object out of it javascript executed okay so move your cursor and import javascript executer package right so js dot execute the script what script you have to execute you have to scroll the window of the browser right okay so even if it is a web or mobile the window is a common for browser so that window you have to keep scrolling down isn't it so right now when you land on this page you will be like this so you should scroll down the page that means scroll down this window completely so that script we are executing okay so to scroll down in javascript there is a concept called window dot scroll by and if you want to scroll from zero to let's say thousand coordinates then up to thousand coordinates it will be scrolled down okay basically this is a javascript which will help you to scroll down to execute javascript in your java test we are depending upon javascript executor okay since this javascript executor can execute javascript in your java so we have javascript of scrolling down so that's why we created object of javascript executer and we requested to execute script of this js okay and that's it so here we don't need any argument because uh in this point we are just asking to scroll that's it okay perfect so this step will help you to scroll now if you wonder why we are using javascript executor i hope you are clear so this may be your interview question as well what is the purpose of using this then you could just say like this if there is a scope of injecting javascript in your java we can do that with the help of js executor okay because browser is developed with javascript language so if you want to scroll down the browser you have to talk to the language which browser understands so that's why you are pushing the javascript okay so the browser engine back rendering is with js only right okay so next thing you want to get object of that third product okay so this is our third product right devops and if you look at here this looks a little tricky because there is no id which will help you to reach this page let's write expert for this step by step i'll show you how to write xpath um list group item so totally there are three list group items i think for second product also there is one list group item and for third product also you have one yeah but we need third one so what i can do slash slash tag name i'm writing expert here at the rate class equals to uh what is our class name list group item okay so if i hit and enter with this i will get three elements found so i want third one right so wrap up your entire x-path in brackets and say i need the third index like this and hit enter again and perfect now it has successfully highlighted third element you see only one element matching which is a third one so you reached here okay so from here you exactly have to reach this point so you are ex with your expert you reach this point now if you minimize from here you have to jump into this html so from parent to child traverse you can do slash tag name so with this xpath you will reach here okay so inside again there is another one if you see from this dev you have to jump to another dev which is this and from here you have to jump to this devops you see when you are here it's highlighting in the mobile you see that devops is getting highlighted so right now you are at this point so you have to do one more traverse slash div slash a to reach this devops i'm just showing you how to do this with uh xpath because until now we are doing css only see when i hit enter it perfectly matches the devops i can highlight and show you you see devops is highlighted so this is our x-path so driver dot find element by dot x path so we need to get the text of that particular locator right because we want to know if that is devops or not so we are extracting the text present in that locator with the help of get text method so i am carefully storing that text into one variable called text so now i will write an assertion say assert dot assert equals okay equals this um i think i don't have testing g jar that's why i'm running into this issue let's fix this so move your cursor and uh import asset of junit so you can either use junit or test ng so soon i will talk about a test ng and how to get that framework into our classes okay so this is not the right package of the unit import org dot junit dot asset perfect so this is the text what we retrieved and the actual is the devops right so we are just comparing if that text what we retreated from the browser is matches with devops okay so let's run this test java application and make sure your emulator is on you see execution started and it scrolled down successfully if you if you see the page it's very fast okay initially it will be like this right but it's scrolled down and it has shown devops and your test also should pass now without any issue you see there is no error reported because both are matching if you mess here anything like devops1 and now if you run it will fail okay let's see now it should report as a failure and at the same time we will also monitor how the scrolling is happening it's very fast so we hit on landing page click on that menu oh it's quick that we scroll down from actual page to bottom and then you should see an error now which is obvious because it is expecting devops but you gave devops one okay so this is how you can work with a mobile browser automation so here after it's all selenium guys so until you invoke the browser in mobile all the configuration what you need i explained and also i explained how to inspect the mobile browser objects also by toggling um your device toolbar okay these two are important things once you are familiar with these two rest all is the normal selenium code what you do for web browsers same thing you can write a code but make sure that kind of elements are showing up in mobile browser also okay this is the setup you require to get started with a chrome browser in mobile and the rest is all your floor to play around just like how you did with selenium but i will give you one assignment here now when you access facebook.com in browser it says facebook.com but in mobile it will say m.facebook.com okay so i want you to start automating this try to click forgot password and try to give your user name or just play around this facebook icon and that way you will get some confidence on automating mobile apps i am specifically giving this because the code base is different for mobile browser and web browser okay so now if you try to inspect it on the web browser you will get a different ui right let me show you see this is the ui for a web so in mobile this is how it looks okay so try to automate that in the mobile browser just do some normal validations for login and forget password that way you will get confident on automating this all right guys so that's pretty much about mobile browser automation using ipm in android devices thank you

Channel: Rahul Shetty Academy

Views: 15,558

Keywords: appium, android, automation, testing

Id: VK2ase1SJbA

Length: 36min 12sec (2172 seconds)

Published: Sat Jun 05 2021