Angular Cypress: Learn How To Install And Run E2E Tests

hello everybody welcome to another video from code shots with profanize in this video we will see how to install cypress in an angular 12 application and we will also see how to use it in a simple user flow so let's get started the application that we will use is an angular web application and actually has been upgraded from an older version let's see the packagation and as we can see we have the version 12 here before we start installing cypress the flow that we're going to follow is the following let's go to the browser we have this simple application where we have the username and the password field we use for this example video tiger ui and we have this simple form and as soon as we fill anything here in the username and anything in the type of password if i click login we will go to the dashboard as we can see here which is activated apart from the dashboard this is the first user flow that we will try to cover we also have another flow which has to do with the products but again the flow will be like i'm going to login and after logging in i'm going to visit the products page so two different flows the first one from login to dashboard and then from login to products to install cypress we will use the ng add at cypress slash schematic in the question would you like to proceed we answer yes and in the next question would you like the default nge2e command to use cypress yes definitely so yes here as well let's go to the explorer and see what kind of installation these packets did in the packaging we have e2e with nze and of course this has to do with cypress we have cypress open and cypress run the differences are that with cyprus open it opens an electron application and from this application we can see all the end-to-end test scripts that we have in our application later on we'll see an example of course and the other one the snipers run the difference is that it runs all the end-to-end tests in the terminal using an electron browser by default an electron browser apart from these we can see that we have now the cyber schematic here we have the cypress json configuration we have the integration folder support file videos folder screenshots plugins fixtures and base url we're going to cover all the directories now but this one is important the base url this means that our application runs in localhost in port 4200 if later on we decide to change the default port and instead of 4200 to be something else we'll have to update this base url as well and now let's go to the cypress we have fixtures integration plugins screenshots support videos and the ts configuration file in the integration file we have by default expect yes which is a default test and let's see what we have in this file in the describe we are actually describing what this test is all about we give a friendly name like we have in this one my first test and this actually is a test suite under this test suite we can have more than one tests its test is denoted with this it each test now has a different name which describes what each test is responsible for the first one says that it visits the initial project page nice now let's see what these three lines are all about at first and since we are working with cyprus the keyword for cyprus is cy psi from cyprus the first method visit is self-explanatory and it will visit a specific url and this one particularly is the root one and you might wondering root what does that mean if you remember previously we said about the base url which was localhost 4200. so we're visiting the root page the second line make sure that this page the root one has a text with the value welcome and the third line should make sure that contains also the sandbox up is running text in any case we can have under the test suite as many tests as we like and it's important to have at least one expectation at each test without any further delay let's go to the packaging and run this command cyprus open npm run and i will paste cypress open here this is the electron that we can see and it's important to check the following that here we have a list of tests and currently we have only one test that's why we have the spec yes unfortunately i cannot zoom in this window apart from this list with test we also have here a list of browsers the browser that the test are going to run and if i click we can see the way that we have chrome 921 version firefox and electron and if we click this one the spec.ts it will open the chrome browser and it will start running the test let's now spend some time here and understand what we see this one my first test is let's go to the vs code is the name of the suite my first test if we expand it we can see that this is the first test visit the initial project page and actually the cypress what it does is that it keeps a snapshot for its executed step and if we click here we can see that this is the route and then it tries to check whether the welcome string is contained into the into this page and of course it does not if we go further down we can see the error also the timeout is hiding after 4 seconds expected to find content welcome but never did and the good thing here is that we have also this link which if we click it it will open vs code and it will focus directly in the place that we have in the line that we have the error nice very good one now let's try to write our first end-to-end test at first we will try to capture this flow to type anything here in the user name type anything in the password click login and redirected to dashboard this is what we're trying to do to start with i will go to the cypress directory i will copy the spec ts and i will name it plugin.spec.ts and the name of the suit will be login let's start with the first test and it will be like it should not login if the form is invalid because this is also a very valid scenario right and we should capture it it should not login if the form is invalid visiting the root and then i want to do the following i want to make sure that the url should includes the login this is the first step that are going to test before we move further let's go here and as we can see immediately in the running application in the running electron application we see now the login spec and if we click this we can see the first test visit the root page and then make sure that the url includes the login which it does as we can see here now let's continue the next step for this test is to type a value in the username input field to make this happen we should locate the input field we have many options to do so a practice that i really like when i have to write selectors for form fields like this one is to use the form control name directive as such we will go into our test and we will type psi from cyprus get in order to provide our selector there and i got now to create the selector for an attribute this is the form control name after right form control name and i have now to provide the name what is the name of this form control name let's go to the login component.html it's username this means that i'm going to get the form control name with value user name and then i want to type a value and this will be profanise nice the next step is to click the button sauce hi get i want just to find button no more than this i have just one button so it's okay to do it like this and click this button and definitely every step should have an expectation and the expectation for this one is that cyprus url should not include what the dashboard and why dashboard the flow is the following that as soon as we have a valid form if we click the submit button then it will move to the dashboard page if the form is not valid i want to remain the same page and in any case i should not see the dashboard let's go to the electron app click the login and see it running nice nice so the first test it seems that it's green so not only again if the form is invalid it seems that it's okay and as we said cyprus has the time travel and captures every executed step if i click now here in the visit we can see that we no longer have here the user name the second step is to make sure that we have the login and then we're getting the form control name and we can see that it's highlighted on the right side type the value for funnies get the button this one is highlighted as well click it and make sure that the url does not include the dashboard nice so this is the first test now let's copy this i will duplicate and i will create the second step it should login if the form is valid and this is sort of the same but to make this valid we need to provide also the password right let's go to the login component.html similarly to the form control name username we have also the form control name password so let's go to our test and paste here password and i will provide my secret password i will then click the button and as said we definitely need to have an expectation so site url should include dashboard this should be a valid one let's go to the electron application stop the current execution and again click the login see it running the first one is valid and the second one is valid let's open this should login if the form is valid and as we can see we have all the steps if for any reason we have any problem with our running test and we're going to inspect it further we can do the following before you click for example i want to pause the execution what this will do it will pause and it won't move on unless we click here the resume button and if i click the resume the flow will continue something very important that i would like to capture here is that every test should be isolated and this means that before we run any test we should make sure that the user is logged in this means that these lines should be repeated again and again and of course this is not a very good approach right so what we can do is the following i will open the explorer and i will go to the commands support commands similar to the page object that the protractor has we have here the commands from cypress which are functions that can be used from any end-to-end test throughout the application so let's start and do the following i will remove the comment from here i don't want to have a custom command as a name but i'm going to have like a login and the argument would be a username of type string and a password of type string and this again is going to be login i will remove this comment and this will be the login and we have to replace this as well let's remove this and we definitely need to have this plug in here and login here nice the missing part now is that we need to implement this login function and to do so let me have side by side the commands and this test i will cut these lines from here and i will paste them into this function and of course i will replace the username with profanize and password nice what we can do now is that instead of having all these lines there i can be like psy from cyprus.login and they're going to provide the username profanize and the password to be like a password here let's go to the electron application stop the current executed one click again login and we have the error that site login is not a function why is this of course we miss something as soon as we have the commands we definitely need to make the commands available into the index file and the reason is that we can have many different command files here we can have a separation of concerns and be like i'm going to have my commands for my product page i want to have my commands for my users page and so on so forth and every command file should be listed in the index file here let's close this file and go back to the electron stop the current executed and click login again and say it running the first one should definitely be green and we should see the second one with yeah it's green and as we can see with fewer lines we managed to do the same thing now let's repeat this test and instead of login i will have it for products so product spec dot yes and this one should be products and the flow will be very simple should login and navigate to products page i'm going to have login and then what i'm going to do is the following i want to apply a selector here and grab this menu item i will inspect this and i will search for app navigation and as we can see we have two different delays the first allies for dashboard and the second li item is for the products so from app navigation i'm going to grab the second ally from cyprus get the app navigation the li and i know that this one is going to return a list of items and for this reason i want to grab the second one and click it and as soon as we do this i want the cypress url should include either include or includes the same product now let's go again to the electric application stop the current executed one and what we can see that we have loginspec and the product spec i will click this and we will see in the browser that everything worked well we visited the root and then we make sure that we have the login we found out the form control name username and then the form control name password we found out the button and we clicked the button and we also found the navigation as we can see here and this has two different items and we set find the second one click it and make sure that the url includes the products nice very good one so let's stop this and this is how we create end-to-end tests using cypress and the last thing to do is the following that let's run the other one the other command instead of npm run cyprus open i will give the tag with the cypress run this will run all the end-to-end tests in the terminal headlessly using the electron browser and let's see the report we have a failure and the reason is that the default one the spec.ts had an error there which is totally fine the login spec had two tests two passing the product spec had one test and one passing awesome and what else we can do with fireplace that we can have recorded videos and captured screenshots whenever we have a failed test and we also can change the default browser the headless browser instead of being electron we can have it like firefox or we have chrome stay tuned in the next video to see more about cypress so that was it thanks for watching

Channel: Code Shots With Profanis

Views: 1,361

Rating: 5 out of 5

Keywords: Angular cypress, angular, angular 12 new features, angular course, angular e2e tests, angular training, angular tutorial, angular tutorial for beginners, cypress, e2e, e2e tests, e2e tests in reactive forms, e2e using angular and cypress, learn angular, reactive forms

Id: wGiU4qdFL6U

Length: 21min 38sec (1298 seconds)

Published: Sat Jun 05 2021