Automation Testing (UI + API) with TestCafe 2.0+

we have a lot of test frameworks in the market such as selenium webdriver cypress playwright a webdriver io and so on and one of my favorites is testcafe and today i want to explain how you can construct a kind of a framework a small framework and we're gonna review how you can install this cafe how you can start working with tescafe step by step how to implement the page object model how to use the new feature based url how you can construct a configuration file how to debug your test how to create the screenshots how to use the concurrency functionality that they have how to run your scripts using headless mode emulate mobile devices and at the end so i want you to stay until the end because you're gonna see also that now test cafe has an api testing feature that is going to help you with well sending requests to an api i also want to tell you that the examples that we're gonna reproduce here are just to understand how to use task caffe if you are going to handle for example a login password you need to well look for a workaround because it is not safe to expose the password as simple as just sending the data you need to encrypt it or hide from the execution recordings right so i just want to say that it is just for demonstration purposes right so let's go ahead and continue thank you very much you guys to stay and watch this video let's just start reviewing the the cafe landing page to see what they have to offer to us right so as you can see here they are telling us that it is an end-to-end testing simplified framework with that doesn't require web drivers okay there there is no manual timeouts needed it is going to have an automatic waiting system also we can use cross browser testing out of the box with the simple commands all right and here we have some reasons of why people love tennis cafe the first one is that it is pretty easy to set up in one minute you're gonna have it totally running all right also it is telling us that it has a clean code feature because uh it is going to freeze you from or test caffe frees you from to need to insert manual timeouts and use a cumbersome boilerplate boilerplate expressions you'll spend less time tracking down annoying issues and more time doing what mattered most i agree um free and open source all right so it means that it is available for free and distributed under the mit license all right and we are committed to our open source community and our actively extending test cafe capabilities that is great and as you can see here uh we here we have a comparison between the task of a script which is pretty clear and understandable and then we have here um well a selenium javascript a script with a all the steps and and the things that we have to do all right so with this set i think that we can start also let me show you this feature because test cafe well works in almost every browser that matters and and we can use it on chrome firefox safari a edge internet explorer i this is edge right let me see the icon yeah it is edge internet explorer opera and here we have like a couple of providers like browser stack and i'm not sure if this is lambda or yeah i'm not sure this provider over here right deploy without fear it is cicd ready if this cafe integrates with all popular cicd solutions that is great we have concurrent test runs we're gonna take a look of that in a few seconds and if if something goes wrong use the build in the bug mode to pin a point the source of your frustration we're going to see how to how we can debug the code all right they also offer a test cafe studio ide which is a record and play software that they sell it is really very interesting one and if you're interested just come here and check the prices and what the the product has to offer i think that i have done a review of this pro a product in the past so if you want to check for junk media test cafe studio you're going to see a kind of an introduction there right so let's start installing test cafe in our computer all right let's go ahead and do it first a requirement here in our computer is to install nodejs all right you have to come here to nodejs.org and you have to download the version for your operating system it depends if it is on windows or mac os or linux right so in my case uh if if i had to download it i'll i'll download the lts version which is the the stable one for the moment that i'm recording the video of course this version is going to be um a different one at the moment that you are downloading the the note it is totally okay just download the lts version right now as soon as you have done that um you have to open the visual studio code you have to reference a folder and then you can access the terminal all right how you can access the terminal pretty simple you have to come here and click on these items at the bottom of of the id right and or the text editor and here you can access the terminal i recommend you to use um the command prompt for this exercise just to make sure that everything is going to work fine okay so you can check that a note is installed correctly and the node package manager as well using npm a dash version if i am not wrong and it is going to return the version that i have right now installed in my computer okay once that i have done this the first thing that i have to do is install or create a package.json file using the command npm init okay and then it is going to request you for a package name i'm going to leave it as it is a version as well if you want to specify one a description an entry point the test command git repository keywords author license and if everything is okay you can just click on enter and it is going to be automatically generated for you okay why is this important because we need to install test cafe and this package.json is going to be the file where you're going to save the dependencies okay so the first thing that i have to do is run a command that i have over here let me copy it for you which is mpmi safe dev test cafe okay this is gonna save the test cafe dependency in our project if i run this we're gonna see that in the package.json we're gonna have a new dependency a over here in the package.json file let me just wait for a few seconds until it is done and you're gonna see that it is gonna work perfectly fine also you're gonna see that in my root directory we're gonna have a node modules folder displayed okay so this is the changes that i'm expecting to have as soon as this process ends right so let's just wait for a few seconds and i also want to tell you that i recommend you to install globally test cafe with this other command i'll be opening another um command prompt here all right and you can run the npm install g test cafe all right just to have it installed globally in your computer it is a thing that i recommend you as well okay i want to start um installing or well creating my first a test okay how i can do it well it is going to be pretty simple i have to come here to new file but i need to create a folder right this is gonna be tests in the tests folder i need to create a new file and the new file is going to be logging that js file and what to start working with a test cafe we need to use the first thing which is a fixture all right the fixture is uh is going to represent a group of tests or a kind of a test suite so we can call the the picture with the with a name we can call this for example login suite okay and then i want to um use a command here which is the page command okay and i'll be sending uh the the website that i'll be using for this video which is going to be the sauce demo website which is this one right there is now we are specifying that this particular suite is going to be running or is going to be trying to access the website southdemo.com that is great now that i have this information i need to use the test command here and well this is going to be for declared different tests in your suite okay the first parameter is going to be the name i want to call this valid looking right and um the second parameter here in the function a sync function right and as parameter we're gonna be sending a t as parameter let me explain you what is this right and i'm gonna open the function here and now we are accessing the t which is the test controller um kind of command to access right the api commands that this cafe offered to us right um it exposes the test api methods so we can interact and and do the different actions and assertions that we need that's basically what is happening here and that's the meaning of the t all right so now that i have this i need to access the or use the await command right since we're using async weight as as as the way of handling asynchronous code here all right so we need to use the this syntax all right so um we're gonna be accessing the test controller again right and i just have to start doing actions and i have a lot of them you can see them in the in the visual studio code we have expect browser click close window debug delete cookies get cookies offer and so on resize window scroll scroll by select text and so on we have a lot of methods that's that's why i was telling you that the test controller exposed the test cafe api to perform different actions right so in my case i want to well create a docking test script to make sure that if i enter an username and a password here i click on login and if i enter the correct user name standard user and the correct password secret sauce and if i click on the login here i am going to have this title products all right so let me explain you how we can achieve this i need to find the element username here inspecting the the chrome with the chromedev tools the html i have a video already inspecting and exploring how you can find elements in a lot of ways using xbot and css selectors if you want to check it out you just have to look for junk media css selectors or your media expert okay and here in the input you can see that it has an id username right so i'm going to copy the id and i'll go back to the framework and here i'll be using the command type text okay the first parameter is going to be username but this is an id so i need to specify a what a numeric symbol at the beginning of the of the text to find the selector or the element with the id username all right now that i have this i need to well send what i want to type right in this particular case if you remember the value to access the login correctly is a standard user right so i'm going to copy this i'll be pasting that over here and then i need to do the same stuff for the password right do you agree all right if you want to support this channel please um well hit the like button and subscribe as you can see the password input has the id password as well so i have to use the numeric symbol at the beginning then the id name or the value and then as a second parameter i have to send the password that i need to access to access the logging website right all right now that i have this i also need to perform a click right in this button so let me check the id for this button which is login button and i can do that click probably click and as parameter i just have to send the id login button there it is it should work but now i want to make sure that as soon as i enter correctly to the website over here okay and i enter the secret sauce and i'll try to get the product's title here to make sure that it has the text displayed in the ui so this is an expand as you can see here it has the class title and the word product so i want to use the the class over here and i'll have to do the following stuff in order to make an assertion you need to follow the structure expect but i don't need the semicolon here i'm sorry guys expect and then inside i can access an element using the selector um constant that is required from the test cafe library all right so inside of my selector i can look for the wall the class title right you remember this has the class title all right and i want to access what the selector or the element has inside the value the text how i can do it using the command inner text there it is and then i can use the equal right because this is the structure of an assertion the expect is the actual value within this particular case is going to be what i'm getting from the ui right and then in the equal i'll be sending what i am expecting which is products right you can see the product's worth over here this is the the thing that i'm expecting the expected value and i just want to make sure that this is equal to what i have from the from the website okay and that's it i think that i can run this particular test pretty easy using the command test cafe i can specify the web browser that i want to use in my case i want to use chrome and then i have to specify where i have located the test okay so i'm gonna close the the node modules here because it is making a lot of noise and what my test is inside of the tests folder right and i just have to access login.js and you're going to see that it is going to start a chrome execution here let me see it was open in my other window and you can see that it is going to start well the the sauce demo website right it's going to start typing and making sure that the product style is displayed in the ui it is waiting until everything is loaded and you can see that the suite is working correctly how i can prove you that this is working and it is testing the title if i change this to test right you're gonna notice that we're gonna have an assertion error and obviously the assertion or the test is working correctly or not okay let me just bring back the browser here okay there it is you can see that now it is not going to look the product's title and we're going to have an assertion error and it is going to be displayed in the console log because the actual result right it was expecting products but it it found no it was expecting test but was found products so we have an issue right of course this is just on purpose to make sure that the assertion is working correctly all right guys um let's continue with the next part of the video which is going to be if i am not wrong about um how you can use a base url let me show you that and you're gonna see that this is going to be amazing okay okay guys let's imagine that you want to have a centralized url for your test with all right why is this important because sometimes your tests might need to be redirected to another test environment right and let's imagine that you have a lot of test suites and you have to come manually and change every single one right so in this particular case i want to explain you how you can use a relative url a with testcoffee let's go ahead and do it i need to create in my source in my root directory a new file here called that test cafe rc.js all right in this particular file i'll need to have the following structure and in my example here i have added the base url property here right that's what i added from from the base documentation that i got from test cover and in this base url you can see that i am accessing the website that i need to test which is sourcedemo.com but now i am i need to replace here something because since i have a base url i just have to access right the the slash the index right and i can replace the the url because i have i am defining this in the configuration file using a dot okay that's it if i run this again you're going to notice that it is going to run the source demo website because it is getting the base url configuration from the testcafe rc.js let me show you this it is working fine we're using a base url or a relative configuration okay let's continue with the next part of this and we're gonna create the second test here which is going to be invalid login as you can see it is the same as as the as the one that i created before but i'll be changing the correct username with uh with a wrong one right and it is the password with another one that is not correct pass right and it is going to click on this but now let me reproduce what we're doing here text and as a wrong password i'll click on login but now we don't need to check the title right because it is not going to be redirected and it makes no sense about this so i need to i'm sorry i need to check the this particular element over here to make sure that the error class or the element with this particular data test attribute and contains the text epic subface username and password do not match any user in this service because we are not entering the correct data so in order to get this um this information i need to change the selector in the in the assertion right it is going to be let me see it is an h3 element right and this is the values that i have to send to find it as a selector there it is let me show you that this is going to work and i'm going to copy this i'll be pasting that the the selector that i created and it is finding the element over here if you want to see more about cs lectures please go ahead and check join media cs electors css selectors in the youtube search bar and you're going to have more reference about this okay and that's it um now that i have this also i need to change the test products with the with the with the new epic subface username and password to not much any user in this service right so i'm gonna run this test again and now we should have two different tests do you agree with me yeah i think so let me just bring the browser here because it was in the other window and it is going to start with the correct or the valid a login you can see this in as well in the bottom part of the browser as well and both of them are working correctly all right however let me show you something be curious about this behavior you can see that in the first test and in the second one we are repeating the same set of actions right type text click type text and click i want to use a pattern here which is named page object model that i also get from the official documentation and i want to explain how you can convert this piece of codes in page objects and how you can reuse a method let's go ahead and check how we can do it in the next part of this video okay okay guys let me construct a page object and let me explain you how you can achieve that i'm going to create a folder here named page objects okay and in inside of my page objects folder i'll create a page object that js which is going to be named login [Music] page.js okay instead of this um js file what i need to do is basically um create a class with the same name as as my file which is login page and it makes sense right we're going to create a kind of a model of of my login page to find all these lectures that i need right to um click a type information and so on so also we have a centralized object with all the selectors that we need in case tomorrow um the the input element the the username input element selector changes we only have to come here to this particular object and change only selector only one selector in the model okay let me explain you this step by step so it is gonna make sense at the end okay i'm gonna create the plus and at the end i'll be exporting this right using export default new login page so i can access this when i import it in in the other instance in the test okay now that i have the class i i already have this as export i need to start constructing or declaring the constructor here okay the constructor is going to have a different elements that i need in my website okay so for example i'm gonna start with the username input okay and this element is going to have where this um yeah this element is going to be representing the selector right that i need to find the element username input i'm going to come here i'll be grabbing the id username to find the element okay and i'll be just sending this as a parameter all right there it is i need to do the same for the next um for the for the other elements these password input is going to be equal to selector and well i need to look for the css selector that i created which is password here all right there it is and i need also another one for this that um login button which is going to be equal to selector right the selector um login button there it is and once that i have declared all the elements that i need what i need to do is basically come here and create a function because i want to create a function that is going to be something like login right or yeah looking it sounds good and it is going to be receiving a couple of parameters it is going to receive an username and a password all right and inside of this i need to do some actions i'll be doing the same stuff that i'll i'm doing here let me explain you that okay i'm gonna copy this and i'll be pasting it that over here and now instead of sending the hard-coded selectors here i just need to reference them using the this expression here okay that is great beautiful and now instead of sending the hard-coded values that i want to type i can use the username parameter right and also the password that is going to be received when i instance the object or yeah you're going to see this in a few seconds there it is now it is totally fine i just need to import the the page object the login page and use the login button and it is going to be doing this a section of the code let me explain you this let's go ahead and do it i'll replace right this piece of the code with a page object element right with the page object method okay i'm sorry i'm a bit sick and there it is um i'll i'll be only um declaring the assertion at the end i'll be doing the same with the embodied looking of course that you can also map the other selectors as a page part or as a page object if it requires another one all right but it is just a demo for you okay so once that i have done this i just want to um call the the thing that i need right let me show you this thing they import a command here and i'll be importing the login page right and it is going to be from and i just have to specify where is my page object instance okay so i just have to look for page objects login page and there it is now i have access for example to the login page and i can access the login method if we see the description it is expecting an username and a password right so i can come here and send what i need that's why i didn't want to send let me grab again the the correct username standard user and then the password correct which is secret sauce right now you want to do the same stuff for the another scenario which is invalid login if you remember we entered before the test username and the test password which is not registered in the service so if i run this again you're going to see that it is going to work perfectly fine but now we are reusing a page object method right and the selectors that we have are only in a single page object right so in case we need to change the username um instance it is going to we only have to change one part of the of the test here we have an issue let me see what is happening let me import the t the test controller from this cafe just to make sure that it is not a problem right let me see now it makes sense let me see if it works or not okay it was the issue basically i wasn't i wasn't importing the test controller and it was no it well automatically it was not capable to understand what what was that what this particular t okay guys if you want to debug your test let's imagine that you want to um use a breakpoint when when you type the username of your in the login page right so i have to only use the command debug and if i run this again you're gonna see that the execution is gonna stop and you can go with step by step and checking what is happening okay let me show you this he's going to start the the insta the instance is going to work perfectly fine but it is going to stop and here you can see that i can resume the execution or it can go step by step checking what is happening and trying to find the the error that we have over here right it is waiting and you can see that the next action is going to start the next test and you can go ahead and continue doing this or resuming and it is going to finish this correctly so this is an approach that we can use to debug our test if we want to right that is great okay guys let's imagine that you want to take in a screenshot on the specific part of your test all right and let's imagine that you want to have a screenshot as soon as you click on the login button or maybe when i don't know i'm gonna delete the debug here because i don't need it but um for example as soon as the looking method finishes right so i can do something like this in my i await t i can use the method screenshot okay take a screenshot i'm sorry and then i have to specify where i want to uh get the screenshot that i need okay in this case it's gonna be in the screenshots folder okay that's it if i run this again you're gonna notice that it is gonna take in a screenshot as soon as the invalid logging action happens all right let me show you this is it is working in another tap i'm sorry right it is you won't notice that to be honest but there is going to be a snapshot or a screenshot and you can see that it has it created a screenshot folder and here we have the the screenshot that i that i wanted right another thing that you can configure this in your framework is the concurrency okay what is the concurrency basically it enables to run multiple browser instances simultaneously let me show you this i'm going to go to the testcaferc.js which is the configuration file of our project and here i'll be um well i'm commenting this line of code which is concurrency and i'll be uh placing the number two here you're gonna see what is going to happen here i'm gonna run again my test script okay and let me i'm sorry let me bring the windows over here you're gonna see that we are executing the tests at the same time it is lovely and it is gonna happen simultaneously in two browser instances right it is using the concurrency too well if well run our tests very fast right and using uh we're taking advantage of this beautiful feature that this cafe tells us right so yeah that's basically the concurrency you can use more browsers here if you have more tests also you have to measure the the capacity of your devices or your ci cd environment right okay guys let me explain you how you can run your tests using headless mode you can use the headless mode here in this cafe using chrome and firefox the headless browser don't display their gui making it possible to run them without a gpu right and even then you can still take screenshots and resize the browser window in headless mode that is great let me show you the example i'm gonna come here and i'll be sending the same parameter but i'll be changing bro chrome okay i'll be using uh well this syntax over here and i'll be sending the command headless okay you're gonna see that well you cannot see this but it is not opening a graphical user interface chrome instance it is running in the background and well at the end we're gonna have the final results it is gonna take the screenshot but it was happening in the background i don't see anything in the execution time all right this is basically another thing that we have with cafe and you can see that it only works with chrome and firefox as per the official documentation at the moment that i'm recording the video in a pretty similar way we can emulate a device and let me explain you how you can achieve it okay so let me just copy the command that i need over here right and let me explain you the structure of course as you can find more information about this in the official documentation you can have the references in my github repository over here at the at the bottom you're going to have all the references that you need and for this particular piece of the video mobile devices cloud browsers and emulation okay so in order to run this in an emulation device or an emulation mode i just have to change the chrome headless with this instruction here let me show you this chrome emulation device iphone x for example all right and you're gonna see the the execution right here and you're gonna see that it is gonna have an emulation um viewport okay let's see let me show you this you can see that it is like emulating an iphone x viewport right and that's basically what is happening here um with the viewport example that i have for you okay masters let me give you an example of how you can send a request by api using um test cafe this is a new feature i love it and let's review how we can approach an api testing for example a pretty simple one right um i have the json placeholder here right which is a a public fake api for testing and prototyping and as you can see here i have an endpoint to get one particular to do right they are using fetching for example but i'll be using task cafe if i run the script it is going to return this information the user id the title the lectures out out them and the completed property as full so i want to check only the title and when the response comes i just want to make sure that it has some 200 okay status code okay so let's go ahead to the test coffee framework and i'll be creating a js file okay and i don't want to create the script from a scratch because i know that this is a very long video and i don't want to a well take you more time than the only one that i have that i take before right so um there it is i'm sorry all right as you can see here what i'm doing is a basic feature it is gonna have the name request and the test is gonna be get request okay you can see that i'll sending um i am declaring a constant here named results i can perfectly name this response as well and i'll be using the command await t that request and i'm sending in the in an object notation all the things that i need in this particular case i only need the url or the end point to this one and the method get because i know that this is a get method right and as you can see it is going to return the the the results and i can access the body to make sure that the title is the lactose out them as i declare here in the over here in the in the response we can see this this is the expected result and also i want to make sure that the status is 200 200 because it was for testing and making sure that my script works okay and if i run this you're gonna see that this is gonna work but now instead of it running our login.js i need to run the api js okay we're gonna see that this is gonna work well it is open in the browser it is not going to require the browser itself it is going to just send the request in the background it is not working why let me see tests api.js oh i created the the the api test on their pages i'm sure you guys there it is i'm going to run it again there it is and you can see that the get request test which is this one over here is passing and it has the title the lectures out out them and the status 200 okay how i know that this is correct because if i check with the console log and the results or the response you're going to see that um you're going to see the response in the console log let me show you this let me just give let's give this cafe a few seconds to to send the request and you can see the response here you can see the body the lectures out out them the completed false property and inside of here you can see the status i'm just making assertions to make sure that the information that it is retrieving is the correct one or not right so guys i really appreciate your time guys i i think that this was a very long video um and i hope that you enjoyed this this was an introduction about this cafe what is new and and i hope that you enjoy it thank you very much masters this was your media and see you in the next one bye bye

Channel: JoanMedia

Views: 8,344

Keywords: joanmedia, automation testing, end to end testing, testcafe, javacript, typescript, testing, software testing

Id: 6wQRSSs6biQ

Length: 37min 4sec (2224 seconds)

Published: Mon Sep 05 2022