Cypress Configuration Settings (cypress.json) | Cypress Tutorial For Beginners

hey masters welcome back to young media this is uh another video about cypress io today we are going to learn how to use the cypress.json file in order to configure our executions dynamically okay and also well kind of a standardize the the project configuration in a single file and here is where you can manage those changes okay so um let me show you what we are going to be reviewing we are going to be reviewing the base url command how we can change this in the command line interface and well it can be useful for integration right with ci cd environments also we're going to be learning how to use environment variables also in order to have kind of dynamic values depending on the different operating systems or depending on the test stages where you are and you want to send different values well you can use environment variables in order to have that dynamic kind of framework right also we're going to be reviewing the retries we are going to take a look of the default command timeout also the response time out i'm going to show you how what is the difference between this and this one for example and then we're gonna be well playing around with the with the screenshots configuration and the videos okay so it is gonna be kind of helpful if if you are new with this and if you want to review some concepts please well watch this until the end because we are gonna we're gonna be learning a lot together guys okay so please subscribe and let a like also if it is possible i have two environments here i have the localhost 3000 and the localhost 3001 and a well as as you can see this is gonna be a kind of demo because sometimes you need to run your scripts or your suite depending on the test environment uh well your project is right now or you need to execute right now right so um i'm gonna be opening my my project here um i have as you can see a simple application a to-do list that you can add and you to do you can delete it and also in the backend we have a kind of demo api that we can play around and as you can see in the integration folder i have a site request example where we are performing post a patch delete and get request we're making sure that well the response is the correct one and also at the ui level we have like two scripts here that make sure that the ad to do and delete the to do is working correctly okay um so let's go ahead and take a look of what is happening here in the ui for example we are doing a site visit and we are just sending a kind of a slash here right and well if i come here to the cypress.json you can see that i have a well a json file with a key over here which is base url here i'm specifying and i am setting up well where all my site visits are gonna be by default so every single time that i want to visit some part of this url i just have to specify that in the site visit for example like this one or in the site request just specifying the endpoint information right that's important and that's why the cyprus base url it's important because let's imagine that i want to run this in the port 3001 we can do it easily okay let's i'm gonna just we'll show you that i'm gonna be executing mpx run cyprus demo okay and this script is as simple as uh it is simple to well actually i'm sorry i did something wrong here i'm sorry for that there it is i'm gonna open up again there it is and um what i'm gonna i'm executing right now it is in the package that jesus and you can see that the cyprus open well it is executing cyprus open which is going to be useful to run our or actually open our test runner and as you can see in the configuration part we have a kind of environment or actually a base url over here which is pointing to this value the localhost colon 3000 and um it is because it's hypers adjacent however you can well change this okay if i come here to the package.json and change the cypress open with config and the base url well you can here set up another different local host information okay and if i execute again that's runner you can see that now we are sending this parameter to the to the test runner itself and in the settings part in configuration we have the well the new base url pointing to the to the right a server or environment that we need that's important and that's how you can achieve the well the dynamic change in your executions right that's important and as you can see if i execute the ui demo you can see that we are pointing to that particular environment and also if i want to retry this with a 3000 well we just have to well kind of clean this configuration part and we'll execute again our cypress runner and as soon as i click on the ui demo you're gonna see that we're actually testing the port 3000 and that's how you can achieve this configuration part with the cypress adjacent as easily as easy as you can see right it's it's amazing actually right um so let's go ahead and continue with the next configuration that we can achieve in the cypress adjacent and it is the environment we're gonna be playing with an environment variable and let's take a look of the official documentation here um the environment variables are useful when values are different across developer machines also when we have multiple environments like like in the in a qa environment right we have def we have staging we have qa we have plot and all other names that you probably know right and also when the values change frequently and are highly dynamic that's important so let's imagine that i want to perform a request to an external api and i want to set this value as the api right but we have two different ones for example this is a json placeholder by type p code and also we have another one by cyprus io so i want to have a kind of a dynamic environment variable to send the the right one in the moment that i need okay so let's go ahead and try to do this um i'm going to go to my project here and i'm going to be declaring an environment or actually a an external api okay and this external api is going to have the value by default right off the of the cypress a placeholder here which is this one over here okay and um well now we have an environment variable and i'm going to try to explain you how you can use this environment in your test executions okay so i'm going to come here to the site request dot js okay and here um let me see what we're going to do i'm going to create another it at the bottom of our script okay and we're gonna name this [Music] external endpoint test okay and this let me check if i'm recording and i am um and well we can do a site request here okay we can say that i want to do a cat request to the api that we have in our cypress.json which is external api i'm gonna copy this and i'm gonna well use um a comma here i'm gonna use backticks because i need to call an environment variable here with a string interpolation so i'm gonna be calling cyprus okay that environment if i'm not wrong that m and inside of kind of um parenthesis well we have to call the name of the environment variable that we need and then well if you check the different apis we'll have this kind of endpoint at the bottom of the url right so i'm gonna well use these comments or comments at or over here right and now will this api is going to be bringing the value from the cypress.json i just have to delete that slash at the end and then we are as well um specifying that i want to get the comments from this particular api okay so um in order to well show you how you can see the comments well we're going to be doing it then over here we're going to have the response okay and we're gonna be doing a scilock here which is gonna return the response from the then okay and well i also want to uh sidelock over here the environment environment variable itself okay it is gonna be this value um i'm sorry what it did there it is i'm gonna execute again my um my test runner okay and let's see if it is recognizing my new environment variable let's see um well i have the settings part and i come to the configuration part and i'm gonna look for the environment part and you can see that i have the external api here with the configuration that i set and i'm gonna be executing out now the site request script and as you are gonna see well i probably have an external endpoint test and as you can see in the lock we have this endpoint which is the correct and also we have the lock here which is an object with eight um with eight well kind of objects if i'm not wrong right well yeah this there is a body with an array huh and here we have the different comments from the a cypress placeholder okay that's important but now let's imagine that you want to change this external api from from the cypress one right to the new one which is gonna be jsonplaceholder typeycode.com and you have to send all this part i know that this is not the the correct example probably you have to have the same kind of api url but it is just a demo right so please think about it as a demo i'm going to copy this i'm going to come here to the cypress adjacent and the way that you can well the way to change this in the in the execution time is gonna be coming to the package.json for example and i'm gonna be using um [Music] this this command over here let me just check my notes because i want to do this right and there is i have the command now it is going to be double dash m okay and then you have to just send the the environment name the environment variable name which is external api and well assign a value the new value that you need in this case it's gonna be the jsonplaceholder.typecode.com that post etc and now uh well as soon as the request or the script calls this it is gonna have the same endpoint which is gonna be comments or comments okay so if i run this again please remember that it was from the cypress endpoint right but now we are using type e code okay so i'm gonna execute this again if i take a look of the settings you can see that the environment variable it's pointing still to the cypress because i think that i need to run again my my runner okay so let me go ahead and do it you can see that now we are sending the environment flag and well in the settings part probably we have the environment a new value which is typey code and if i execute again my site request example well i hope that it works the external endpoint is now a while using type code endpoint right the api and as you can see what we have like we have done the request to another endpoint just sending the right configuration by command line interface and that's amazing well i hope that you can see the power of this environment variable part if you're creating a framework from scratch well i think that what we can continue with the next part if you if you see if as soon as um i do a change well the the test is is actually updated totally so for example if i save this you can see that now we have a new execution let's imagine that you don't want to have this functionality working you only want to refresh as soon as you well click on this button okay so in the cypress.json configuration and documentation you can see that at the bottom we have this watch for file changes okay so you can welcome here to the cypress.json add another key which is gonna be watch for file changes and well you have you have to come here and set this from true to false okay so i'm gonna i'm gonna well finish the test runner again i'm gonna open it again and well let's see if it works or not i'm gonna run my site request and well that's the the the normal execution and now if i come here and and i add an s for example well it is not working it is not refreshed automatically and that's why uh what this configuration is is here because you may want to have to watch for file changes or you don't so you can change it in this particular part okay that's important let's go ahead and take a look of this timeouts part which is default command timeout if you see the description it is the time in milliseconds to wait until most dom based commands are considered consider it timeout i'm going to show you all the difference if you set or not this okay i'm going to create a new key over here the value is going to be a from 4 000 to another one that is going to be a big one because i want to make sure that you see that you see the difference okay um okay i'm going to set the default value here to show you a the difference okay i'm going to change a my ui demo okay i'm gonna change the this lecture to an invalid one um in purpose okay i'm gonna add an e here it is not gonna be finding this element so it is not gonna work you're right right um i hope that you understand that so i'm gonna we'll execute the ui demo and as you can see cyprus is going to wait uh well actually four seconds right now to make sure that it is the element is not present right it is going to retry every single well i don't know the the the pulling time but it is going to be retrying for four seconds on to check if the ld the element is displayed or not okay but with this configuration with the default command timeout if i amplify this range i don't know for an extreme change over here okay i'm gonna well um terminate the job and i'm gonna open up my test runner again you're gonna see that now we are setting this default command timeout from uh four seconds to a lot i don't know it is like 60 seconds right yeah i'm not sure yeah it is probably right so if i execute the ui demo again you're gonna see that we have a lot well a lot of seconds here and cyprus is gonna wait all of them in order to check if the element is present or not it it can be useful if you want to have like um like more time if you're if your website is taking a or actually takes a lot of time loading elements or sometimes yes and sometimes not well that's the uh well a kind of good workaround if you wanna use it so that's a configuration that you can do i'm gonna well um come here and back to the normal um time and yeah also you can use the request timeout over here in order to wait until your site weight is present or not you can retry a well a custom millisecond depending on your needs also you can well change the response time out for the site request sideways side fixture side cookies and other ones it is going to work well almost as as the same as the default command timeout that i just gave you a few seconds ago okay also well if you check this um if i if i run this let me show you this if i come here and i run the the cypress npm i'm sorry cypress run you're gonna see that automatically well it's something wrong let me see cypress let me see what i'm doing wrong mpx maybe there it is that's that's good it is going to be executing our whole suite right automatically and uh well is gonna be recording automatically a video as you can see here right every single execution is gonna be a well recording a video well in order to check uh what it happened there right and as you can see also we have a screenshots when um something is wrong when the test assertion is failing we're going to have a kind of screenshot here that we can check and it is useful right but sometimes you don't want them also you can see here that i have a video for every single execution let's imagine that you don't want to have that all right so the configurations that you have to change it's going to be a video over here this is the first one change it to false and also the another one is screenshot i don't remember it let me check it it is a screenshots on failure there it is a screenshot on failure that's the key that we have to set here and also set it to false so if i execute again my uh well my swift you're gonna see that um my screenshot folder is gonna be empty as you can see here even when we have a kind of a test fail over there right the screenshots is empty still and also we don't have any video recorded recorded in our execution so that's other kind of useful um configurations that you can do using the cypress.json file i hope that you find this useful i well i think that you need to check this documentation because it is going to save you a lot of time if you set this correctly depending on your needs right so thank you very much guys i hope that you can enjoy or actually you enjoyed this video if you're watching until this minute and i hope that uh well you can subscribe let a like and well i hope that you can support this channel uh with with that simple action thank you very much this was your media and see you in the next one guys bye bye

Channel: JoanMedia

Views: 281

Keywords: cypress, joanmedia, cypress io, testing, programming, software engineering, software testing, cypress configuration, cypress.json, cypress environment variables, cypress base url, cypress retries, cypress video, cypress screenshot, cypress test framework, cypress test runner, cypress cli, cypress ci/cd, cypress config, cypress global variables, cypress best practices, cypress course, cypress testing, cypress tutorial, cypress screenshots, cypress videos

Id: mopKFKSNNYw

Length: 20min 23sec (1223 seconds)

Published: Mon Nov 22 2021