[Applause] today we're going to discuss um networking and how to debug it with one pretty cool tool the name of the tool is Charles proxy it's very popular tool in the industry it has um an amazing benefits key features which I'll be sharing with you tonight as well as I'll be showing you guys uh how to set up this tool how to configure it and how we can use it with the real life testing so I have an actual test in here I have an application uh which I'm sure you all familiar with I'm going to share it a little bit later uh so we will go through the real life testing uh with this tool which is a Charles PR all right so Charles proxy today we're going to talk about uh tool we're going to have instruction how to set up it configure how to use it in the real uh life testing and I also gonna um have with you a Charles proxy live demo to demonstrate how to do all um that I just mentioned about we also have our goals set for this lesson specifically we are going to review a demo of this popular tool called Charles proxy this tool is very similar to Chrome Dev tools but uh child proxy assist testers in viewing Network traffic and uh what is important about this tool and why you should use it in addition to uh Chrome def tool which can do pretty much the same in the browser for the web uh Charles however can be used with both Fab and mobile devices okay so this is an advantage of it uh today I will guide you through the setup and usage of Charles proxy and we'll help to work with a common QA tasks um which is the testing the actual mobile application what the Charles proxy actually is so Charles proxy is an https web proxy that runs on your actual computer your machine and your web browser or mobile device for example is then configured to access the internet through Charles Charles at the same time can uh record and display for you all the data that goes through your network data that that is sent by your client to the server site through the API and you guys already familiar with the client server communication and data that is received back uh so when talking about Charles proxy tool I want you guys think of it as of um middleman okay so it's it's a middleman between your internet traffic your internet connection and your your actual machine browser uh or mobile device for example Charles then is able to see and capture all this network profit that goes through the server to your um client and also vice versa of course from client to the server and from the server back and data that is sent and received and um using this tool what we can do not only see this data and uh capture it right we also are even able to manipulate with it so now let's talk about key features of the two right what is um most useful out of it in addition to to be able to use it with your mobile device uh because again remember uh this the same idea as um from def to so for uh your VB you can still use Chrome Dev tool this is exactly the same idea but for mobile you cannot and for mobile Charles would be the best option what are the key features of these two uh we can highlight um the the view uh first key feature is ability to view SSL requests and responses in the plain text so um this is really because um basically it helps us to see request and response um and read it easily just in a plain English so remember uh right from the client server communication lesson you guys saw right um what is the request what is the respond how API helps to communicate between prend which is client and the back end a server site so all this communication happens um you can easily capture it and uh read it in a plain English using Charles proxy tool second uh key feature which I could highlight is um ability to simulate a slower internet connection so basically perform any manipulations with the internet connection speed uh and Charles uh calls it a trustlink feature so for example right if you guys are testing certain scenario which uh should give you um let's say uh some error condition that you're trying to get into but to do so you have to either um get your connection to be really slow or maybe even drop it to reconnect um depends of the test case that you're trying to verify and depending of this the requirements but um that would be prettyy hard to do in the just a regular uh with the regular setup because it's not easy to make your internet connection like slow or unstable but with this particular tool with Char boxy you can actually do that because you can simulate whatever you want you controlling internet through your through this tool so uh you are really able to set uh speed really really low so that will make your request never complete actually so you'll be able to uh run into the risk condition or error scenario uh to see how application going to behave if uh no success of the this such a AP call right lastly I want to highlight another third feature uh which gives you an ability to edit request and responses uh and for there any input any um data you want for testing purposes okay so you can manipulate uh with it on the re request site as well as on response site and this feature calls a breakpoint feature okay so as an example right you know that the the server can only return you back a certain amount of characters right or actually even better UI can only accept the the client can only um draw a certain amount of data right let's say 30 characters but you would like to see what's going to happen if uh let's say you search in Google and something like large come back uh from the server s side more than 30 characters some text right based of requirements I can assume that my front end would just truncate this data in display me um as agreed right as as required as it should as documentation set has only 30 30 characters and then I click on the link and I see the whole text uh but it's not easy to prompt such scenario because we don't control like a server how can we return something that server actually don't do and that's where break point feature becomes really useful for us because we can stop at the request or response at any point and Par their um multiple different inputs like different data large objects anything that we want to still send this respond to the client and see how it's going to react okay if it's going to uh you know crash or how it's going to react uh and there's definitely should be requirement uh requirements around it what to expect we are going to talk about install and set now let's take a look at how we install it uh how we download this tool configure it and so on and so forth to install Charles on your mobile device you would need to follow these two steps first install and configure Charles on your computer and second set up your uh particular device mobile device to work with Charles how to install Charles uh first we would need to navigate to their official site which is Charles proxy.com by clicking to this link it will redirect you directly to the page with all this um downloadable files right let me open it up actually for you you will see uh three different uh files that uh you know application package right which you need to download and uh install on your computer uh based of your operation system it either you're using Windows Mac or Linux you need to click on it and download the latest version after that you simply install it on your computer just like you install any other application okay Charles can be used for free for 30 days just still can use it for free after this period but it will have certain limitations for example you will have a shorter sessions like every 30 minutes tool will uh close the it will pop up and tell you that you know you have to close and reopen the tool that would be one of the limitations and but to be honest it's not a big deal uh this is what I'm using I'm using free version it's never been a problem um other than that I don't see any major limitations there is absolutely no need to pay for this tool just to be clear you guys don't have to get any license don't pay for anything use it with a full access for 30 days and then just use limited free version uh when you enter your company your job um if the employer is interested in this tool and they maybe already using it they will simply provide you an account okay organization will pay for it you you guys do not have to do it on your own you don't have to get it you don't have to pay for anything okay just want to make it clear now let's talk about installation and before we get into this deeper I'd like to say that this tool is a little bit Advanced for a simple you manual QA job it is not mandatory for you guys to try it our purpose is to introduce it to you so you'll have an idea uh because it might give you an advantage during the interview if you see in a job description this Tool uh you can easily speak about it because after this class you will have an idea what it is what can you use it for and you can share this uh during the interview already after this class right uh but again if you don't want to try it not interested you don't have time this is not mandatory our purpose introduce it to you and then you guys decide now let's dig in into installation of the of the root certificate and put in all the configurations and obviously after we installed the tool we should be able already to open it up so that's what I'm going to do I already have a tool installed but I'm going to configure it with you guys right now so you can uh do the same okay so click on the icon and I was able to open up the tool um this is how it looks like you guys can see this is a desktop application uh Charles proxy application so right away uh you probably think that it looks very busy uh very complicated what are all these characters all this stuff in UI uh but in reality it is much easier than you guys think as I mentioned these two mimics the Chrome Dev tool for VAP so it does exactly the same thing uh as you know this networking tab so for web browser you still can use uh Chrome Dev tool but for mobile device Charles proxy is the best tool to use now let's go a uh over the structure of this tool so basically we have two main tabs here one tab is structure another tab is sequence so structure basically shows you the list of the domains that we have accessed uh for example you see I had www charles.com opened up on my browser browser just 5 minutes ago for you guys uh and Charles already sees this and captures I also have a figma presentation open up same thing if let's say now I go to I don't know Instagram you will be able immediately see it here Instagram here it is okay so everything I do in my network I through my you know internet accessing anything Charles is able to see and capture that so the sequence tab basically uh shows you more details it shows you actual calls that you have made so you can track it okay so you see here um it got you um a little overview and then it goes to the request and response right so for example here you can see uh request and response have like this weird characters uh it's not very readable it's not plain English it's hard to understand the reason for that is because we haven't completed setup yet let's get it done let's get it um all configured so first step let me go back to my slide we are going to install Charles root certificate how do we do that we open up Charles proxy application our desktop app right we click on help we click on SSL proxy and then we select their option install Charles root certificate one certificate is downloaded you navigate to keychain access dialog box for for the iOS users for Windows users is going to be a password manager the basically it's a place in your computer where you stall all the certificates all the passwords and such information uh you navigate uh there you open up search and inside of this uh uh dialog box you uh search for the Charles proxy certificate after that um as you located it sh certificate appears you need to uh double click on it expand trust section and ensure all options are set to always trust and after that you simply close this dialogue box so first major step for the setup and installation um is completed now let me show you how to do this so we get back to the Tom we navigate to help SSL proxying and here we click on the option first available option install Charles root certificate add actually I already have it added certificate downloaded and now you guys have to open up um this place uh that I mentioned about right in your computer it's keychain access for Windows user or for MacBook users I'm sorry and create a password manager for uh Windows users you open up this window you navigate to search simply write Charles and it's going to pull up the the proper Charles certificate for you okay uh you double click on the certificate expand trust section and here you make sure you set all these options to always try that's important once it's done you simply hit okay close the dialog box and the first major step of your setup is completed okay so as a next step we need to set up a proxy on your computer how do we do that uh same way we have tool opened we navigate to proxy proxy settings and there we need to make sure we have their HTTP Port filled which is eight um which has to have a value 8888 so make sure please make sure it's set up there uh and provid it Roxy Port field 8888 under the proxy settings Second Step you need to come back to proxy but now SSL proxying settings this time and there you would need to enable SSL proxying checkbox by default Charles uh will only perform SSL Pro for specific domains that you include in their list that you will see there uh and by default it will be empty so in order a Char to be able to read the data you'll have to include your domain that you're trying to access that you're going to work with into the list or you can also include like all domains as well uh which you use asteris and Dot form okay so the port value should be also set to 443 and it's always like that uh so if you need to enable proxy for a specific domain remember I told you you can do it for all domains or specific domain for this is an option to do it for all domains and for specific domain you can use asteris um and enter the location which is domain itself asteris from the both sides and yelp.com why yelp.com because because today we are going to actually test Yelp application this is the application we're going to work with so let's imagine we all working for Yelp you we QA in the Yelp company and we are going to test their mobile application the port default value again is always going to be set to 442 let me demonstrate this so you navigate to proxy this time and you go to the proxy settings here you need to make sure that under HTTP proxy you have Port field set to 8888 simply provide this value in the port and click okay second you navigate to the proxy B but this time you go to Theo proxy settings so here you need to remember uh there is a list it is empty and you need to First enable SSL proessing so this is actually going to be oh removed this going go and look like that so you need to enable and then U see your list is empty by default so there's nothing to proxy we have to include particular domain that you are focusing on or you can also include all of them to include our particular yum domain we click add we go to host which is yelp.com and we put Aster from both sides okay Port value is always going to be 443 and we hit Okay cool so if you guys want to test let's say Walmart app some uh some of my students asked me the other day ask uh to show them walart instead same way I put asteris walmart.com 4 for3 is a port and I simply click okay now let's actually see right if those characters going to go away to demonstrate you that I want to go back tol proxy I need to going to remove this again okay okay from here let's now try to enter yelp.com application so you will see if it's going to work or not without again I deleted removed completed this uh domain from those uh so my expectation it is not going to work y.com let's open up Charles let's make it like this and here you have this nice filter where you can actually search for you okay here it is I just was able to pull out up some y requests and responses but you as you can see guys it's all has this weird characters not readable does not make any sense we know why right because we have to complete set up so let's do it we go to proxy we go to S so proxy settings and now let's include y.com into into our list we use asteris and we provide y.com four is always going to be 443 okay okay now let's redo it and actually before I go um reload my page I want to demonstrate you guys what all the characters are for all these items are icons so the first one um clears up all the data so here as simple as that second one recording what you're doing so if I disable it for for now and uh I go around P to the different apps it's not going to tell record anything next um we'll stop SSL practicing this is a throttling feature it is disabled by default if I want to enable it I need to click on it this is the breakpoint feature same idea it is disabled by default if I want to let's say use it right now I need to enable it compose new request repeat request validate uh selected responses license tools and settings so now let's probably clean again reload the page and see what we've got okay voila so you can see guys now that we don't have those gibbish characters anymore we actually have some readable data uh this is simply the homepage um so what we've done we hit the client client went back to the server side rot us are the data that is displayed on the page and we can see it all here uh so this is our request and then we're going to see some respond data as well yeah this probably going to be the best one sorry let me see let me pick the right one so since we're not really like searching for anything like doing any action we're just going to get like bunch of information back so we see we have flag reasons photos here um it's not a picture of the business it has like bunch of uh information which this is the way how this the this server communicates to client it sends it this type of data which is actually the Json text and uh UI part front them then is able to translate this data into something that something like that we see on our screen right but this is how initially server site sends it so now we can find here like a bunch of information like which we see on the screen like literally you should be able to find like the Articles the text uh because this is all that we are able to get from the back end but um this is just how UI nicely structure it for us this not going to be the same way like in the just the Json format file okay however good news like we got some readable data uh it makes more sense it's a lot of data because we simply loaded the page so it returned us everything possible uh and now we're going to perform more uh meaningful t testing when you will actually realize what we're trying to validate particular uh lines particular data to make sure it's there you see here nice we have this um S3 uh pictures which stores in the AWS um and uh that's how we pull it so simply name of the file and then the client will pull up this picture and actually display you this picture it's very very interesting Okay cool so yeah it's a lot of information I know it's busy uh it might just you know scares you a little bit but I promise you guys in reality it is much easier uh once you get your QA tasks once you start running through the test um it will make more sense and we will start doing it just in a few okay but a good news that we actually got some data it makes more sense right now you can read it you know you can validate something here you see like URL with C page restaurant uh and so on so actually the data that comes from the from your page actually I was going to show you maybe a few more cases let's clean the data so okay let's do this let's uh try to search for something like uh let's say tacos for instant right and we run the search here it is um Okay cool so you can see path search find tacos in Miami area exactly what I put um and let's see if it returned us some data it should be like a proper response so this one says 204 which is success and then another resp request should return us actual like something meaningful let's see so um the they UI structured the way when it like keeps retrying so it keeps see like it multiple times it keeps doing the same exactly the same thing sending like this data uh or this request over and over again and just like how the application works um I think this particular one that we could take a look at so it gives us few places uh it gives us information about operation hours days of the week for these places and so on and this is the places we see here on the screen let me get something else something meaningful all right the photos are here this one okay that's another request that also gives us some data from the about the taco places let me try to do something instead of tacos I tolean it up stop recording uh let's do dinner dinner near me okay let's where is the red three did not go successfully through uh so let's uh try it again let's put back um for example bers or something like that uh connection established it gives me a bunch of information here okay here it is all right so same idea uh information on the places uh it gives me some interesting uh you know options data uh it's all like encoded so there's not much data to validate let's see what else we've got got just because you know we're doing more like uh explorator testing I would say we don't have like exact request to track exact data to catch but I'm going to do it right now um to make it more straight to the point okay next we're going to talk about uh setting a proxy on your mobile device actually on my screen right now you can observe this limitation which you will get with the free version the uh you know you have to close this tool um and you have once you click okay it's just going to reload which is fine it's not a big deal however you just you know with a free version please be ready for that um all right so next we are going to talk about setting up your tool the Charles proxy tool with um the mobile device so how to set up proxy on your mobile device here you actually should be able to navigate to the video setup we put it for you sub through it not going to do it right now but you guys are able to look through um and follow the step how to use CH proxy on your iPhone device for the people who are Android users unfortunately I have to say that um the um Android company itself uh restricted using a Charles proxy Tool uh simply because it can read everything that going on it can capture the data so they did not feel comfortable about it and uh they restricted it from 2017 so if you have older device prior 201 17 you still can use it but for uh older devices Android devices after 2017 you unfortunately won't be able to install SSL certificate right and use it because of their privacy policy however on the iOS there is absolutely no problem and you can use uh iOS devices to play with it uh you can maybe borrow some devices from your family if you don't have any older Android devices and how uh we'll put together for you guys an instructions very detailed instruction how to set up proxy on iOS specifically um it's step by step you just follow this and you would be able to easily uh get it up and running so you you need to go to the settings on your iOS device you need to make sure you connected at the same Wi-Fi as your computer where you're running Charles desktop application you need to go to the uh Wi-Fi network and tap on the network name to access settings and configure proxy to be set to manual from here you would need to provide server and word data in your mobile device to set up channles and your mobile device to work together okay so instead of using the automatically setup proxy you are going to use Charles tool as your proxy so you put the server address and you also put a port which is always going to be 8888 um this is Step number one as a step number two you need to go to the General in your mobile device uh about settings scroll at the very bottom and select certificate TR settings you will see the option there to enable it so you fully need to enable it okay to set it up on mobile Android device if you have older device you simply need to follow the such steps as well uh here we included detailed stepbystep instructions with all the screenshots um let's say open up the iOS and follow you can follow exactly the steps and um install everything that needed to work with u iOS okay so it's very detailed step-by-step instruction tells you what site to navigate on your iOS device and what you do in your settings how you change it and what you need to click on inside your uh Charles desktop application right and so on and so forth so it has a very detailed instruction as well as for uh Android but remember for Android it's only um going to work for the older devices prior prior 2017 so I want to remind you guys one of the important steps that while this demo may look really complicated it's a lot of information you see it first time and it's not easy uh this tool is not easy it's a little bit Advanced but it will give you a lot of advantages so in reality as you start trying it it is much simpler than you guys think the work of Kester is straightforward and you will have a very straightforward task that inol using uh Charles proxy if you will get such tasks uh please don't worry about it it will have a detailed description of what to do where to go what to look for um and learning this tool will only require a few hours of your time and you will feel comfortable with it trust me guys I've been there now it's time for us to practice after setting up Charles let's look at the real live examples of how QA Engineers can use Charles proxy during their daytoday routine testing activities okay and I have a few scenarios that i' would like to run over with you to demonstrate um how do you test I have already connected my mobile device to my computer through the cable and I do have a uh Yelp application already installed first step I need to do I have already everything up and running just like we saw on the screen before with all the screenshots all the instructions let's open up the tool back and first what we have to do we need to make sure we go to the proxy and we need to make sure we disable Mac OS proxy so if you remember this was check marked um and I was using browser to um go through and read the data from and now I want to focus on my mobile device so I need to disable ma OS pracy option uh let's clear the sessions let's put Yelp again in the search because this what we're focusing on and I would launch yelp.com actually Yelp mobile app here it is all right on my screen right away you guys can see that something going on right so we got data up and running um I just pulled it up so it's it loaded all the data um all the initial data in my application and you can see from here a lot of stuff already um first of all host changed now it's Auto II yelp.com previously was simply yelp.com so that's the difference that indicates that this is a mobile it also has a mobile IPI y.com and but this is something like some platform data some additional request that the client sends so now we want to focus on auto API y.com and you already can see that it pulled up my account it has my name uh and so on and so forth okay so let's see what else it has what interesting I mean I don't have much right uh because I simply pulled out the first like the the app just open it up so now what I would like to do is uh to go over the actual testing um so the first scenario uh which I'm going to to test with you guys is very simple case very simple use case scenario where we need to verify that certain endpoint user reservation call response includes particular data which is business name and address this is uh the J ticket exactly how you're going to get it from uh your developers or from your project managers how it's going to look like in jira so this is a real use case it will have some description which will tell you what are the notes to QA uh to help to come up with the testing scenarios and usually it looks like that so no to QA software developers modified existing reservations call to include details about business please inspect response of user reservation Network call and make sure it includes the following lines which is name of the business City ZIP address State and Country now let's go back to the tool so in order for me to reach the user reservations call and point I know it speaks uh for itself right this is a reservations and we have this option in the yel if you look at the menu there are reservations here so however if you guys knew and get this ticket and not sure how to reach certain end points and make or make certain call you all always and and the ticket missing such details right you always can reach out to your project manager or developer developer would be the better case in this scenario to ask how do you actually uh get there as you work for the company working with the application you will know on top of your head how to reach one or another place however if you're not sure if you don't have this information or you're new to the company feel free to ask developers don't hesitate to reach out so now now in my case I'm going to reservations and uh I actually can even put it to the filter it calls user reservations okay here it is as I opened up the reservations uh Charles was able to capture that I already reached this end point I made this call and now I need to verify the data that came back I'm focusing on the response this time and uh here is what I'm willing to see oh and what important to mention that in order to capture this data uh the precondition would be I should have already existing reservations and I do have two of them so let's see uh I have one uh right here and actually this is what we are looking for um this is our business J file right and it is Capa bestro restaurant in Fort lale which I have reservation for it is uh it has certain fields and based of my ticket actually guys let me pull it up for you so you could always observe what we actually testing I split it just like I did already so here you guys see that the field that I'm trying to verify right about the business specifically name name is here City also here zip address one state and Country okay this is all field that I'm interested in um this all my task so I was able to very ify this and uh basically the jva is done so it's not that bad right um and as you practice you guys will become real you know professional with that um just like I told you it takes some time to learn this tool but at the end of the day it is very straightforward and the next I want to share one more test scenario with you so here on my screen I actually have a resolution you will get the slide so you can go over and I have a use case scenario one more case scenario where we going to test uh our throttling feature actually so remember for the throttling feature um we need uh we need it for certain scenarios where we want to manipulate with the internet connection speed right so what do we need to do we need to go to the proxy go to the throttle settings settings of this feature first we need to enable it okay that's number one and then we need to set up speed this speed is going to uh actually we can set it to 10 10 is pretty slow um and likely my request not going to succeed so that's what I need I hit okay and you see the startup became you know Green so it became actually um enabled tring feature became Ena so let's read our task uh J ticket for QA make sure expected timeout for Network calls is under 30 seconds notes to QA Network timeout has been changed from 60 seconds to 30 seconds verify that in case of B Network API calls don't run longer than expected and time out within 30 seconds verify also that after time out user pres is presented with something weird happened screen what is our goal here in case of bad Network we need to verify that it wouldn't spin forever but it will time out in up to 30 seconds so no longer than 30 with um additional meaningful message given to the user which we also need to verify here at the second bullet to give an idea what's going on okay it's a really good user experience if let's say um application would just you know spin forever in the loop right I code it this way never stop so the only way out you'll have to like hard quit that's a really poor user experience and uh the goal here is make sure uh timeout is implemented within the certain period of time and it's going to uh give a user idea that you know something wrong with your connection how do we are going to test it to do so we can simply perform our search search takes time so if I go to search here in my app I simply let's say I click something like test and I hit search yeah probably should have cleaned let's try again let's clean and try again so what we see here my request is still trying to reach uh but my Internet won't let it you know complete the request because I said the slow speed very very slow now Charles controls it so here it is first of all I got a failure failure um with the message on my screen um we are sorry something went wrong on this page which is very much expected this is my second bullet verify that after timeout users presented something weird happen screen here it is really great experience I got a message I know something wrong I need to try again and as the second verification Point uh if you look in my screen here you will see the duration so all the schools are trying basically to go through and whatever is red we see as is not completed and we need to check a duration so as we know timeout shouldn't run like the request shouldn't try running longer than 30 seconds and whatever it takes it shouldn't be longer than 30 we can see here 11 almost 11 seconds of time we can see here two and a half three four and a half and so on and so forth so as long as the failure is is within expected timeout frame up to 30 seconds which could be any number but no more than 30 it should break the loop at 30 um test considered a success so we done the second task congratulations guys you got a meaningful message on the screen you got a duration a timeout not being longer than 30 seconds so that's a great result and this second test is also completed okay I have here a resolution for you guys as well so you can try it out after lastly I want to share with you some glossery for this lesson uh it will help you uh to be your reminder as you go to the interview um you can always remind yourself like a this quick definition you can speak about it during the interview um having this armed you know all right anyway I really appreciate your time guys thank you so much for joining my class tonight I hope you liked it I hope it wasn't too complicated too overwhelming I recommend you to give it a try uh it's a really great tool just follow instructions that we shared and you will get my video after the class so you can go step by step through the same parts that I went through to complete your uh testing