How to use Chrome Dev Tools - API testing QA Engineer | SDET

good afternoon dear QA Engineers ASDS and those who are planning to become one soon today I'm going to quickly introduce you into Chrome dab tools or any other browser dab tools cuz they're all similar and the reason we're going to do it is because you at some point of your life maybe already in the past maybe it's coming in the future are going to be using Dev tools for testing websites for testing browsers for debugging issues of your websites or maybe even for testing AP I I'll show you how but regardless Dev tools are mostly used by software Engineers QA Engineers designers and any other team members who are into software development world or are a part of the product engineering or design team it's going to be a quick introduction and the full video will be available for all the students from the Kodi by way let me quickly tell you about myself my name is Sergio kenko I am a software QA engineer lead and a manager in a past currently I'm a founder and the main Mentor at kify boot camp I help people like you to improve your existing skills or to become a QA engineer or an ASAT from scratch all right I'm going to make it very short and quick so before we jump into it you guys remember right that you got to hit that big fat thumb up button below subscribe to our Channel and also subscribe to our Instagram and telegram communities where you can find a lot of discounts a lot of latest information about QA and all of the updates about the school of cify cool now is the time to get into Dev tools all right now it is a time to open our Google Chrome deos by the way feel free to use Brave or opera or any other browsers except the Safari and I think the Internet Explorer cuz I don't think you guys are even using it anyways you can do right click and inspect or you you can also close it and do option command I and that will open up exactly the same page cool now let me quickly explain to you the basics of Google Chrome Dev tools so we're going to have a lot of tabs right here and I'm going to show you only a few of them so first of all before we even jump into tabs I want I want to tell you guys that we have and couple of icons on the left side the first icon is the one that helps you to choose an element this will will be handy only for those who are planning to work with a test automation so you can click it then you can Mouse hover any of the elements on the page and then you can click it again and then it will stick to it so you will see the HTML code of that item or of that element on a page so later you could utilize it and you could click it through your test automation by the way if you're interested in learning test automation I'm going to leave a link around this area on the top right screen side okay cool now let's get into the second icon so if you are not here for the test automation the second icon is the one that helps you to test the mobile view I'm going to decrease the size of the bottom Tab and I'm going to show you that you can actually test the mobile view of of the browser which means instead of using responsive Dimensions you can choose you can use something like iPhone 14 pro Max that's that's one of the common uh most common sizes for the pro Maxes so the 14 and 15 they're almost the same that's why you can see only one of them and you can you can see that it's not about clicking it's about tabbing now you can see kind of the circle which means whenever you click by using your M Mouse is going to do the exactly same action as you would tap on it with your finger cool and here you can also you can also specify the responsive uh responsive size and then you can later change the size of it on your own if you need a custom size you can also increase it decrease it Etc and you can you can use slow internet or uh or even go offline to test how will your website perform if you go offline and you're going to see such a page if you go offline if you're going to have a slow internet connection it is going to be loading just like like this and by the way it's mimicking it's not my internet speed is okay I promise but you can see how the first screen that you see it's kind of dark and then we're going to slowly start getting some images on it one by one uh I'm not going to waste your time you understand an idea I'm going to put no throttling so you could clearly see the website cool I'm going to turn it off and move forward with a next stab so the first stab is elements that's the tab that you're going to mostly use when you work with the task automation also as the QA engineer sometimes if you see that there is an issue with the button if it's not clickable you could also navigate to it and see if there if we are missing a hyperlink such as HRA and uh that one you guys kind of have to know HTML in order to be able to debug it I'm not going to deeply dive into it if you're interested in learning more about HTML feel free to leave a comment right below this video cool now I'm going to go to the two most important for this video and pretty much in the QA live tabs the first one is the console that's the one where you're going to spend your time looking for the front and adds whenever you're going through the website clicking different elements it's going from the page to the page sometimes you will see red let's see I don't think we're going to see any other messages on the Tesla website because it should be well I was actually lying here we go that's a front end error offset height uh cool looks like we've just found a front end error that should be it should be reported to the team and they should definitely fix it so as the user you would never see it right cuz you would not even see this tools but as an advanced user you're looking into it and you know that well if something is failing on a front end that means maybe not here maybe in of the menus something else will not show up so we better fix this issue as soon as possible I'm not going to go into the reasons and what exactly this issue is but this is just for you to know that in a console you can see front and erors just like that one marked as red also you can do some magic here in a console you can write some code and play with a JavaScript on the front end and actually through the code you can interact with a browser now actually actually let me show you one of the quick tricks that you could do so we're going to type in alert and then we're going to put the quotes around it and we're going to say Hey you have been hacked and we're going to hit enter Boom the Tesla says hey you've been hacked and you can only say okay so that is the very basic JavaScript magic that you can use in a browser honestly this is one of the easiest things to do and one of the most basic things to do and if you guys are actually interested in learning more about JavaScript and test automation I'm going to add the QR code right here so you could look into what do QA automation Engineers do for completely free because I have created a free trial for you hey guys I forgot to tell you we have an amazing news remember the membership that we had couple of months ago or half a year ago we are coming back with it and we have improved it quite a lot now you're going to be able to talk directly to the developers designers product owners even the founder of the company during the Sprint plannings retrospectives and other meanings that the company is actually having you're going to be fully supporting release process testing bug fixes testing new features all of the feature updates and a hot fixes and all of that comes available with our newest membership link for which you can find right below this video for now it's only a weight list but in two to three weeks it will be there available for you and also if you ever need any help with the job search with passing interview or any advice on your career on any sort of technical tasks feel free to schedule a half an hour call with myself or with one of our mentors by following this link right here or you can also find it right below this video all right let's move forward so these two would be the most important things that you need to know about console number one you can see front end adds or JS adds and number two you can play with the JavaScript you can interact with a website through the JavaScript in a console and the next one that's the one that you will spend the majority of your time this is called a network that's the place where you will see your API request and we are going to actually look into it let's click any button right here and please know that I did clear it before I actually clicked it so if you guys are familiar with API it's awesome if you're not I'll quickly explain to you whenever you click on the button it sends some information to the server pretty much it sends your request like now I've just clicked on a shop and it sent a request to the server like hey server can you send me all of the information and all of the cars and these items that you have for the for example shop page and a browser was like okay yeah sure I'll definitely send it to you and the browser sent us a lot of info let me actually try to find one of them items there we go so this one right here that's the API request so it goes to shop tesla.com items best sellers V1 which means it's a first version of the API regardless you're going to see quite a bit of information right here what kind of request it is it is get request and response was 200 okay which means fine you're going to see an IP address of the server and then you are going to see quite a lot of headers that you you will not mostly play with you will see your cookies um and I don't think there will be anything else interested for you at this moment that you're going to play with doesn't look like we are using any tokens here because we are not even logged in so there is no need for any type of token so I'm going to move forward to the next one payload payload is the body of the request so we don't have any payload here since well we kind of have the state which means that's the location that's the my location but we're not sending any request because it is a get request and if you guys already know the get request is a type of the request that is getting uh that is just getting an information information not sending any information if you would be creating a new account we would send your data and we would see it here in a payload preview preview is a response pretty much the data that we're getting on this page by the way now you're going to see something interesed if you have never played with it before first product I'm going to expand it to 2017 2023 model 3 all weather interior liners model 3 all weather interior liners awesome number two model 3 and Y air filter there we go so all of the information that you are seeing on this in this window is actually coming from the server and now you know know that it comes as the raw data and and the browser with the help of the some magic and a JavaScript is going to dis HTML and CSS is going to display such a goodlook page did you have no idea that this was actually coming in the form of raw data and building up for you and the browser so browser is doing magic by converting their raw data into a good look page that you can actually enjoy as the user and the preview ENT response are exactly the same things and the only difference is in a preview you will see raw Json file I'm not going to explain basic of a Json file here but you guys let me know if you would like to learn about it and I'll create a separate video about it and API testing as well and as I mentioned this is the raw Json file you can see exactly the same data but it is raw and here it is structured with a drop down so you could see it in the more user friendly way awesome after the response we're going to have initiator timing and cookies most of the time you will not play with those so I'm not going to be diving into those and I'm going to explain to you uh two more things before I let you guys go fax and a and xhr so all of these are filters that's the actually filter Tab and uh right here and you can see by default it's chosen as Fetch and xhr and that's the one that shows only API requests if if I click all you will see different type you will see document you will see text plane you will see ping uh and you'll see script Styles sheet such as CSS JavaScript files being sent but if you're working with apis if you're testing the website you would not care about those majority of the time you would work with apis cool also if you're looking for some specific request and you know that your request would contain I don't know maybe best seller you would go to filters and then type in best seller and it filters out and shows you only the API requests that have the information that you have specified awesome also if you are looking let me put put it back here if you're looking for the call that has specific data maybe I don't know maybe you're looking for the skq code if you're looking for specific item but you know which API it is in or you're looking for something specific you can click here right here for the search and this sidebar will pop up this one will actually search throughout the bodies of every single API calls so I'm going to paste it hit enter and you will see that oh actually it is in the several calls but you can see the one that I was looking for right here but it is also in in several other calls that have been sent awesome this let me see I think this will be it these are the most important parts that you need to know at this moment and the full version of this video is available for our students at codify but you guys let me know if you would like to learn anything else about Google dab tools or API testing all right since you're still here that means you are still enjoying this video that means that you want to help me out that means you already clicked that like button below and you are about to write a comment which is more than seven words longer you might ask why well because I've just learned that YouTube will better show our videos and we'll actually use that comment in a search if you will make it for seven or more words longer anyways I want to thank you for being with us and I'll see you next week

Channel: Codemify

Views: 3,385

Keywords: code, programming, python, java script, learn by coding, software developer, html code, quality assurance, computer it programs, learn qa, codemify, wdio, qa bootcamp, learn qa online, how to become a qa engineer, qa tester, software testing mentor, what is software testing, software testing tutorial, remote job, manual testing, chrome dev tools for testing, chrome dev tools for beginners, chrome dev tools, api testing, manual tester, gray box testing, chrome, network, console

Id: J1twjU4DCF8

Length: 15min 53sec (953 seconds)

Published: Sun Feb 11 2024