Cypress Crash Course - Learn full end-2-end testing using Cypress | 2020 Update

so what is going on god damn my name is mehol and welcome back to a brand new course this one is going to be on integration and end-to-end testing with the help of cypress now cypress is a very popular tool which is used in the wild by a lot of people to you know just have integration and end-to-end testing in their code base to add a lot of confidence and strength when they are pushing their code to production now this is a part of code down front and developer learning path and you are probably watching it here now if you have not been following front-end developer learning path i would kind of recommend you to do if you have no idea how you have landed on this course but yeah it's not like a compulsion to follow if you know all your way but if you're somebody who's a new web developer who wants to get into coding who is you know just figuring out stuff and you have just landed here this is the place where you can start you know if you want to become a front-end developer these are the first few steps which you can take and once you're sort of in the middle you can probably once you feel confident for your code testing knowledge to be built up now you can probably jump on this course now this is going to be a thorough course of the of this particular module we're going to be covering react testing library and just later on this is not going to be a part of this one we'll just focus on cyprus in this one and focus how you can test front-end applications end-to-end using this tool because this is a framework agnostic tool that means it's not a you know it's not something which depends on react for example react testing library depends on that so it's pretty much a universal thing you can test websites from react to angular to view to basically static websites to highly dynamic custom websites with cyprus as well we're gonna get more into details of what cyprus is how it works why you would want it in the later videos but this is a start so that is all for this one i'm gonna see you in the next video really soon alrighty everyone welcome back and in this video let's just take a look at what cyprus exactly is why you would want it you know what the hell does this even mean so you see what happens when you are on web when you have written some content you have and you have written some code which publishes a website like this or even codename for example a lot of times you're gonna realize that some things are you know just done and dusted right so you have created this page you have created this button it's done and dusted the next time you will probably change this is gonna be after ages right so you want to make sure that things which are not changing on at least you know all the things as as much as you can get are not breaking because of something unintentional right now maybe i just updated some setting page or some ui in some other place and this button broke right so that is unexpected change i was not able to test it so this is sort of the place where end-to-end testing would come in place where you can write test for features you are definitely sure about that would not break at all and they are finalized and all that stuff but these would be uh the these tests right here which you which will write eventually are going to act as a layer of security that hey if this breaks we'll just stop your deployment that means it will not go to production or staging or whatever so in order to understand it a little bit more in in you know sort of better way we have this official uh video from cyprus itself so let me just go ahead and just pause it at the correct moment let's see where we can find it so you can see right here we're gonna get into this interface later on as well but this sort of window is how cypress does that magic so on the right you're gonna have a sort of your own web page which you're testing and on the left you're going to have a suite of tests which is linked to this particular page now how cyprus works right now is much more interesting than existing technologies like selenium so if you have worked and known selenium you know that there's a sort of a layer which is between the browser and the selenium testing framework which handles all the events and everything cypress on the other hand works in a different but interesting way that cyprus interface actually sits inside your browser right now it sits inside the browser and it performs all these actions using javascript code itself so you have a node process in cyprus which communicates with this particular thing that is fine that is your task runner but at the end of the day your browser your cypress test suite is sitting inside your browser and that is how it is performing all these tests and everything so what does this mean this means that you have much more control over your pages and you know dom in general because you don't have to do a lot of to and fro and you know all that stuff but the only thing which i feel right now is the corn of this and we'll also explore it later on in depth is that you kind of have to like suffer on the native side of things native even side of things what do i mean by that is that clicks and double clicks and all that stuff right now is programmatic in nature which is in javascript but that might have a little bit of different consequence when you're you know working as a real user but that is also fixable you have different ways of like uh having native events now i think the repository one of the coolest repositories there for cyprus which adds functionality for native even so that's that's everything is for the different everything is for like a later time but i just wanted to get into the basics of how cyprus is different from selenium right selenium works on a sort of compatibility layer cypress on the other hand sits inside your browser itself and cyprus as far as i know is supported in all the major browsers now including chrome firefox and edge so let's see no this support is different but yeah i guess it is supported on all the major browsers and all the you know major operating systems as well this is basically an electron sort of interface rate so there's that so yeah that's pretty much it on how cyprus works we're gonna get a deep we're gonna take a deep dive into how everything is working on the code level as well later later on but that's that's pretty much it for this video in the next one we're going to discuss about what you can expect from the scores and the prereqs if there are any well we actually discussed them but still let's just do a formal introduction to that that is all for this one i'm gonna see you in the next video hey everyone welcome back and in this video let's just quickly discuss about the course outcome and the predicts for this particular course for cyprus end-to-end testing and integration testing so again just like i said you are probably here that means i'm sort of expecting you to know at least the terminology and things all the way back right so definitely a big up for html and css basics you should know them trust me it's not hard it's probably like a day's work to get familiar with them javascript will be using a lot of javascript so syntax familiarity would always be appreciated but if you're somebody who's new to javascript you can technically you know just skip javascript but i've been designing this course in mind for people who are front-end developers right so we will be occasionally like you know just going a little bit out of the way to just discuss how things are working so javascript knowledge the you know promises knowledge at least the es6 knowledge is highly recommended although not required but it's highly recommended then version control system is not necessarily needed but if you know about it it's good but cyprus will not really require version control system at least not till the very end where we will discuss github actions i'll come to that later on package managers is not much required you should just know about npm node and this node should be set up on your system um so that's that's a requirement right uh then build tools is not really webpack or getter it's not required it's fine um react view angular knowledge is not required again for this one it's sort of independent but the order is kind of like that again css framework is not required but the basic knowledge is required you know the basics of css and html is required because we will be using a lot of selectors and stuff to get cypress things so yeah that's that's basically it for the predicts about the course outcomes i would say that you would pretty much be able to automate testing any single website any dynamic highly dynamic static websites 100 after this particular course with the best practices and as a bonus i'm going to include the process of having continuous integration and deployment within gitlab not really get github uh ci platform as well i use github all the time for ci cd they have a very generous plan and you know they give you a lot of free time for build minutes so that's pretty cool so we're gonna be integrating cyprus testing in such a way that if your test fails your bill does not succeed so that is the outcome of the course you will be mastered in end-to-end testing and you will know how and what and what all should you test and with the best practices so that is pretty much it for this video i'm gonna see you in the next one really soon hey everyone welcome back and in this video let's just go ahead and quickly set up node i'll just probably give you instructions is this one but because i'm assuming that most of you do have nodejs set up on your system already if you do then you can feel free to skip up this video just mark the video as done from the right and be done with it if not just go to nodejs.org and download by clicking on this button right if you are a windows guy just click on this follow the wizard instructions and you will be done in no time for mac os you can follow the same thing or if you are not on windows or you even if you are on windows and you want a dedicated guide just go to google and write nodejs on mac right if you are on mac for example click on any link i would recommend like the first three link any one of them and just follow along a very simple guide like it uses brew which is absolutely fine to install node it's fine right similarly you can say node.js on ubuntu and a pro tip is that if you can look for digital ocean articles right digitalocean has uh pretty much high quality articles which you which are easy to follow and they have sort of a guideline for writing articles as well i know about it they have a particular section but anyway for digital if you're following this article i would say use nvm um if you can do that as the setup because it's a pretty cool uh way of managing your dependency at least the version of node there's also a volta alternative but i would probably not recommend you getting into it as of now but it's a pretty cool thing for people who want to be like highly experimental but anyway that's pretty much it for this video hopefully you will have note set up automatically by the end of this video i'm hoping you guys can do that if not let me know in the discussions below and let's get into why you were not able to do that that's all for this video i'm gonna see you in the next one so what is going on good damn my name is mahul and welcome to another video in which we'll be taking a look at how we can set up cypress in our project now one thing which you can consider as a you know sort of a a good practice or you know whatever it is i would recommend you guys to have your integration and unit test and end-to-end testing everything in the same folder as the project which you are testing it now it is technically possible to keep cyprus apart from your main project because there is not really any code sharing but still it is a good practice why because when we will be using ci cd to deploy it online automatically that kind of obviously comes in help because you will have the test included in the same repository so it makes it much more easier to run those tests but for the sake of this video at least for some tutorials unless we don't get a website of ours or whatever we're gonna have a dedicated directory just for cyprus so i'm just gonna create a directory here cyprus testing and this is the point like where windows guys and mac guys are linux guys are all same so just follow along with your favorite terminal if you're on windows you can use cmd or you know whatever you like it's a there's a hyper terminal i guess that's pretty cool mac os you know you guys have x or bash whatever you're running and linux obviously has bash with it so just follow along we're going to create a cypress testing directory and once you do that we have to initialize an npm project now here you have two options you can either use yarn as your package manager or you can use nbm now i'm going to go ahead and stick with the popular one that is npm but feel free to use yarn there's not really any difference as such so i'm going to say npm init y which is going to initialize a package.json file right hopefully all of you guys are aware about what this package.json is from the code dams front-end developer learning path this module right we already covered this in very much depth but still if you just want to get a brief overview just watch a couple of videos that you should be fine but for those of you who want a really really 10 second crash course package.json just manages the dependencies and scripts and execution and all that stuff for your project right which is initialized with the help of npm or yarn both these package managers share the same file now once we have this the next step is to install cypress itself now we saw that cyprus is actually a huge browser-like tool something like this right but it also ships as a node module and the reason it ships as a node module is because cyprus also recommends that you should have a individual cypress sort of installation per project is because just like another any other software it also brings in breaking changes right so if you have a global instance of cyprus then that might work for some projects that might not work for others that's always a bad idea right so what i'm going to do next is i'm just going to say npm install cypress and that's it right so this i is just a short form for install feel free to write install the all the way it's it's just one and the same thing it'll take just a couple of seconds why because you can see once it installs sort of the module the module actually downloads cyprus again and what is happening here if you want to know about this is that this in fact is downloading cypress binary right because cypress is a full-fledged browser under its has a full-fledged browser under its control right or at least it has an interface which can launch a browser um completely under its control cypress by default ships with an electron a chromium based browser which is electron okay let's just get let's just uh first of all make sure this gets completed then we'll continue all right so now you can see that once it is installed it saves you some instructions but uh on to where we were before cyprus ships with an electron based browser which is a just a very bare bones version built on top of chromium but you can pretty much use any other browser as well with it if you like right so the next thing which you want to do once you have downloaded cyprus is open it up and cyprus will actually it says that there's this command but what you can do instead of using this command is write npx oops not box npx cypress open and once you hit this command what's gonna happen is internally it's just gonna run the same command you can see the cypress open is same thing but uh it's much cleaner on ice so it'll just open it it might just take a couple of seconds to verify if it can run or not which will obviously pass so once it is done it'll open it now first things first let me see if i can zoom this a little because looks like it's way too small for us to see but [Music] let's see anyway i'll just make sure that i zoom in in the video so let's keep it in the small window because that will be easier for me so anyway you can see that i have a little bit of work going on here already so i'm just gonna log out and you can see that we have a little bit of browser set up here as well because i have been using cypress for my own work so it is probably picking up from the global configuration or something but anyway what you can see is first of all this window right here which you see is the cypress test runner right and what is what has happened if you go back to your terminal if you give it a couple of or maybe it just keeps it like you know in the in the terminal state if you do an ellis you're gonna see we have a cypress folder and interestingly enough you're gonna see that we have four folders inside this particular folder right fixtures integration plugins and support don't worry all of them have their own specific meaning why they are here or what they will be used for we'll be getting into all of them but that is pretty much the the thing which you have to do in order to install cypress for the first time so this is a win this is the first step that is all for this video we're gonna continue in the next one hey damn welcome back and in this video let's just go ahead and explore the cypress testing this runner sort of thing right a little bit so first things first in order to open this you have to say npx cypress open and there are multiple ways of running tests without this runner as well we'll see it all later on don't worry about that but this is sort of the way you're gonna test on local right when you're running it on your local system which has a display and everything so you see we have on the top your interface might be a little different if it is just make sure your cypress testing or whatever folder in which we initialize this is open right hopefully it should be but if not you can just click on that open project or something like that which will appear and you should be good to go so once you are in this project you're going to see that because this is a blank project we have some examples of integration test right here this is in the test tab in the runs we have a sort of an advertisement for cypress dashboard but it's not really you know just an ad it is actually a very good tool for managing all your runs as well inside ci cd and has a very generous free tire as well so that's that's a good thing but anyway moving on to settings which is sort of the interesting part you're gonna see this is the configuration and uh configuration is something which you can override right we're going to learn about this later on with the cypress.json file so this configuration some parameters you can override just like for example let's see we can see that there's this parameter chrome web security which will have you know all sorts of course check or you know just like cyprus cannot work with iframes very well right now so those sort of checks would be can be disabled if you set it to false although i wouldn't recommend that we have this default command timeout which is set to four seconds i'm gonna cover that so all these parameters are sort of tweakable to you right these are available to you then you can see it runs the nodejs version 12.8.3 which is sort of fine you know you don't really have to mess around with this one note 12 is fairly advanced you won't really need a lot of features from note 14 or 15 as of now so that is good one proxy settings we don't really have to get into proxy settings at the moment but it is sort of you know something we might explore later on file opener preferences is uh i mean you won't really need the stuff right and experiments is we're not gonna get into that later on so the crux of this whole thing basically lies in the test suite in the test tab right and let's just go ahead and click on any one of them i'm not actually sure which one it will launch so let's see so you can see that we go to a website called example.cypress.io and it is doing some sort of uh amazing things right automatically you know i'm not even doing anything and it just started running everything so that is pretty cool and that is something we'll be actually showing you i'll be teaching you how you can build something like this and you see it passes all the tests in the test suite 14 pass none failed in 18 seconds pretty cool stuff and it did it all by itself so this is how you're going to run different tests so if you go ahead and open that open this let's go back and let's open this in vs code i'm using vs code feel free to use anything else if you want cypress integration and this thing right so you see all of these are actually you know we were executing this particular file right actions.spec.js so this is the file which was executing and this file actually commanded the browser commanded the cyprus browser in a certain way that hey you have to do this this is this and it all was done like a magic right so that is what this exploring test runner would allow you to do that is you can just select a file which you want to execute you might want to just run all the test as well if you want that's also possible but you can use individual files like this in order to run them right and we're going to cover this interface later on it's it's pretty exciting but can become overwhelming if i just you know just start with everything from the very start so anyway that's pretty much it for the runner overview there's not really a lot you can do right here inside the runner itself but yeah the tool is amazing right the tooling is amazing around it that's all for this one i'm gonna see you in the next video really soon so what is going on everybody welcome back and in this video let's just go ahead and take a look at sort of hello world in cyprus right because why the hell not that's what we do as programmers the first time we do anything so what i'm going to do first of all is i'm going to keep this examples folder right here just for you guys i would also say just keep it why because this will have a lot of snippets which you can you know just just speak around and you know if you want to have a look how or different things are working you can use it right you might learn a thing or two when you're reading these snippets so i'm going to keep it but i need a clean folder to work with so i'm going to start off with a different folder name and i'm just going to say my own test right you can name it anything pretty much and right here i'm going to start by saying this is helloworld.test.js right it does not really has to end with dot test.js but it's fine it's a good convention solve you know you also get the benefit of free icons and everything from vs code if you have that setup so first things first what i'm going to do is from this file itself i'm going to copy this top top line and you might wonder why is that the reason i would do that is c if i start writing describe now you're gonna see that we get this autocomplete and you know all the nice things available uh within the vs code uh typescript sort of autocomplete interface right so let me just go ahead and give this a title real quick and now i'm going to write cypress cy dot you know and we get all this all this autocomplete this is only possible because of this line because this line tells that hey we actually have types defined for this particular file which we'll be using so go ahead and search for this particular types and i just command clicked on this and you can see these are the types for this particular thing if you're not into typescript and if you have no idea like what typescript is and how it works don't really worry about this yet just know that this line is required for providing the nice autocomplete features and functionality all right so what the hell is happening here first of all let's get into that so you're gonna see that all of your tests are going to contain all of the test files are going to contain this describe block right so this is just a convention just you know just just it's not like a it's not a functional code it's not doing anything code wise it's just you know here to organize your tests right once you write describe inside this particular function you can see this is a function right you can also write function here if you want if you're a old school boy but i'm just going to go with arrow function so it's a function and inside this function it's gonna look for certain tests right and how do you you know just group those tests by saying it right so every single block inside the it is gonna be a test now this is important because i'm gonna say this as test one and i'm gonna specify this function right here right and this function right here which you see right here this function is gonna execute and if this function executes properly correctly not really like throwing errors or anything then this test passes otherwise this test fails and if this test fails then you know that means something is wrong if it passes then this test is done right so that's that's all so for example if i do nothing right here and if i just say this is empty test right and if i do nothing let's go to our test runner right here go back a little go back a little with the folder and click on this helloworld.test.js right here you can see pretty much it passes right well some frameworks like just have a behavior that they just failed the empty test but cyprus passes the empty test so you can see there's nothing no command anything at all so obviously the you know the default behavior is to just pass it now let's just go ahead and see if i throw new error oops something like this in this test and if i go ahead inside this particular browser and see you can see that this test fails because there was an error right it does not necessarily have to be a javascript based error as we'll see uh if there's a cypress based error that this element is not found or not clickable all that stuff then also the test will fail and accordingly you have to work right so that's that's that's pretty much it so all right so the hello world sort of equivalent for this one would be to like just visit some website and verify if they have something right so just stick with me here we're gonna cover this later on as well to verify to visit a website with cypress what you have to do is say sai dot cy the cy is just cypress right it's automatically available you don't have to like import it or anything this would be available in the global scope so just say cy.visit and pass in the url for example in this case i'm just gonna visit codedam.com because why not so once we do that you can see it automatically refreshes it and executes the command and i guess it just zooms out automatically every time so that would be a pain to zoom in all the time but you can see i can just refresh the test and it starts the test one number one that is the thing you can see it visits codedown.com and it shows me that hey there were a couple of uh sort of ajax requests as well along the way so i just made them so that that's just fine we don't really need to get into that but this is the idea right so you have visited codedam.com that's it you are not testing anything so that's fine so this is sort of like a hello world sort of thing in cyprus where you have at least some command issued in order to pass the test so yeah that's pretty much it in the next one we're gonna be seeing how you can execute this whole thing but without a browser right and just discuss why that would be helpful as well so that was all for this one i'm gonna see you in the next video so what is going on everybody welcome back and in this video let's just go ahead and see how you can run this test again but without a browser now why the hell would you want to do that the reason you would want to do that is because first of all if you have like you know multiple browser tests and all that stuff if you want to do that on a ci cd environment a continuous integration and deployment environment which is on a remote server which does not have a display then it's a little bit of problem you can you can get a virtual display obviously that is possible with linux variants but the ideal way would be to like somehow be able to do it in a headless way right a headless just means that you do not have the gui with you so that is completely definitely for sure possible with cypress the way you can do that is using npx cypress run if you do this it's just gonna run it and just pass in headless like this right so if you do a run like this just give it a couple of seconds to breathe and you can see right here it says run starting it's starting browser electron in a headless mode right so that means you know electron gui is invisible uh okay i guess it's just starting to run all the action examples spec but anyway you get the idea right so you are able to run headless test without actually spinning up a browser so that's that's basically it for you know this video purpose i wanted to just show you how you can run it i would not want you to run your test headless when you're developing why because it always is great to have a ui and you know just to see all the things happening but this is super useful in an environment like ci cd and don't worry if you want to have you know if you want to have a sort of screenshots and video recordings in that ci cicd environment as well that is also possible don't worry about that but just so you know that headless is uh headless testing is possible with cyprus as well so this is something you should know so that is all for this video i'm gonna see you in the next one so what is going on code damn welcome back and in this video let's just quickly go over through this folder structure which we have right here now we're gonna start with the fixtures one so you see cyprus by default when you install it so it's just gonna create four folders um you know video appeared later on the first four folders were these four so fixtures right here this folder will contain the data the dummy data which you might want to use when you're testing stuff now this is sort of uh you know sometimes what you want is maybe an api is too expensive to call or maybe you don't have access to that particular api from public internet so what you can do is you can move the data from that particular api into a json-like file right here inside this fixtures folder itself and displace it now you might wonder like why fixtures why not you know just place it right here and import it by default well fixtures is because cyprus provides out of the box support for importing and using these files directly instead of you know you importing it manually in your test and just using it so that will work absolutely fine uh you can import your json data all that data stuff inside this fixtures folder and that is all uh fixtures is about right that is all its purposes integration is the important folder for your test and everything because your spec files these this is how it is called test files or spec files i prefer test some people prefer spec it's fine your test files would be living inside this integration folder and you can create multiple folders inside this to categorize your test files but each test file right here just like we discussed will contain a single describe it can contain multiple but i would rather recommend you to contain single and it can have you know multiple tests right so this describes a suite of tests and these are like individual tests which are independent which should be independent from each other right so this is how your integration test would look like then plugins this plugin sort of thing um is something we would probably not use in this particular course but just to tell you what this is it's the it's sort of like a way to extend the functionality of cyprus for example uh you would learn about like it's it's sort of tricky to get oauth that is you know sign in with google or facebook working with cypress because it is a different domain right you change domains you have to open a pop-up all that stuff cyprus wants to just deal with the contents within the single tab window right that is your own website so you can hook in a plug-in uh which sort of uses puppeter under the hood to perform an oauth authentication and gives you back the result so that is sort of the use case of plug-ins right it can extend your functionality of the existing cypress installation and finally we have support this support right here you can think of as you know this commands.js but you can just see that by the looks of it you can see it allows you to create custom commands number one but more generically it allows you to create reusable code right because commands what is command right this commands which will use visit this everything all that stuff is at the end of the day it's a bunch of reusable code right which is written once and you can use it again and again so support is a folder which you can use to have reusable code right if you have a big operation like logging in a user is a bunch of lines you can move that here and then call it again and again when in different test files or different test suites and you should be good to go so this is like an overview of these four folders this videos is gonna be the video demonstration of how your test tests are performing right so this is actually a video recording which you can play back super useful to check what is going wrong in a ci cd environment because you know log can only help you so far if you can actually see in the video what's happening in the whole gui front that really helps so that is pretty much it for this video um in the next one we're going to be starting off by testing code damn website itself now why i'm doing that because first of all you know i i own code damn so that's that should not be a problem and second of all i'm just gonna you know cover a lot of edge cases with codename website itself because you know once we go into the projects and learning aspect of you know the custom terminal and themes and all that stuff you're gonna see a lot of different ways to approach problems so that is pretty much it for this video i'm gonna see you in the next one really soon so what is going on everybody welcome back and in this video let's start with some actual some real testing so that we can get input on how cyprus really works and how it is powerful so first things first i'm gonna obviously say i'm saying that i will be using codedam.com you can use codedum.com for learning but i'll be just you know just demonstrating you with the automated testing as well feel free if you want to do this but just just make sure you're not abusing any sort of system or endpoint um other than that i would say that it would be fairly you know we'll be covering a lot of cases like for example you know clicking on these buttons and if you resize this what you're going to see well the dimensions are different but if we change the viewport which we'll be seeing then this would collapse into a actually a you know complete navbar so we're going to be having a lot of fun testing this website right if this works or not with the with the end-to-end testing so first things first what you have to do is whenever you write a test you have to visit a particular url right because well what's the point of end-to-end testing otherwise so if you comment this out you're gonna see that it just you know sits blank like this so if we let me see if i can just you know merge these two so that it's easier for us to just see things hopefully i can have a little bit of more space here and a little bit of decreased font size and hopefully that is visible to everybody let me see if i can make a little bit of more arrangements not really i don't think this is gonna fit very well but uh anyway okay let's just go ahead and keep it separate why not so here we are back with our basic zoom and now once you have visited a url you're gonna see that you have that particular url visible in the cypress browser window now if you go ahead and take a look into under the hood things what you're going to see is let me just go ahead and zoom into the dev tools a little bit you're going to see that this is your main page that is codedam.com well the urlsayscodedum.com but eventually you're gonna see that this website right here is running inside an iframe right and your cypress your cyprus runner surprise surprisingly is also running on codedam.com so that means this runner right here can inject code inside and get information inside and outside using uh javascript right because they are sharing the same origin so this is why cyprus can sit in the browser and can't do all sorts of work which you would think might be impossible like clicks and all that stuff because cyprus shares the same url same domain name as your current runner right which is embedded inside the iframe so anyway that's that's one thing but the next one is that you gotta test something so i'm gonna name this as basic test and i'm gonna say this one says that we have correct you know title or you know just page title whatever so once i visit this what i want to check is that hey make sure that this text right here is available right maybe this is like a tagline or slogan or whatever so i want to make sure this is available and the way i will do it is i'll say cy that contains and this contains right here is gonna select text based select element based on what the element contains right so in this case we're going to have coding learning and connecting with developers around the world so i'm going to paste this right here save it and we're going to see that you know this test passes you can see the contains right here if you hover over it it says that well we found this and we have a green test let's say if i rename it something like this go back it visits codedam.com but you can see that hey it's looking for you know maybe you can get that test maybe not and finally we did not get it so the editor also says that hey we expected to find this text but we did not we did not find it right so this is how a very simple test and very simple sort of thing will fail now you might ask that hey if you have partial text then what's gonna happen you're gonna see that cyprus by default will allow partial testing right of the text on the screen which is kind of you know the way they have programmed it because libraries like react testing library do not go that by default but anyway this is something you should know that even if you have a partial text match just coding you know coding might be present ten different places but it's just gonna work right so that's that's one thing you should be aware about so the contains method right here is a special one because it search for text inside the element which if you use it on sites basically the whole screen so it's going to search for this text and yeah that's that's basically what contains two right so if i click on you know if i want to get start learning as the element and if i want to do something with it we'll just cover that later on so yep start learning exists that's why it's true otherwise it'll just fail because it will not be able to find this element so contain would fail if it does not find that particular element and it'll just you know just sit right there if it is found so anyway a better way would be and a more explicit way would be to say like should right here and say exist right now this is plain english if you have worked with any js framework before this is basically the syntax from moca library moka or moshe i don't know how how you pronounce that i've never really checked the pronunciation myself but mocha is how i say it so this is basically the syntax of that right under the hood cyprus uses that syntax so you can see now when we use the dot should it converted into an assertion which is pretty much how people are used to code integrated or end-to-end testers tests right however just like i told you even if you do not perform this assert implicitly it means the same thing right because you have to get that element in order to pass this test just like i said if that element is not found it's just gonna fail the test anyway right so it's just waiting for the element to be found to found no time's up and it's failed so that's how it works the contains method we're going to have another method which you might be using very frequently that is the cy.get and we're gonna cover that in the next video but that is all for this one i'm gonna see you in the next video really soon hey everyone welcome back and in this video let's just go ahead and take a look at how we can use cy dot get method which basically is sort of like how contains would work but it is more like a css selector based thing right so if you want to ever get elements based on how you would select elements on the page this is what what you should be using now how do we make use of this for example let me just go ahead and just throw in a div right here right and i'm just gonna probably save it and chances are that there is a div which exists on the page in fact there are 69 days which is nice uh on this page so yeah i mean this is completely a coincidence i did not know that there were so many nice pages but anyway what the deal would get is that you're gonna use any sort of syntax which you will use you can use any sort of syntax inside this particular get thing what do i mean by that maybe let's just go ahead and take a look inside the inspect element and let's search for for example we have the top one as dvd app so you can either go for devash app something like this you're gonna see that it is found in fact oh it is not found because this is like cyprus source code right not the code number so let's just go to oops let's just go to codedown.com and you're going to see inside inspect we have the divided root and dividi underscore underscore next so root for example if you go ahead and see that you're gonna see well we find it right you can throw in an assertion if you want but by default it implicitly uh is exerted anyway right now you can also have something like divided no root should not exist i mean you can just go ahead and add all sorts of tests like this but that won't really make any sense unless you know this has existed sometime in the past so anyway this is how you can use dot get basically put in any selector you know you have done div id root like this you can also do div id root which is like sort of a generic way of targeting attributes and it'll also work that's particular this that is absolutely fine for example now if we go ahead why uh there's this one this this one thing you should be aware about is that try avoiding get on selectors which are brittle what do i mean by that that means the very best example in case of code dam the production build of code dam you can see uses these garbage class values right and how do they use these garbage class values because i'm using something known as css modules on this on this website which converts the websites css class names into garbage's garbage values like these so that there is no collision of styles or style names at least so my test if i just quote them up on how they would work on local they would absolutely fail on any staging or production environment why because the class names are gone so instead of using class names as the as the pretty much the holders of information what you should use is something known as custom attributes now i don't remember if i am actually having yep i'm actually having a couple of them here so you see that on code dams production build even on production build it's absolutely fine to have you know this is a common attribute data test id now anything which you write data star that means you know data start anything which is an html attribute like this is ignored by the browser engine right so it has no specific meaning as such i mean with image for example you can see src is a pretty important attribute right because it decides what what image you have to see but data dash star attributes anything after data dash is pretty much not relevant to html so you can use this data.testid is a common one you can use this to specify a very solid sort of identifier to that particular element and then target it for example let me just give you a very quick example let's say that um this button right here we want to have integration or end-to-end test for this that this button right here should work properly right so in order to select this button i have a bunch of ways to go about the first one is i can just go ahead inside the code i'm just going to say way one is this cy dot content start learning right second way could be to you know use get right here and say probably something like you know async component div and a right so i can probably say async component div a and then i can just you know probably just assert that this contains start learning or you know this has the correct functionality way three however and the recommended way would be to use something known as you know data test id and attribute and then let's say learn button for example and then work with this so you can clearly see the difference between all these three the first one is it brittle or not just just give it a thought that is it like should you go with an approach like this or not well mostly not why because it might be possible that you might change this buttons text later on so maybe it's like from start learning to for example get started right and once you do that in your code your test would fail and if your test would fail you have to update your test as well so if you want your test to fail if you change the button then well it's good enough right for example this test literally says that we have correct page title so i would expect this to fail if the page title that is probably this or maybe this whatever you want page title to be to change right so if it changes then you might want this particular test to fail but if you don't want to fail it i mean if the text is not really a dependency of the test being successful then you should go with something else way too is it brittle or not again this is brittle why because these class names could change and will change at least in this case because we are on a very sort of production build where the class names actually don't have any value at all so again class names should not be used if though those are you know supposed to change or maybe you can't change them later on uh because you know you might be removing or if you are using something like tailwind for example then again you do not have a lot of choice of using class names like this so the best way um for elements which might change their text or css or styles and all that stuff is to use a custom attribute which will not change definitely should because it has no work at all in the in the you know in the markup of the language so for example if we see a data test id we have a menu toggle we have a menu close and that's that's basically it but we should probably have more of the data test id i will probably add more of them in the in the upcoming videos on the main website so that we can test but yeah that that is how you should do it right so that is how you should select it so if i go ahead and if we go ahead and see in the cyprus window we can see we are already running in a small window size so we have a menu toggle sort of thing available to us so let's just go ahead and select this one and right here i'm just going to show you a very quick example that it works data test id this thing and i'm just going to say click right hit save go back and we're gonna see that you know when the test ends it it has the menu open right so if you hover over this state you're gonna see we get a indication here saying don't snapshot which is also interesting we'll come to that later on but just to give you an idea you can sort of travel back in time with cyprus right so once it is done this is the final state of the thing so yeah that's pretty much it for this video in the next one we'll be exploring more about cypress you know we just used a should what is that how you should use assertions and all that stuff in the next one so that's all for this video i'm gonna see you in the next one really soon what is going on everybody welcome back and in this video we're going to be taking a look at cy that is cypress dot should now what that is why we need it all that stuff let's just go ahead and take a look into this one now remember that we will actually discuss the architecture of cypress briefly not really architecture but how this really works in the probably in the advanced section so that this thing right here the thing which should and why we are using it will become absolutely crystal clear when you see that video but for now just stick with me so in cyprus you're gonna see that things are a little different right if you are coming from a javascript world you know that this looks like synchronous code and you know once you have visited you are like immediately getting it you know you're getting the element directly and you're clicking it and you're just continuing with your work later on as well shouldn't you you know sort of await here maybe shouldn't you await wait for the page to load if you're coming from a puppet or world if you have a little bit of idea of javascript how javascript works you know that this could not be synchronous right you cannot really force javascript to wait i mean you can but cyprus wouldn't isn't doing that so how this is working well just like i said we'll cover that in the architecture in the advanced section but what you have to realize is that because the way cyprus is coded you cannot do something like this you cannot do something like this and then try to say element.text equal to hello right you cannot say something like this this is completely garbage for cyprus and we'll come to that in the advanced section but a general rule of thumb is that if you are using let or var or constant basically variable declaration in the top level scope of your test that probably means you're doing something wrong right this is a general rule of thumb this is not how things work in cyprus right you will not really need variables to store data like this in the top level scope so with that being out what is the next thing you have to do is you have to the the topic of this video was the short thing right so you can right now you can just think that c y dot get gets you the element and now in order to exert on that particular element you have to use should right just like we have expect inside mocha for uh well this comes from chai so just like we have expect should right here also helps you exert stuff so should has a bunch of properties right so if you see in the autocomplete you're going to see a lot of things you know b or b above b greater than be less than be called be false be true you know all that stuff so what is all this well think of it in this way for example let's say you want to get let's see this is going to be a little bit ironic because i'm just going to get it with contains but assume that we have got an element right here with us from a selector or whatever and i want to verify that its text is the same thing or not so what i can say is inside this should i can start looking for have text right so you can see that it showed me this particular thing and then i can write the text ready to start start for free something like this and hit save and obviously because you know we are selecting the same text so that actually has the text but you know you can just play around a little if i just say ready to start here hit save we got the same element we selected the same element but in fact it has the same text so this will this will right now this will fail right so if i have ready to start right here you're gonna see that it it is expecting this particular element to just contain ready to start uh but it fails obviously because it has ready to start for free right so this is an exact match right here which you're seeing in the azure so the way should worked is that you take up a property which exists on the element which probably exists as the text value as well it will most likely exist you don't have to worry and you compare it with another value if applicable so should has very basic use cases as well like should exist so radio start should exist that's fine you know you can have a very basic check of everything exists like every basic element exists on the screen so you don't really want to ship a production bill where something is missing by chance right so you are having a title so you can probably say something like data test id title should exist and you know a bunch of other things and if all of all of them pass then you actually move on to the next test right that's an approach that's something you could do technically it's very well feasible and very much possible as well in a production environment but yeah that's that is how uh the should sort of thing would work and you can also use not exist but there are other cases where you will use not exist but that's that's one of the things which you can do then just like we discussed you can have half text you can have b equal i guess b not really equal be above or be or greater than you know you can just play around with the uh with the autocomplete to get it we should have an equal yeah so we have an eq so if you already have text or you know if you have other node or something like that which you can equate with something else then you can use it basically a lot of options but uh yeah that's how you're gonna do it so that's all for this video in the next one buy the next one let me just go ahead and figure out i'll just set up a little bit of more data type data ids here so that we can just play around a little bit little bit more that's all for this video i'm gonna see you in the next video so what is going on everybody my name is mehol and welcome back to another video in which we'll be exploring how we can change the viewport of the original browser now there are a bunch of reasons you want to do that the first one is absolutely clear to you because uh right now we are sort of in a tablet mode on code damn because i don't really want this to appear right now when you are trying to test the desktop version right you can have a separate test suite completely just for mobile based layouts so that's absolutely fine if your code is different so what you can do in order to do that is you can say cy dot viewport right here and right here you have a bunch of options to go about right so first thing is you can make use of as uh you know as a width and height so i can say one two eight zero seven twenty so it's gonna set a very simple one two eight zero seven twenty view of the browser and you can right now you can see that we get a you know typical browser desktop like interface you can also specify a sort of thing a sort of device which you want now this is not obviously going to turn your browser into that device but we'll use that particular device ratio right so what's going to happen now is that you can go ahead and let's say i go with iphone 5 for example hit save go back and you can see our aspect ratio changes to 320 cross 568 right so you don't really manually have to like you know set up mobile device sizes if you're trying to go for responsive things so that's how it works now obviously if you if you're just testing for a pc or a large display like it also has got macbook options that's fine you can go ahead and do that but you can also stick to a 720 display by just setting width and height i personally like this a little bit better because i have control over the exact width and height so that's fine but once we have that you can now see that well you have a different sort of uh view altogether you can go ahead and take a look at something like you know if you want to have a mobile like testing iphone 10 and you can say every l basic element exists on mobile so you can have two test suites now you can see we have two tests now the first one runs on the desktop variant and the second one runs on mobile variant right so pretty cool stuff again just out of the box functionality by cypress so that's how this all works right so we're gonna be starting off with the desktop version so that that's that's what we'll be focusing on so that's all for this video in the next one let's see how we can test more stuff and do cool automation with cypress so what is going on everybody my name is mayhal and welcome back to another video in which we'll be finally starting to mess around a little bit by clicking stuff right because as an end user when you are on a new website the way you really interact with most of the website is by clicking on the stuff right clicking on the links watching content here and there so let's just go ahead and see how we can click stuff we have actually seen it already in a you know a couple of videos back but let's just go ahead and see it again so i'm going to first of all try to get this get started url with me right so i'm going to say cy dot contains get started and you might be right if you're thinking that hey mayhew a little fail if it you know changes and that's exactly what i want to you know i want to have that particular behavior if this has changed if this is text has changed that should fail but yeah we don't really we won't really worry a lot about that stuff uh when we are learning stuff so you can safely ignore that that sort of comes in the best practice section to be honest so once we have that element i'm just going to click it it's as simple as that so we load the page we click on that element and you can see we are on the registration page now right the form is open you can click around it's actually a real page so instead of like uh you know using registration as a thing because we have captcha here and oath login here we're going to be making use of sign in right instead so let's just go ahead and click on sign in and let's see let's make this as you know the web page loads at least right and we can just cut this paste this back remove this remove this we can open a new tab and we can say login page looks good so i can say something like this and see why don't visit something like this even it contains sign in dot click now once we do that the web page looks good loads at least login page looks good as well so once we are on the login page you can go ahead and see that we have if we go ahead inside this input field you can see that we should have a data test id somewhere here right when you close you can see we have a data test id on a little bit of parent of this input field which is fine i mean cyprus is sort of smart enough to detect that here is an input field and we want to type into that so it will type that we'll see how we can type later on but for now what we can do is we can just verify if everything works just according to what we want so we're gonna say login page looks good i just want to make sure that hey this element you know login into your account this sort of thing should exist right so should access so once you have done that test and once you are when you are running these tests right what you can do is you can just throw in an only right here so that you're not really re-running every test in the whole test suite because that's what happening right now right if you change that it just you know just runs that particular test so that's that's a sort of a speed hack for your development thing so the login in your account looks good we can just throw in a check for google goo can speak go with google and go with facebook so go with google should exist and go with facebook should exist as well so yep both of them exist the forgot password you know these things are handy because you don't really want uh any update to mess up with this this sort of flow because these things are easy to you know miss but could have a really bad user impact because if somebody has forgot their password uh they can't really log in right so that's that's a big thing so forgot password should exist and uh let's see register an account registered just an account should also exist right so yeah everything works fine everything looks fine everything exists so that's a good thing so this is how you're gonna write a very basic login page looks good in the next video let's just go ahead and copy this function and verify the login page links work right so all these links you know forgot password register an account and uh yeah that's basically it because these two are just old logins so these should work so we're gonna do that in the next video just verify if their links are correct or not so that is all for this one i'm gonna see you in the next one so what is going on everybody welcome back and in this video let's just go ahead and see how we can verify the links are working fine now obviously you can go ahead and slice up the attribute of this particular thing you know if i just go ahead and click on sign in manually i'm not really testing it right now and if i click on this uh you can sort off you know if you want inside the dom itself you can just slice away this particular href value right here and be done with it but there's a much cleaner and better way and that is to actually click this right because this is your own website you're not really redirected anywhere and you know it's not an expensive call anything like that and it'll work so instead of like slicing them what we can do is i can say hey see why dot contains forward password first of all what i want is to click on that first step right next step is i want to verify whether i'm on the right page or not now in order to do that what we're gonna do is say cy dot url and again you might be thinking you know hey let's just go ahead and get this into current url and then assert somehow that url is equal to something like this but remember again as a general rule of thumb if you are declaring variables in the top scope you are doing something wrong right so this is wrong approach because just like every other thing which cyprus works with cy.url is also chainable that means you have to chain over it in order to verify now the url also has the should thing which most likely you will be using a lot of times so i'm going to say the cy.url this is actually a string right of the actual url you are on right now so i'm going to say this should include remember i'm not saying eq or equal because i'll tell you why i'm using include as i am just saying password reset right and hit save so let's see if this works well obviously not because we are not on the login page so first of all let's click on contains what do we have in here oops sign in right so sign in dot click and once we are on the sign in page that is the login page we click on login and we are seeing there's a problem here we don't really want this line and you can see our test passes right and you can see the new url which you see right here is this particular thing with cypress you know very generously logs for us so this new url right here you can see this is the full url now you can if you want to be extremely strict you can go ahead and do something like this and now you can go ahead and replace this with eq and it will also work just fine but i sort of like try to avoid this because you know if you get the path right chances are your url is also right right because eq would kind of fail on this one because well that's not a valid url right so i just change it to include and that's fine so this is how you can check if you are on the right page which sort of you can do next thing is in order to like you know get back on the page itself just go and say cypress dot go back and you should be back to your sign in page so the steps are here you go to sign in page then you go to password reset page reset page then you finally you finally verify your page url and then you go back that is on the uh sign in page right then again you can run the same test for see why that contains um you know what else we had register an account and when i click on this i should say that cy.url should include register right because obviously if you click on register an account you should be taken to registration page and you can see by the end of the test suite we are also on the registration page and everything looks just beautiful so that is all uh for this particular video how you can test urls of pages let's explore more into cypress there's a lot we can do and yeah that's pretty much it for this video i'm gonna see you in the next one hey everyone welcome back to a brand new section in which we'll be diving a little bit deep into cypress testing you know we have explored some things but not quite there yet so let's just go ahead and explore a little bit more starting off with how you're gonna log into this beautiful beautiful interface of cypress now you have this you know sort of logs going on cyprus is trying to help you as much as it can but you can use this to log additional information if you want for example you can say uh you know cy dot log and that's how you do it actually with using c dot log going to forgot password you know hit save and you can see once this is completed you can see that you get the statement going to forward password just before you check the element and click it right so that's how you can log stuff now one common pitfall you're gonna see people do right here is for example you might be tempted to go ahead and do something like uh you know this uh current url is equal to cy dot url and the problem with this is that this could this code right here i don't really want to get into the way how cyprus works right away but the thing here is that this code does not evaluate immediately right this is a lazy evaluation i mean when cyprus actually runs all of your code none of the actions have actually happened in the main browser window because well they are all asynchronous right that's what we talked about but that's getting into a little bit of more architecture side so this will not work just just so you know uh but if you want to know just stick along we'll be covering to that in the advanced section very very soon i'm very excited to discuss that but yeah this this sort of thing would not work if you want to make it work what you can do is you can just chain it for the moment using something known as then it kind of returns a promise it's not a promise like api you cannot really await on this but it has a then methods which can resolve with the value and you can now say cy.log the current real url is and you can say the value right if i try this same thing without you know the uh you know just like this like we discussed let's see what's the difference so hit save we go ahead and see you can see the current real url is that's what we get when we are doing you know uh cy.log something like this but if we do uh the current real url which is the second statement actually let me just go ahead and make this a little bit more clearer more clear but clearer so you can see the current url is we get this object right here right so this is not usually the way to go about when you're trying to print uh if you really want to print a value of a variable then you can use a dot then so that you wait for it to actually evaluate the promise and you know just complete everything in the chain and then use that but nonetheless one thing you might have seen is that you cannot really use console.log i mean you can but where these console logs would appear is not here they will appear in the main page so if you open developer tools and right here you can see your console logs appear right here right so yeah just make sure of that so yeah that's pretty much it for this particular video that's how you console log beautiful stuff into the beautiful terminal uh the console which cyprus provides by default so that is all for this one i'm gonna see you in the next video very soon so what is going on everybody my name is mayhal and welcome back and in this video let's just see how we can type stuff with cypress and this is gonna be you know used a lot of times so you should know about this so first things first where you have to type right you have to detect where the field you have to type so what i'm going to do is i'm just going to say that this login should work fine although the cypress documentation states that you know just logging into the ui using cyprus is an anti-pattern but we're still going to do that because we want to type stuff and ideally the other way is to just you know use some other way to get an access token or some sort of authentication and then use cypress just for the regular ui testing so it's fine anyway we can just go ahead and copy this thing actually i'm just going to get into the repetition of code as well later on when we learn about before and before each but stick with me so once we are here the next thing i'm going to do is go to the sign up page that is the sign in page and then i'm just gonna let me just throw in an only here real quick and get rid of this one i'm gonna type into the field now first of all just like i said the best way to get the field is using data test id so that's what i've been saying that you know this field right here has a data test id of username now it does not matter what sort of classes and you know all that hierarchy it has got as long as we have data test id with us we are good to go so i'm going to say cy dot contains not really contains not get data test id equal to user name once i have this element what i want to do is type something into this now if i type in you know admin admin and i know that password is the other field you can verify it as well from the dev tools but i know it this one is the password so if i have something like this and if i hit save and if i just let it type you can see by the end of it it is so fast that it just go that goes ahead and types the whole thing right but you would get the idea that this is actually typing uh with the actual uh keyboard not really actual keyboard it's just uh you know manipulating it to show that text but you you get the idea right that's how you type using uh cypress so once you have that in place what we can do is probably click on this login button and if you want you know i think i have a data test id with this as well so there we go we can say cy dot get data test id login dot click and hit save and you can see that one when i click on this and let's see unrecognized expression data test id oops this should be inside square brackets and we should be good to go right so now you can see that it fails obviously because this is a wrong set of combination of password so one thing you could test is that you know login should display correct error right so i can just try a just a dummy sort of thing and it should just fail um although there are better ways of doing this we'll get into that when we learn about mocking the apis but let's stick with this for now so you have an unable to authorize please check username password combination so what i'm going to do is i'm going to say right here i'm going to say cy.contains unable to authorize i can just use that much text for validation no need to write the whole thing should exist right and at the top when we visit the sign in that is before entering username password i can just say should not exist right because we don't really want this to already exist and then just pass right so you can see everything passes why because you can see it did not exist when we started off the registration we filled in the wrong username and password and once we clicked on it you can see that this automatically appeared and it was able to find it right so that's pretty cool stuff so yeah that's that's you know you have done a lot of work in this particular thing itself you have tested that you know the fields are typeable right you have tested the login button works you have tested that if login does not succeed the error message is correct you have tested a bunch of stuff right so that's how you actually proceed with testing these things into and anyway so that is pretty much it for this video i'm gonna see you in the next one with some more awesome cypress goodies we'll finally log into the interface first of all and we're gonna get into all the good stuff from there on that's all for this one i'm gonna see you in the next video so what is going on everybody welcome back and in this video let's just go ahead and log in into our bad boy interface on code damn and let's see and exert a few things on that particular page so i'm just going to go ahead and copy paste this whole thing and i'm just going to say say login should work fine right and do we visit sign in i don't really want to check for this and we want to click on login but not really this and i can just go ahead and replace this with ios def right so what's happening here essentially is that we are now logging in with a dummy account i might probably change the password for this uh by the time you're watching this so this is how this is what happens right so let me just go ahead and put in it only right here hit save and you can see that it very quickly just logged into the whole thing and i would not recommend you to try this like you know a lot of times on the code damn website because you will be rate limited very soon uh but yeah that's that's that's just for an informational purposes or as a matter of fact on any site you don't really own uh because that might hurt their back-ends so anyway once the login works fine what you can do is just sort of verify that hey am i on the right domain or right path that is at least dashboard that's what we can verify right so i can say url dot uh i don't know dot include no should include dashboard right that should be the case right and that's fine so for example let's say if i have changed the user or the username the password is incorrect then this test would fail which means that hey something went wrong we are not on dashboard so you might want to check that out so that's that's how you you would know that something is broken for example your interface or ui is broken or in any way so that's that's how you can check another way would be to you know just write test for dashboard itself so if i have ios dev ios dev here then we can actually check certain elements on the dashboard which we could probably use right like achievements or you know see leaderboards stuff like this so yeah this is like one thing how you can log in into the user and check stuff but i would be shifting this to local storage of the token and right now the way authentication works on code dam is that you get a token inside local storage dot this auth token right here which you see which is basically responsible for authenticating you on the backend service apis as well so what we can do is instead of like login again and again for the sake of this demo i can set this token token on every single request as a local storage so to do to do set this as local storage token for authentication right so this will make sure that we are always authenticated on code dam if you want so how we will do that how we will manipulate local storage that is again something for the next video that's all for this one i'm gonna see you in the next video really soon so what is going on everybody my name is mahul and welcome back to another video in which before actually talking about taking a look at how we can set up local storage variables let's just go ahead and take a look at a important hook sort of thing in cyprus and that is the before and before each so let's see what both of them mean we're going to be focusing on before each in this video not really the before one because that will be covered in advanced section and all the other hooks as well so before each basically is a handy hook which allows you to run a certain piece of code before any or every of these it blocks run right so just like you see that we are repeating the so visit command in every single one of them right and the viewport command as well so what we can do is instead of like you know doing this on every single test we can say that hey let's set it up the first time basic desktop test because you can see that we are doing it before every single test get rid of this and yup that should run before every single test so we can just go ahead and move all this stuff now let's just go ahead and remove this and this is also not necessary right so if i go ahead and if i save this you're going to see well let's just go ahead and remove the only from here go ahead and save this you're going to see that it pretty much works just fine just like before all the tests tests are working and it's all working absolutely fine right uh but this makes your code a little bit organized and much more cleaner and at the same time for example you can say these are basic unauthenticated or authenticated only if i could spell it right next top test right so let's say these are all basic unauthenticated desktop tests and in another file we want you know authenticated desktop test in which in that before each we can not only just set the viewport but also set our local storage which we'll see in the next video but you know you get the idea this this sort of is your bootstrap bootstrapping strapping external things right local storage or cookies or you know viewport or urls all that stuff will go in right here i'm just going to remove that because we are lazy and we'll do everything in the same file but you know you can segregate them if you want so yeah that's that's basically it for the before each hook uh that's all for this video i'm gonna see you in the next one really soon in which will be just like i said looking into local storage and stuff hey everyone welcome back and in this video let's just go ahead and take a look at how you can go ahead and set this token inside the local storage so that we get you know authenticated user on every single test so cyprus by default does not come with a sort of you know like you would say that it's a convenient api but it's not a very hard task anyway so how you have to access the local storage is using the window variable and the way you access window is you gotta get into cy.10 and then you can use window right here so you can say window dot local storage dot you know dot set item if you want to be your api friendly boy and what we have something like underscore underscore auth underscore underscore token as far as i remember and this was the token with us right so that's it so once we go ahead and hit save what you're gonna see is that you can see on the top when the tests are completed basically when the test not did not even start we now have the urls like dashboard settings and logout which means that we are logged in right so that's how you set local storage in cyprus and what you can do is probably instead of like putting this in a before each you can just say hey i just want to set it once because why do why do why do we have to like you know just rewrite local storage again and again in fact what you can do is you can move this viewport also in before because you just need to set it once so if i go ahead and save this guy right here you're gonna see that if i remove this only you're gonna see that the test suite which we run uh well you know obviously this test starts failing because well yeah because we are not logged in anymore and it also fails because we move the viewport because viewport gets reset on every single test so you want to have your viewport inside before each only i forgot that so anyway let's just go ahead and refresh this and this test suite is going to fail because now we are authenticated so we don't have those links so that's tricky so i'm just not going to you know get into the test in this particular file let's just go ahead and create a different file for that one so i'm just going to say auth tests.test.js or maybe like you know instead of doing that authenticated test.js and paste it right here basic authenticated desktop test and we get the local storage ready and that's pretty much it right that's it so let's just throw in an it block should pass and there we go that's pretty much it right and if we go ahead and go back to the test and click on authenticated ones now you're gonna see that well now we're just running the authenticated suite with us so let me just go ahead and move this real quick with this one so yeah that's pretty much it for this video that's how you're gonna set up a little bit of local storage and that's how you're gonna organize your tests as well if you want i'm just going to get rid of this here real quick but that's that's the crux of the video so that's all for this one i'm going to see you in the next video really soon so what is going on everybody my name is mahul and welcome back to another video in which i wanted to tell you our further steps in the course and that will be testing the code damn playground and the reason i wanted this to be you know authenticated session in the very first place is because if you go to let's see dashboard playgrounds and if you click on this html css playground what you're going to see is a very nice although sort of sophisticated interface which consists of all these files and you know this browser window which is an iframe we got a canvas terminal which is running right here so all sorts of stuff there's an editor in between all sorts of stuff is happening right so this would be sort of a perfect place to actually test stuff right maybe i can even discover a couple of bugs or so so let's just go ahead and test this particular interface see if this works or not according to how we expected and uh all that stuff like that so that is all for this one i'm gonna see you in the next video where we'll start testing this bad boy stuff real soon so what is going on everybody welcome back and first of all let's see what elements we can test so let me just go ahead and quickly go to dashboard playgrounds html css and you can see that we get a trying to establish message not connected message so let's just go ahead and first of all take a look at how we can pause stuff right so it just got opened in a new tab oopsie let's just go ahead and just see how we can boss stuff with cyprus because that's gonna be a little bit handy in this one so we should just say should load playground correctly and i'm just gonna say cypress dot visit not viewport visit displayground and i'm just gonna say the moment you visit just pause the stuff or maybe i could just say cyprus dot get div first of all so that we can you know sort of just be sure that there's a div which exists and all that stuff or maybe that's not a best idea but what i wanted to say is the cy.pause method that the cypress.pause so let's just go ahead and run this one instead and you can see right here the execution is paused right so well the browser execution is not paused but the cypress code runner execution is false right so you can see it's it's actually waiting for me to hit this resume button and the moment i do it then it will continue with its execution well it does not have anything yet so that's that's all it will happen that's all it will do there's another method called debug right so this debug right here it's gonna just freeze your js thread but this requires you to open your dev tools now if you have used javascript it's basically the debugger which you see right so you're actually setting a debugger point using cyclist.debug so let me just go ahead and save this here real quick with with debug now and if we see right here you can see it has actually hit a debugger point right so that's pretty cool and now i can just go ahead and see that the state of javascript is completely frozen and i can see the bunch of messages how it looks like when it's trying to first connect the js thread is frozen at the moment so a bunch of things i can see that we have a not connection yet which is again i just realized this is a typo so it should be no connection yet trying to connect we have a trying to establish connection we have a logo we have a connecting button so all that stuff we can we can actually test that that should be the state so i can just say cy dot contains i can say trying to connect connect and i can just say cy dot log checking for checking for sidebar and this is like sidebar should exist you can throw in an assertion if you want kind of looks cool on the console then you can get this connecting thing so you can say cy.log checking bottom bottom left button and you can throw in a see why that contains connecting uh should exist i don't remember if i have a uh you know a data id for this thing or not let's see if i do have looks like yes i do but inside it's basically the whole thing right so i probably have to like throw around a little bit of jquery here so maybe maybe what i can say is cy dot get data test id extern controls the immediate div of this thing that is this particular thing should include or maybe like i want to get the text first now how do i get the text first now you can see that inside should you have should have text or if i just say should include text we have this this stuff ideally i should go with this but what else you could do is you can get the reference of this div itself using the then just like we did earlier and then you can just play around with the inner text or you know html i don't know it's it's it's due to huge so you you know you can just console log this is basically not really in a text this is an actual jquery object so you can use the text method right here and you can say expect text to uh equal you know whatever your text is connecting or whatever so this is one way i'm just telling you all the ways you have the other way which is kind of like recommended i would recommend to do that because that is much more cypressy should uh contain dot text and this should be connecting right connecting there we go so that's our second test right the next one let's see trying to establish connection we want to check that so that's that's again an important thing so let's just say i have cyprus dot get trying to establish esda bli sh connection should also be something which is found right and a final check is that you can say once we have found this i can say cur.log terminal or maybe like i could say playground is initializing and now i want to make sure that playground is in fact initialized so what i can say again is i can say cy dot get the same element trying to establish connection should not exist right because i'm expecting now this might seem weird if you read this that hey let me just go ahead and remove this this code is perfectly fine you know why because this line is expected to be there the moment cyprus testing begins because you know it takes a couple of seconds to get established connection first of all and then cyprus should ideally wait for this element to vanish away right it should not exist so we can just insert a simple console.log statement in between that and we should be good to go let me just go ahead and comment this out and see how this works so if i go ahead and save and close this out and it should ideally run our test again so let's see if i can just force that up so yeah you can see it's waiting for it waiting waiting waiting waiting but something went wrong right you can see expected to find trying to establish okay so it actually did not find it in the first place so let's see i might have yeah i have might have a typo here so i just i can just go with trying to establish why not right so trying to establish we don't see it i think we are way too slow for that i don't know let's see so i'm just gonna throw in a console here i'm gonna set up a debugger point hit save that's how you debug issues with cypress right that's a good way sort of and you would want to throw it a little bit above because it it already just waits for you at that point so at this point try ing to establish connection i don't see what's the problem let's see trying to establish connection we oh i get the problem it should be contains right because that is not a valid selector well well well the more you learn trying to establish connection and there should also be contains there we go hit save close down reload and let it run so you see we get the trying to establish and we you know just make sure that it is not present setting up the challenge is also something so we can say as a second step i can say cy dot contains setting up the challenge that's the second step and the third step is that trying to establish and setting up is not present at all both are not present so i can say this is the third step because you know this one actually just vanishes when the setting of the challenge is existing so i can say should exist and then it should not exist that's that's a pretty you know wild statement if you're somebody who is reading it for the first time so you can see if you see if i refresh this you're going to see we kind of make a close call on this you know the progress bar is about to expire in some cases so what you can do is you can increase the timeout of individual sort of commands as well and we're gonna see that how we can do that in the next video so that is all for this one i'm gonna see you in the next one really soon hey everyone welcome back and in this video let's just go ahead and take a look at how we can set timeouts on individual commands right so if we go ahead and just refresh this test you're gonna see that on every test you have this little blue bar sort of thing you know which is like getting spended up real quick so this is actually this denotes the timeout of your script right by timeout what i mean is that if that hits zero your test would fail that's that's like a default timeout cyprus comes with every single scripting tag so how you can just come around that come about that is you can increase or decrease it if you like so for example just like i told you that this should not exist might take a little bit more depending on you know if there's a little bit more load on the server or maybe your network connection is low any sort of thing so in order to give you a safe buffer after you know having your first argument in contains or as a matter of fact in anything the second argument is you can specify this timeout and this time out is in milliseconds not in seconds so i can say that hey i want this uh sort of uh you know this task to at least uh wait for 10 seconds so this is like 10 seconds right here so i'm gonna hit save and now you're going to see that the bar for that would move much slower than before the default timeout before was four seconds but however if i just change this to one second it's just gonna immediately expire and our test will probably fail right so you can see a test failed because this particular command timed out even though you know functionality wise it's working just fine so you know you get the idea that how you have to work with timeouts in general just increase them beyond a little bit safe point if you know your task might take a little bit longer by default if you go to you know you're going to see this in your settings right here and inside configuration you're going to see the default command timeout is 4000 which is 4 seconds now instead of like overriding the whole you know time or thing for every command you can also specify very granularly like this on a per command basis but i would just recommend you setting a high timeout only for commands which you know would take a lot of time otherwise you will just you know unknowingly increase your total test time if a single command is bound to fail so yeah that's pretty much it on how timeouts are gonna work in cyprus that's all for this video i'm gonna see you in the next one really soon so what is going on everybody welcome back and in this video let's just go ahead and test uh sort of a tricky functionality so what i want to test is that because you know the terminal inside code damn interface and this file explorer are actually linked so if i go ahead and create a file here let's say touch x.js you're going to see that that file actually gets reflected in your ui automatically after a second at max so i want to test this functionality if this works fine or not which is a you know if you think about it it's a lot of code being covered both on front end and back end so how do we do that well well well first things first i want to type something in this command prompt right so i want to get reference to this particular canvas and if we take a look inside here you should see that i should have this data text id extern with us right so first of all i want to get this div and i want to start typing in it and just like i said cyprus is smart enough in most of the cases to figure out what the typable element is inside that particular parent and in this case it would figure it out so let's just go ahead and create uh you know we can create a new test as well but i can just continue right here because i already have a little bit of checks going on so i can just say new file or let's just go ahead and create a new test because that's that's what's the thing is right that's the whole point of having multiple tests so i'm going to throw in an army only right here and i'm just going to say that new file feature works now we visit the url we you know check for sidebar because we have already done these tasks what i like to do is i just like to uh just throw in something like this right so this way we are just waiting for the execution environment to be ready right and once we do that what i want to do is i want to say cy dot get and you can see that we had that data x term whatever it was x term i think yeah so data test id xterm and now i want to pass i want to write something in that but there would be a problem why because you see there's a sort of a server already running but you see that we have the control c option to shut it down so first of all let me just show you what's the problem would be so let's say if i want to add let's say touch test script.js right and if i hit save you're gonna see we run the test just fine trying to establish connection you know all that stuff setting up challenge well you know we're just a little bit early so let's just go ahead and do this and let's see trying to establish connection should exist uh or rather instead of doing this why not just go ahead and throw it a timeout of seven seconds and actually i think i got the error and this was the error actually not the other one but here we have it setting up the challenge setting up the challenge still exists there you know so you can see right here if you were able to see it just wrote this touch typescript.js real quick testscript.js now obviously this did not work because we have a running server we have to press ctrl c in order to quit it so how do you press control c inside cyprus well inside cyprus what you can do is you can make use of special keys in the following way so you say type right here and i can chain type with types i like to keep these special key access controls separate from the text based input so you can say type control c right so whatever you type inside these curly braces are going to be interpreted as special keys right and control obviously is registered as a special key but if i write d e f j you know any sort of combination just a single liter combination right here that will work similarly control tab would work control a would work all that stuff but right now we want control c then we want touch test script but at the end we also want to hit and enter right because that's how you enter the command so i'm going to go ahead and save this and let's see what happens so you're back on the home page trying to establish connection setting up environment all that good stuff and you can see immediately our server gets cancelled and we see a touch testscript.js executing command and right here you can see that desktop.js in fact exist which is pretty pretty cool right now let's say i want to see if i have contains testscript.js with me in the dom exist and uh yeah that's pretty much it that that says that's the test right because if this file exists because that was a completely random file then it's fine i mean you can just spice up things a little bit more if you want by probably saying like you know const file name is math.random and you can see this is like describe dot this is the actual file name right and now you can just say descript that particular file should exist just to remove you know any sort of non-randomness so let's just go ahead and save this and see if this passes our test or not so it runs just like we would expect it creates a file which is a weird file name but we find find that particular span tag inside our dom right so we find the span and right here if we see it says dom snapshot pinned and if i go to console you're going to see this is the span tag which we find and if you just hover over this element this is exactly the span which cyprus finds out right so we see that our element exists in the dom uh in the actual dom which was created from the canvas which is pretty cool stuff right so this test works as expected so yeah guys that's pretty much it how you gonna you know i hope you learned a bunch of new things especially with the typing stuff in this video but that's how you're gonna test files or you know just new files on code now which is sort of specific but i hope you understood how you can use modifier keys how you should go about things how you can use timeout and all that stuff so that is all for this video i'm gonna see you in the next one really soon so what is going on everybody welcome back and in this video let's just go ahead and take a look at how we can check if the rename functionality works now what the rename functionality is is i can just go ahead and right click on this one click on rename enter a new name like style start css or js or whatever click on rename and it'll just take a couple of seconds to update it right so in order to test this again it has a bunch of stuff you have to right click first of all you have to click on this you have to do all sorts of work so how do you do that is with the help of right clicking in cyprus now let's just go ahead and copy paste first of all this test suite and i'm just going to remove only from this one so that we are running only one thing at a time we visit the url again we wait for the challenge to set up uh ideally you can move this to before each if you want right because this is like seems to be repetitive stuff now then we have a file name i'm just slicing it to a little bit less digits then we create that file that's particularly absolutely fine we can also test this then the next thing which i want is i want to say that c y dot contains actually i want the same thing but instead of like should exist i want to say hey uh can we just right click on you right so if i go ahead and say that and it's saved let's see what happens um it loads the editor just like fine and we create the new file it's waiting for the file and you can see that we get that nice little drop down of rename and delete file so i mean that means it's working absolutely fine so once we have right clicked we know that rename file would exist on the dom so i'm just going to say rename file dot click like this and hit save and once you do that i think it might uh be working yep so it's working fine so once we had into this particular interface we now want to type into this particular thing right so the next thing is let's just take a look at if we have anything related to test id and you can see we do have rename file folder available with us so the next thing i'm just going to say is cy dot get data test id is rename file folder and type you know something else so i want to say let's say i want to go with the same name but i want to say that this is new underscore this thing or maybe like new underscore that's it dot this dot js right let's just go ahead and hit save and that would actually create this but what i want to test is that hey now this particular thing right here should not exist right because we have just renamed it so it should not exist and what should exist in fact is the new name should exist right okay so let's see uh we set up the challenge we start the server we create the new file we rename it but we are obviously not clicking rename file yet so let's do that first of all once we type in we're gonna say contains rename file dot click we missed that hit save let's try it one more time and let's see so it's working it's working fine everything is being automated we are not finding the rename file button for some reason because this element is not visible okay so it looks like cyprus is saying that hey somehow the element is not visible now this might be because of i don't know that should probably not happen let's try with the test id maybe it's picking up some other uh element so instead of contains i'm just gonna say that's why you know test ids like these are helpful because cyprus might be picking up some other element at this point rename button.click let's see well you can technically go ahead and debug that as well but i did not just spend a lot of time into that yet so we create a new file yep that was a bug without the file and you can see basically the test passes right because you see all sort of work is done so it's kind of like cool right so you know that if this is working that means your code is not broken that means you know this functionality is working so you can very confident confidently ship your changes uh so that's that's like one reason i love cyprus so much and in general testing so much because it allows you to ship code with such confidence so yeah that's that's pretty much it you can just go back a little bit in time as well if you want to see how the things are working you know you can just hover over things and it'll just show you that's that's the crux of how you're gonna test stuff with cyprus right so that's all for this video i'm gonna see you in the next one really soon hey guys thank you so much if you have been watching this far along and if you are i'm pretty sure you are much more interested in getting a deep dive into cyprus even more like we'll just complete the playground testing and all that stuff with cypress but there's gonna be an advanced section as well where we discuss some of the advanced sides of cypress as well as deploying it on github as a ci cd tool so if you want to get access to the full course you can use codam.com to watch this complete course you have to go to learning paths front end developer and just click on your cypress right here inside code testing otherwise you can find all the relevant links in the description below the rest of the course is a lead subscription based course which you can enroll for 13 dollars a month or 999 rupees a month which is probably about a uni course but you get the features and you get the availa availability of all the courses right here which are listed you know all these particular courses get unlocked all these learning paths well the ones which are available as of now get unlocked all the practice projects get unlocked and all the playgrounds get unlocked for a price of about a udemy course right so if you want to support the platform if you want to support uh the whole initiative of code damn it would mean a world to me if you can go ahead and continue this course on goddamn.com first of all using the lead subscription so you can again find all the relevant links in the description below that is all for this particular video hopefully you enjoyed it if you did please leave a comment and like the video that really helps in order to reach out to more people so that is all i'm gonna see you in the next one on codedam.com

Channel: codedamn

Views: 47,155

Rating: 4.9004331 out of 5

Keywords:

Id: OIAzwr-_jhY

Length: 117min 11sec (7031 seconds)

Published: Sun Nov 29 2020