CYPRESS ASSERTIONS EXPLAINED | Cypress Testing | Cypress Tutorial For Beginners

this is the best video to understand and learn how to use assertions in cyprus as you can see in this code we are going to review the tdd assertion style and also the bdd assertion style that cypress has all right let's start coding i'm gonna start working with my describe here this is gonna be called assertion them okay it is important to mention that basically assertions are validation steps that determine whether the specified steps of our automated tests uh succeeded or not it is just to make sure that our application have the correct status that we are expecting right so that's basically my kind of description or the concept that an assertion have for me all right i'm gonna start working with the commands i visit because i want to show you the website that we're gonna be using today in this case we're gonna be working with this radio button website i'm gonna copy the the website stuff and i'm gonna paste it in the visit command so every time i want to write an it or a test script it is gonna be visiting this website from scratch right so the the next thing step that i want to do is create a network in this case this it is going to be named for example tdd assertions all right um this ddd assertion section is gonna only implies the use of the shoot command and the the difference basically if we come to the well to the official website right you can see here that we have different kind of assertion methods depending on the ability assertions in this case we have not deep nested and so on around we have a lot so please come to the official documentation and take a look but also we have tdd assertions and as you can see here we have it's okay street equals deep equal and so on so i'm going to try to explain you the the difference between them and how you can use them well in different scenarios right so what i'm gonna do is to either tdd illustration style i'm gonna start working and i'm gonna create a cy lock here and i'm gonna call this a length check all right what i'm what i want to do in this website is make sure that i have three inputs in the website that's basically that the thing that i want to show you and how you can actually test it okay and well i'm gonna make i'm to place my my scope here in the input and i'm going to look for something or actually a kind of a selector right a css selector in this case i want to use the type radio so as as we have seen before in the in previous videos about css selectors in this channel what i'm going to do is we'll basically create a selector and now we have a single selector that is pointing to all the inputs element that we have in the website once i have done this i'm gonna copy my selector and i'm gonna use a cy or sciget command in order to get or make the a well cyprus or actually play with the element right in this case what i want to do is the command shift which is the basically the the key command for assertions and here i want to use the command half length okay and i as you can see here we have three different inputs right i want to make sure that we have three inputs here so i wanna using this using the shoot command make sure that it have the length of three okay and now if i run my application you are probably gonna see that well it is actually checking it correctly so i'm gonna just come here and run my test runner uh well before we're actually waiting for the for the execution actually it was fast than i expected so i'm gonna click on the insert here the spec file and as you can see here it is gonna be visiting the website and then as soon as it is loaded correctly then it is gonna be checking if it has three elements uh well using that selector that i provided right it is taking time i'm not sure why probably it is the first time that i am executing this and that's why it it took time as you can see here in the in the in the task runner it is saying that we are getting this element it has a length of three elements or actually it matched three elements but now using the assertion we're making sure that the there are three elements in case that there are not for example if i place a two here you're gonna see that it is gonna fail immediately right it is gonna wait until the element is displayed but it is if it is not because in this case it is not two elements right there are not two elements there are three well this is the assertion error that we have and it it is saying that too many elements found and well the expected or actually it found three and we was expecting through that's basically well this flow right so once i have done i have done this length check i also wanna make another a check it is gonna be name for example class check okay you are probably wondering why and i'm gonna show you right away if we take a look of the third um input that i have here in the in the website it is actually a disabled one and if i come here and i take a look of this input you can see that it has a class right but at the end of the class it has the word or the yeah the class disabled and that's basically the the class that probably is providing this this functionality of disabled using a well i'm not sure what technology but probably uh i don't know for example react review or something like that so i want to make sure that this input the third one right as you can see here the third one over here has the class disabled so i can do that i'm gonna come here to my to my cypress code and i'm gonna we'll use the side in here well i'm gonna use basically the same selector that i have in in the past right because it is uh it is actually pointing to the three different inputs but in this case i wanna only a well kind of point to the to the second one in this this case right uh the second one is uh the third one in your mind right remember that cyprus works like a kind of array mindset in in its mind right and probably you have to start counting your numbers from zero zero one and two so that's basically what i'm doing here once i have selected the second element in the array of elements then i wanna make sure that it has the class disabled right so i'm using the should command here in order to make sure that it has the class have the class disabled okay and as you will see right away probably hopefully we're gonna have the assertion working as expected as you can see in the test runner here it is actually checking that the class is disabled or not that's good right and as you can see here also well we are pointing to all the elements and then making sure that it is only pointing to the third one in this case right excellent now uh i want to make a negative assertion all right and cyprus recommend using negative assertions to verify that a specific that the specific condition is no longer present after the application perform an action okay but in this case i'm gonna show you a kind of example right here if i click on the yes let me show you if i if i click on the yes a input you are gonna see that this text is gonna be displayed right it is a kind of p with the class m3 mt dash three right so i'm gonna place a uh i'm gonna try to find the element using the class syntax right and as you can see i have my p selected but if if i refresh the website and and i try to look for that class you're gonna see that there are there is no element displayed actually it doesn't exist in the code yet so i wanna make sure in this demo example that this element is not displayed at all right when when the website is loaded all right i wanna well um use an assertion to make sure that this doesn't exist in the dom so i'm gonna come to my cypress code again and i'm gonna use a simple side lock here just to have better understanding of what is happening in the test runner right and i'm gonna make sure that or i'm gonna call this assertion exist check all right once i have done this i'm gonna make a psy get over here and this side is gonna be looking for this element right that if i don't click on this element it is not going to be existing in the dom so i want to make sure using the should command again that the element um not exist okay as simple as you can see here um and if i execute again the well my script you will see that as as we checked this element is not displayed yet because i haven't clicked on any input over here and that's basically why that is happening so as you can see in the test runner it is saying that the mt3 not to exist in the dom now i'm gonna start working with clicking on the input in order to check if the text is displayed and so on so what i'm going to do here is basically we'll call this psilock for example and text check over here right so then i'm gonna well as always i have to click on an input so i'm gonna come to the website well i have the the selector over here for example and i want to click on the first input that i have in my website so i have to use the method equal right rick or i'm not sure how this it is numbered it is called let me see number is indicated i'm not sure use this command in order to well select uh an element from an array of elements right in this case i wanna click on the first one which is gonna be yes over here right so as soon as i click on it or actually i identify it i'm gonna click on it all right here click and touch it excellent once i have done this action right i also wanna make or actually need to do something over here i'm gonna use this force command in order to force the clicking because well i have done some tests before i record this and well there is a kind of a well a situation there that i need to force the click and probably if you wanna it will kind of learn more about this kind of commands please let me know in the comment section and i'll try to explain you more in depth just have in mind that i'm gonna be clicking on the yes input button here all right once i have done this well as you can imagine well now this element that i have checked before that doesn't exist the empty or the p right that has the the text you have selected yes will now exist and i now want to for example make some assertions right so i'm gonna do a should here okay in here i wanna make sure that i have the text that well we're expecting the website right in this case is you have selected yes over here there it is if i execute this you will see that probably in the test runner it is validating that after the clicking right as you can see here in the test runner and the history or the snapshot dom that it performed it is clicking on yes and then well as we expected the text was displayed right and it is saying you have selected yes now after it it is actually displayed me we're making an assertion to make sure that the text you have selected yes is displayed or not but also we can perform other kind of assertions at the same time right we can perform multiple assertions in one simple get all right so i'm gonna use the command end all right which is a kind of alias of shoot right and it is gonna be allowing us to play with the element that we have selected and then perform another assertion okay so i'm gonna use for example um use the assertion method include text all right and in this case it is gonna work as a kind of contains right uh so i wanna make sure that the the p element has for example yes just have the word yes and it is another assertion example that we can have using the same get method and using and as an alias offshoot okay and then for example i can make another assertion over here and well what i can do here is for example is use the method not contain to make sure that the p element doesn't have any kind of task text that you have in mind for example the word test okay probably and obviously it is not going to contain the word tax test in the p element that the website have but it is another negative assertion that you can also perform in case you need it in your real life scenarios right and i just want to show you another example of tdd assertions over here right and it is going to be to validate for example that this word has the green color that we're expecting so we are gonna check a css property okay so i'm gonna just call another side lock here and it's gonna be called for example css check okay and what the procedure is kind of similar i'm gonna come here and i'm gonna look for the yes word it is inside of a spam all right of a span element over here it has a class test success success i'm sorry and probably if i look the element with this notation we're gonna be capable to identify it right so i'm gonna use this sciget element uh sciget method again okay and inside of it well we're gonna be trying to identify the p element and then well what i want to do is use the should command to try to make a different assertion in this case it's going to be something like half css okay what we have to specify then is the property that i want to test okay in this case it is going to be the color if i come here and identify this element you are going to see that in in the style step of the chrome the chrome development tools right it it has a color property which is the green that we have in displayed in the in the in the ui right if i come here to the computed also we can ch check the color that it has so i'm gonna copy this color and then i'm gonna try to specify that in the code we're gonna make sure that have the css and the color property and then we specify the value that i want to validate in this case is this color that we have over here and then if i said save this you are going to take a look of this and probably you can see that it is actually making sure that the yes word over here inside of the expand that i have identified with the class test success success i'm sorry has the value rgb and the color itself right and inside inside of the color property right so that's amazing another amazing assertion that we have with cyprus then i'm gonna explain you how to use the bdd assertions we're gonna try to do um these examples but now using the a different notation okay i'm going to use a knit here and i'm going to call this bdd assertions okay now in this case i'm going to come here and play with another stuff that we have in cyprus and it's pretty well it depends on your on your what project needs and how your project works and also sometimes you need this kind of assertions but i'm going to try to explain you difference here uh i'm gonna we'll use a simple side lock to check the length all right and also the class okay we're gonna merge these two shoots into a single assertion using bbd and you might be wondering how okay i'm gonna delete all this over here all right i'm just gonna be trying to get all the inputs that we have in the html right i'm gonna use the should command and instead of making an immediate an immediate assertion over here for example half text or a half length i'm gonna we'll create an a callback function in this case for example i want to call these inputs because it is going to be referencing every single input that we have in the html so i'm going to use an arrow function here and now i can do different stuff using the inputs that i have right here right so for example i wanna make sure that or i'm gonna expect that the inputs right that i have as a callback function here to have a length of three right and as you can see we're playing with the callback function to make sure that every single or actually this element or this locator has an array of three elements using this another notation over here and as you can see basically we need an inspect and then we actually set the assertion that we want to do and at the same time that i'm checking that it has a length of three i can also make sure that well for example um i don't know let me check um we can check if [Music] for example one of the inputs to have right the class disabled right and there it is i think that this should work and let me check in the in the test runner if it is working or not so we can use this another style of assertion i think that they basically do the same stuff but well it depends on your needs and as you can see here in the assertions uh well um we are checking if if the length is the correct and also if one of the elements has the class disabled that's it now let me see what else we can do here um let's use the bdd assertion style in order to make sure that text is the correct one as we did in this example over here so i'm going to copy this and then i'm going to paste it under the the ptd assertion that we did before right and well as as as always you have we have to click on the input in order to have the text right in this case i want to click on impressive so i'm gonna change the index to one over here right and then um well the text is gonna change a little bit it is gonna say you have selected impressive right so i'm gonna come here i'm gonna change the the text that i wanna we'll try to uh to test right and also well we have to change the syntax over here actually let me delete all of this and well again i'm gonna we'll be i'm gonna be calling this a callback function and i'm gonna name this element as i don't know for example the the response right it sounds good and using this a well syntax again right i need to close this here and then i do the same stuff i'm gonna use an expect i'm gonna play with the response right and then i wanna make sure that it or it should have to have the text and i specify the text that i i'm expecting in this case you have selected impressive then i also can use another expect in order to make sure that their response should include right to include text and then i can specify for example yes again sounds good right you have selected yes i'm not sure i'm saying yes no it is impressive i'm sorry yeah impressive and then um i want to also make a negative assertion in order to make sure that it doesn't include to not include the text for example no okay and if i execute this again hopefully it should be working fine let me see and there it is says if we take a look of the test runner over here you can see that we're making sure the text that we have here right have the expected text you have selected impressive then it contains the text impressive and then it doesn't have the text no right and that's basically the basic examples that i wanted to show you well using cyprus and i hope i hope that it can help you in to understand actually cyprus assertions so thank you very much for watching the whole video if you are here please subscribe and let me know in the comment section below if you have any kind of doubt or there is some improvement that we can do for another video of search in cyprus thank you very much and see you in the next one bye bye

Channel: JoanMedia

Views: 969

Keywords: cypress, javascript, cypress.io, cypress testing, cypress assertions, joanmedia, cypress assert url, cypress assert text, What are assertions in Cypress?, How do you assert two values in Cypress?, Should not in Cypress?, Is visible in Cypress?, exist in cypress, should cypress, and cypress, Implicit Assertions in Cypress, Explicit Assertions in Cypress, explicit assertion, Assertion in Cypress, should command in Cypress, and command in cypress

Id: JvGTA_zKToI

Length: 23min 47sec (1427 seconds)

Published: Sun Jun 27 2021