Angular 5 e2e Testing with Protractor Tutorial

hey guys so today we're gonna cover end-to-end testing the aim angular 5 basically any version after angular 2 would be good to four or five and five plus whichever in the previous tutorial I have covered the unit testing in angular and if you haven't looked at it I have a tutorial play the link here but this tutorial I'm going to focus on specifically end-to-end testing and the difference between the unit testing and end-to-end testing is that unit testing you focus on individual functions how they behave or individual component on how they behave compared to end-to-end testing where you want to look at the overall application UI as a whole and how a user will interact with your application so when they click on something what would happen where would they go make sure that everything is fine on the page and it basically checks the overall workflow of your application so that's what we're gonna focus today and welcome to tech see tutorials [Music] all right to start with what I'm gonna do is I already have a project created for a previous tutorial on how routing works in angular so I'm just gonna use that project to add some unit tests so I don't have to build the functionality and do some testing you can actually get this project from my github site and I'll provide a link in the description basically you can clone the project and using git clone and then you can use this path and then do and be an install and then you'll have the project raining so you'll have something like this and inside the project the first folder would be the e2e this is this is our end-to-end test this of what we're gonna write are in too intense so let me first compile this project and we're going to look at what it is and how can we add some end-to-end tests here so if I do ng surf - - open to see what it looks like all right it looks something like this so by default it goes to the home page and it has some text called home page and there's a two tabs if I click on here it will go to about and the page loads and tests simply says about and if I click on a user it would have a user list and it would have this two buttons and if I click on John I would get a user page for that name and if I click on a Peter I would get that we're gonna start from here by default when you create a project using angular CLI you will have some tests and that is already built in and it would be for testing the Welcome app now this test won't work because you know you have you probably have changed the code already so the test you're supposed to fail the first thing what you need to do is I run the test to see if it's failing first so I'm gonna say ng e2e and that is how you run the time the the tests so first it builds a test and then unlike unit tests where you would get a page with all the results and to end tests simply because it's a browser base so for each test it would open the the route you know run the test and it would exit the browser and run the second test and exit the browser so you won't see that the browser interaction life you just see there the test results actually so it opens a browser and then it you would see the fail test which is supposed to fail all right so now let's systematically look at how it works so AB dot e - e - back dot TS that's our main test page and there is another page called AB dot P o dot TS so this I would call page object page and the reason we have page object is because let's say on the page you have a sub button right and you can be calling this button multiple times so in the test you don't want to you can only get it by you know some ID or some class you know using some CSS and you don't want to get it every time you want to do something right so what you would do is you would define all those stuffs into a page object and then use it so write it once and then use it multiple times in your test for example here you would see this navigate to this default route right whenever you want to navigate to this route all you have to do is call this navigate to and it would go to this round the second function here in the page object is called get a paragraph text now this quite abstract but basically what it does it's it returns tag called approved and inside you would have some h1 tag and it's trying to get the the text inside that element and if I look at the app the test itself it has written this task called ng5 create route app it's importing this page object page that we just looked at and before it runs each test it has to initialize a page object so I would have I would get this page so I can access all the functions inside this page object now the first test is says should display welcome page which was this welcome to am page right so first thing it needs to do is page to navigate to which would navigate your default route so as I said there is a way to actually pause the test so we can look at what happens so what I'll do if I go to page ab dot p or TS it's importing a browser by an element from protractor so I'm just gonna copy all of this and in my app dot e to e I'm just gonna paste it so I have this browser by an element available inside the my test and right after this page start navigate to I'm going to say browser dot pause which means when it runs a test at this line it would just pause so let's save this I'm going to now we execute the test so it passed here and so what I can do now is look at what's the this element is and I can change my test accordingly so this is a home page and it's inside app home and h2 and it's called home page so what I'm gonna do is here in my page object instead of a proved I am going to change this to app home and this should be h2 okay and now I'm just gonna keep this get paragraph text and here it should be equal to home page and save and I'm just gonna comment out the browser not pause so next time it won't pause and then let's run it again alright so this time it actually passed the test as you can see this green message saying should display welcome message actually I should say should display homepage so because as we change here we should change the name of the test as well so I'm just going to change that so the next thing we're gonna we I want to do is remember they were like a three buttons on the top and one of them was about so I am going to write a test for that so for that I'm just gonna say it should display about but also I need to navigate to the main page and then it should say expect the about button right but I need to access I need to create a page object for the about button so if I go in a page object I can say get about button and they should return me an element so let's say return element and as you can see so the element is provided by the protractor and I would say by CSS and now what this is I don't know what this is so I need to look at the page itself first and so it has a signature called router link equal to about so I can use this to access this element obviously it has to be unique so I can do this since it's an attribute I can access it like this so this would get me the apartment X and I can use this now in my test here so I can say expect page start about button and you need to execute that and then also we need to remember the page object you can get the text here right so instead of getting it here I'm just gonna type it here get text I think that's the right syntax yeah and this should be two equal to what should it be equal to so here I have about so a capital I should say about let's see if this works oh I'm going to run the test again all right so both tests have been passed alright so the next test I want to write is now that we have the we know that there is a button there and we already verify now we want to click on the button to actually see if it's wrong to that about page or not so for that I'm just gonna copy paste as here's our another right every time but I'll be always careful when you copy and paste so here I would say should brow to about the page okay so for that I would have to first go to the default route the second thing I want to do is I already have this about button so what I can do here is this and then I can actually click on it so there is an event called click and once I do that it should go to about page so for that put a pause here to see if actually really goes to the about page and then we can right this part yes so it does go to this about page now let's inspect it - so we need to verify this right so I'm going to inspect it here ok the signature for this is app about + h2 so that's what we're looking for and again once you pause it you can continue if I just see here it will continue to the next or if I do dot exit and that would exit the whole thing all right so I would need to create a page object for this I should call it get about text this would return element by dot CSS and remember it was app - about an h2 right and dot get text so it's similar to this guy here and so now I can use this in my test so here I don't need the browser doc pause and instead of this I can say page dot get about text NSF function which returns the element and - equal and this should be it's supposed to be about page okay so now let's run it again alright so now I have all three tests passing so it's it's actually pretty simple alright so I hope you learned something from this Detroit if you did please like subscribe and provide a nice comment and you can support this channel by clicking on the button on patreon and you can also translate this video in your language provide the detail in the description thank you

Channel: techsith

Views: 64,913

Rating: 4.8695164 out of 5

Keywords: angular 4, angular 5, angular 2, angular 2018, Angular tutorials, angular lessons, e2e testing, angular unit tests, protractor, selenium, techsith.com, techsith, e2e

Id: WROmnhRbH6k

Length: 14min 29sec (869 seconds)

Published: Mon Jan 22 2018