CYPRESS INTERCEPT Response | Cypress Mock API Response

you will learn how to mock an api response just using intercept in cyprus as you can see in this example we have an application named to this right where we have two initial uh well to do's in the to list right but as soon as i mocked my api response and i send and other parameters you can use intercept to send them and make your test all right so for example if we come here even we can mark a wall and to-do list as ready if you want to test something in particular so if you want to learn how to use intercept with a cypress please stay tuned because we're gonna do it step by step so you can understand this concept thank you very much for watching the video and let's go ahead all right before we start please let me just introduce myself i'm john media and i'm currently uploading videos of cypress so please if you want to keep learning about it please subscribe and keep posted about the last videos because i'm trying to upload a video every single week all right so as as i told you in the introduction i have this to do mvc test automation in cypress website right where we can add and delete to do a to-do's in a to-do list all right this data is coming from a json database right that i have here in order in another project and well you can place more um place more to do so or delete them so for example if i come here and i send for example test2 you will see that this new to-do is added in the list and also in the in the json file is gonna be a another parameter right so in this case i don't want to to start working with this i want to mock apa responses right with cyprus so i'm gonna start working with my cypress um framework so i'm gonna just do the the the normal way that the normal thing that i that i have told you in the in the in the past videos right i'm gonna start with a describe all right in this describe um what i'm gonna do is call this intercept demo okay um we're not gonna receive any parameter we just want to start writing our tests so i'm going to start with the first it okay this it is going to be named um let me just use the template here that's good i'm going to name this it as initial validation all right initial validation as soon as i um well logging in my or actually load my application right what i want to do is um well visit my website okay see why the visit i want to go to my website localhost here and once this is done i want to make some validations just to make sure that the website is uploading the cr the correct data okay so how i can do this basically i want to make sure or i want to see what it what are the selectors that i can use for validate the test over here and the wash dishes strings or text okay i can see that this is a structure that has an ul and then an li under that so that li has the text right which is inside of label label i'm sorry but we can use this structure to get the test so what i'm gonna what i got what i'm gonna do here is we'll use these ideas at first and i'm gonna look for the allies that i have that it has inside of it right that's good now what i ca what i want to do here is we'll start with my assertions i can use a shoot here and i want to make sure that as soon as the application is loaded i have two uh to do see in the list right as the database is is set at this moment so i want to come here and i want to make sure that my list has a or have a length [Music] length i think that i'm writing this wrong yeah now it's good and well here we have to specify the number of to-do's in the list now this assertion should be working fine and i also want to use another assertion using and to make sure that it contain for example the word or actually the to do test here that's good and then i want to make another end with a contain to make sure that it also has the in order to do which is wash dishes all right wash dishes i saved this and i want to try this again i'm gonna go to the test runner that i have opened already and i'm gonna stop this and i'm gonna look for the intercept folder inside of integration right and i'm gonna well click on this to execute the test script and as you can see while the the website or the application has loaded correctly it is visiting localhost and then as you can see we here we have a get well response actually yeah and as you can see we have two buttons here at the bottom of the of the website we have a request and after the request is done the response has the test item and the wash dishes item right just have that in mind then i just come here i look for the to-do list id and all the allies inside of it and then i make the assertions to make sure that we have two um items in the to-do list and then the the the wall the test to do and the wash this dishes to do that's good now let's go ahead and try to mock up the api response using this get uh well this get um api response that i have here right and you may be wondering how we can do this that's what i'm gonna do and you i i have another thing here that i wanted to to bring to you and it is the explanation of why more key api responses might be useful and the reason is because during development and testing when live data is either unavailable or unreliable while using or or yeah we can use smoke apis to work concurrently on the front end and backhand so we can mock different responses we can take a look of different behaviors before we have a real life api for example just you can all use this information for different scenarios in your well testing life right so i'm going to create another it is going to be called a mock api response okay as soon as i have done this what i want to do here is well give you an example of how we can get the response of data that we have in our application so i'm gonna come here and i'm gonna go to my google chrome right and i want to um go to the to the google chrome inspector right the dev tools and click on the network tab okay what i want to do next is we'll upload i'm sorry i i'm i'm bad at this i'm gonna open another google chrome i'm gonna just come here localhost i'm gonna inspect the website and then click on the network tab as soon as i have done this i what i want to do also is well clear my network recording and then refresh the website again right and as you can see in this step we have different network files and also these status or actually network uh all kind of responses and and and world status codes we have all the files here about what is being happening in the network and if you want to take a look of of the of the get post that we have or actually the get response that we have in the cypress test do you remember that i told you remember about this get 200 to those if you want to take a look more in depth about it you can come here and look for the for example the tutus um file that i have found here all right and this is the response that we can mock to get our items in the application okay so i'm gonna copy this just to have the proper way or the proper format that the application is having or the api is is managing right i'm gonna copy this and i'm gonna come to the fixtures file right i'm gonna create another folder named intercept and instead of intercept i'm going to create or actually yeah i'm going to create an a file that json named intercept fixture right and i'm going to paste the whole response here and we can modify this all right we can set different values to to this wall to this um picture so we can mock the api response and send the parameters we want to send right so in this case i want to for example change test from from test to for example cyprus assertion video okay then i want to create in order to do name for example page object model cypress video okay and then i want to create another to do just to have an example in different cases right give you different point of points of view i'm going to create another um well another to do okay and it is going to be named for example intercept cyprus okay and it is gonna have the id number three that's good now that i have the response enough in a fixture file in the in the fixtures folder i wanna use this fixture file to mock my api response and and the way that we're going to do this is using well um taking a look for example in the test runner we have the route that where we can try to mock the get api response okay so what i'm going to do here is we'll create uh or actually use a cy intercept command here we specify for example the http method that we want to intercept in this case is get and then we specify the url of or actually the path in this case that we want to intercept in this case is students okay once this is done i just have to pass the intercept or actually i'm sorry the fixture file that is gonna be that we want to mock okay in this case it's gonna be a it's gonna have this syntax okay it's gonna be fixture okay and in the object notation we specify the folder where my json is located in this case is intercept okay and intercept um picture that json okay and well as soon as you have done this i want to make sure that you understand why i'm passing this path here and that's because it is inside of pictures and inside of pictures we have the folder intercept and instead of intercept we have intercept picture that jason okay that's good once i have done this well my my well i think that the the get http method and and this is this uh request is gonna be intercepted and we're gonna passing we're gonna pass the the parameters or the response that we have in the fixture file okay now i just have to do a cy that visit it is gonna have the same value that i have inside of the first hit and well if i for example if i lock for example a test just to make sure that the intercept is working and i come to the test runner again it is saying that intercept is not defined let me see what is happening intercept is not defined intercept i'm not sure why it's not working let me see intercept something is wrong i think right let's see let's see what is happening it be because of the function of the arrow function let me see the test runner again it is not intercept let me see what is happening just see why that intercept yeah is sending a get or actually we're trying to intercept the get response we're sending that to deuce yeah and we're sending the fixture here i think it should be working fine let me see if i execute this again intercept is not defined in the line all right i guess i think that i have found the the issue here intercept maybe the folder is inter let me see oh i see what is the what is wrong here well the the path yeah of the picture should be should be inside of or actually used as a string right yeah so if i save this again you can see that well the apa respond has been mocked actually you can see the route here where we are intercepting the get method the url to this it is saying that it is actually stopped here right and as you can see in the application when i am loading the data well i have the site preservation video page object model cypress video and intercept cyprus and that's the data that we have in the picture right inside of this folder is intercept fixture that json that's good now we have marked our apa response there is something else to be that you have to be aware we can alias this intercept so you can use it in the future for example if you have this in a before each you can use an alias to call the the picture or the intercept itself how you can do that but well you just have to use the word as yet for example to lose using picture okay that's good i'm sorry and as you can see here well now the route that we have in cyprus it has an alias so you can use it in a future just to have that in mind i hope that later on we can take a look of more or more deeper overview of alias all right so now that we have mocked our up our api response right i want to make sure that everything is working fine i'm gonna just copy this code that i have here to make the assertions so in this case now when the api response is mocked well we now should have three different to-do's right and it should have also another end here well now we should be matching the fixture titles okay for example cypress solution video right now the list should have the page object model cypress video and the last one is intercept cypress okay that's good now if i execute again my application you will see that well as soon as the application is mocked now we have new data and we have more lists to take a look and make sure that everything is working fine in the api okay so let me just give you another example of how you can let me just give you this example if you click on this um button well the the how can the say this the the task the to-do list right is marked as ready okay well it has a patch but also if you take a look of the um of the well the database in the json file the completed attribute or actually the the key is changed from false to true alright so we can mock that also we can send a to-do list already well marked as ready to make sure that for example has the correct css format it has this this line in front of the text so how we can do this i'm gonna come here and i'm gonna create another it okay and i'm gonna use the it that this is already created and what is gonna be name for example mocked ready already to-do list okay it is gonna be a function and inside of this it i'm gonna create a const okay and i'm gonna create a stop example for example stop sample it's gonna contains an array of objects just as the just as the fixture right and um inside of this object i want to send the parameters all right the title and i'm going to call this for example a mopped api to do video and then i just want to also send the completed parameter right that's good and in this case in case instead of false i'm going to send this true so the application should well for example bring the the line that i want to make sure and test it and also for example i want to send the id right because i need or actually the response is requesting an id and this id is gonna be the number one okay that's good now this stop example object is being created and we can use this a constant which is an object right and send it by or using the intercept how we can do this well the the the next step here is using again the intercept command and we'll use the get method right again and um we'll look for the to do spot and then we have to send the stop sample right how we can do this well the the way to do this is using um well an object here is going to be body and the the body as the key and then we have to send the weldy object that we or the array of objects that the application is expecting right so in this case it is going to be stop sample and i think that i can use also an alias here just to show you that you can use it later and in this in this case i want to name this get to those and i'm not using fixture right i'm using body in this case if i come here i want to well see i see why lock here something just to make sure that everything is working fine in the test runner and as you will see here well probably probably i'm not sure it should be mocking the api response differently mock api ready to do let me see look um [Music] something is wrong right and i think that i'm missing something here and i have found it i'm gonna use cy visit and then i have to pass the url that i have here and then it should be working now let me see and as you can see i have a mocked api video marked as ready and we are we can actually test the line here right the css that it is working fine so i'm gonna try to do that just pretty quick i'm finishing the video but i want to show you how you can check and css property okay let me just make this better and i'm gonna come here i'm gonna select this element and as you can see the label here has for example um i think that it has a text decoration right here as line true and also the color color here is uh well different because if you click here you'll see that the the text color is different and it has uh the creation line true inserted so i want to make sure that it is happening when when the mocked api response is uh sent or actually set as true okay so how i can do that well i'm gonna use an assertion a simple instruction here i'm gonna come here i'm gonna use the command cy that get because i have to look for the element at first okay i have to look at this and it is the label inside of the li diff okay so it should be pretty simple i guess [Music] we can use a diff and the label because it is probably diff the and the the only label inside of this right inside of a div and i'm correct so i'm going to use diff label and inside of this what i want to do here is we'll make sure that using the should command that have css attribute and the thing that i want to make sure that is working fine is the text decoration if you remember correctly it had a line through um sorry the line true no it's it's green it's working fine it is also changing inside of it a solid and the rgb color two and two one seven two one seven two one seven and well i know this because i have tested before and i just want to make the video faster right so if i come here well as you can see it is actually checking that and it has something different some probably because i well i wrote something wrong so i'm just going to come here [Music] with a disagreeing the value but the value was and this is the correct value that i want to check so i'm going to copy this and just paste it in my answer if i execute this again you can see that the assertion is working fine it is actually validating that it has the line through and the color is changed as expected when we mocked the api response and we checked that the api is actually we changed the the well the the completed key to true right so that's a very pretty and simple example of intercept you can do this more advanced and use it in your daily life cases right but yeah that's a good introduction to use intercept we can then take a look of how to create users to validate api responses right the duration the the different responses parameters that we have and and so on so thank you very much for watching the video please subscribe if you want to keep learning about cypress and see you in the next one thank you very much and see you next time

Channel: JoanMedia

Views: 2,717

Keywords: cypress, cypress cy.intercept, cypress.io, testing, javascript, intercept API calls with cy.intercept(), Cypress Mock API Response, CYPRESS INTERCEPT, CYPRESS INTERCEPT Response, joanmedia, cypress testing, cypress tutorial for beginners, cypress tutorial, cypress fixtures, cypress cy.intercept routeHandler, cy.intercept routeHandler, cypress.io cy.intercept routehandler, cypress.io cy.intercept routeHandler, cypress.io intercept

Id: z57lsgbImug

Length: 25min 47sec (1547 seconds)

Published: Sun May 16 2021