CYPRESS + CUCUMBER Data Tables & Reports | Cypress Tutorial For Beginners

how to use data tables in cucumber right js code to well grab the hashes and iterate over all the rows that we have in a data table and at the end we generated an amazing report like this one with all the features scenarios that were that was passing or not and also a features overview with every single scenario well printed in green in this case because everything is working fine hey masters welcome back to junk media it is a pleasure to have you here again and we're gonna continue working on the cucumber cypress small framework right where in the last video we defined this feature file with all its gurken structure right if you remember correctly we well created the two different scenarios a success login with a correct username and an incorrect password i'm sorry a correct password also we have the locked out user a scenario where we have a locked out user right and as soon as uh well we enter the the different credentials and we click on the login button while the user is going to be receiving a locked out message in this video we're going to be reviewing how to add a for example an scenario where we have a correct username but an incorrect password and we're going to be a well sending the data in in data's tables right i'm gonna try to explain how you can use data tables and cucumber and also well we're gonna try to generate an automatic report after every single execution okay so let's go ahead and try to make an improvement here right because there is a gherkin a property that we can use which is the background one and if you check this it is saying that occasionally you will find yourself repeating the same given steps in all of this and are using a feature so since it is repeated in every single scenario this is an indication that those steps are not essential to describe the scenarios and they are in in let's see they are incidental details you can literally move such given steps to the background by grouping them under a background section so yeah as you can see we have a given a scenario that is actually repeated in two different scenarios so we can declare a background property here right i don't need a name in case you want to name it you can do it but well you can translate or actually a copy or i don't know move you're given a step at the beginning of your feature right before every single scenario because it is going to be um well kind of it is going to be a kind of hook right so now the given scenario is going to be a well executed at the beginning of every single one okay so if i save this and i come here to my cypress test runner i execute this again you will see that probably every single scenario is going to be visiting right the given a well the given structure right a user enters the login page and yet another one is also going to have the giving at the beginning because we're using background that's some tip that i wanted to show you in case you you already know it but well it is it is fine right but in case you you didn't know it it is pretty pretty fine and something to to be aware of right so now i wanted to improve this um well this step right because uh well we are going to be adding more incorrect scenarios right so for example when we have a um a login scenario with a correct user but an incorrect password we're now we're going to be receiving this new um well test error right or a kind of error message saying username and password do not match any user in this service and the same stuff happen when you enter a correct username but at uh an incorrect password you're gonna have the same message right so i wanted to improve this then a step definition to receive the the different um kind of error messages that we have right but we can use it in in our in our step definition so let's go ahead and take a look what i did in the last video uh i had this a user will receive a lockdown message right and i want to bring this message over here right to the scenario itself so a user will receive and we're gonna be sending the string over here epic south face sorry this username has been has been locked out and the message were at the end so now we can replace this in our then step definition right and instead of having this over here i'm gonna be having a string right if you remember correctly from the last video i wanted to do it but also this step definition has to be a in inside of a quotes right so it is going to be a string we're going to be receiving the message from the a as a parameter so it is going to be um well error message no matter what error message it is okay and now well instead of well testing the the the kind of hard-coded error message now we're gonna be playing around with the error message that we are receiving from the gherkin okay now if i save this again i hope that if i run this again it is going to be working fine it is working as expected now let's imagine that i want to add another scenario right and it is going to be a um well an incorrect username okay so the error message is going to change incorrect user right if you remember if this is the one because we are not sending the correct username so i'm going to copy the error message and in the gerkin part in the then step definition i'm going to be sending the new error message so now is that it's dynamic right and well instead of sending the parameters over here with this when and then i want to do something different i'm going to change this a gherkin structure to an a single one and this one is gonna be a user provides right incorrect credentials okay you're gonna see why credentials screen there it is and now we are going to be doing something here which is called data tables if i am not wrong and here you can send different parameters while just specifying the value that you need at the at the beginning of your tables you can specify headers so for example i want to specify username and passwords which are the parameters that i want to receive and here well in the next row you can specify the username that you want to send so for example i can send a test user which is a an incorrect username right but the password is is going to be the correct one which is secret sauce okay we're going to be sending these values over here and now that i have this ready i think that we can continue with the next step which is going to be um well a user clicks on the login button yeah we can we can keep that we're going to come here to the logging.js which is the step definition file right and we're going to be doing the the nexus the next code over here i'm going to create a new one okay and this new one well it's going to have the same structure we're going to have a well this step definition here right is going to be a user provides incorrect credentials that's fine and instead of receiving a single parameter where well actually we're gonna receive a single parameter which is gonna be the table or the data table right and well it's gonna be an error function and here we're gonna use a a well a function here again table that hash hashes i'm sorry right and with a we're gonna do a function here and then we're gonna do a for each okay and i'm sorry y for each there it is but i don't i don't want to do that yeah there it is now we can well uh inspect every single row inside of the table hashes okay over here so i'm gonna come here i'm gonna do something like this and i'm gonna be locking what i have in my table so we can see what is happening inside of the of the curriculum part i'm gonna do a row that um [Music] then the the header name which was username okay username and also we're gonna be logging the row that password and if i am not wrong let's see if if it is working correctly or not i am missing something here uh user provides incorrect credentials and we are having a problem with the step implementation missing um oh i see probably i i did something wrong there let's see okay and there it is now you can see that we are logging the test user and the test password right that we are sending as a data table over here it is important that you can send more parameters for example a test user too i don't know right and pass incorrect password and well that function is gonna be iterating over every single row that we have available in our in our gerry king right so as you can see probably you're gonna see that we are sending or actually printing in the lock in the test runner lock that we have one username over here and then one password and then another username and another password it can be useful right and you can well use this demo to expand it to to your different scenarios in real life projects okay but in this case i'm going to leave my my scenario as you can see over here and well if i execute this you probably you must well it is going to fail because i'm not sending the the actions to the in the in the step definition so instead of logging the information here i think that we can do something different right the the first step is gonna be we'll type the username that we are to be well receiving from the table so we can do something like this bro username and then we have to type the password right so there it is now i have to send wrote that password and if i execute this again you probably are going to see that well my snr is working we are typing the test user that we are receiving from the gurken part over here and also we have the password that we got also from the data table over here and that's amazing i guess and well it is basically all this stuff that we we needed to solder we can add another scenario over here let me see why i had a focus there i'm not sure why there it is and um well we can add another scenario just while changing the the the parameter in the data table instead of a the in instead of the scenario of incorrect user i think that now we need incorrect password right and if i do um well if i send the correct username which is a standard user right over here i'm sorry but an incorrect password you're going to see that this is going to fail test there it is and well let's see if it is working not incorrect user a scenario is working as expected and also a well my incorrect password is also a working as expected because we are sending an incorrect password that's fine that's something that i wanted to show you right it's pretty simple we have improved uh improved a bit our feature file with the background step we also now have implemented the data tables and well as as in as size as i told you in the last video i highly recommend you to come here and check all the different properties that we have here right the rule we have the scenario outlined examples we have different secondary keywords here like a dog strings data tables that we have saw we have talks attacks and comments and more stuff right so please come here and check the cucumber dot io official documentation in the gherkin part because we have a well a lot of documentation here very useful so um well i think that that's basically the the the data table part now let's integrate the cucumber html reporter to have what kind of beautiful html reports at the end of your execution right so i'm gonna close all the tabs that i have here because it is all done close all and well i'm going to close the cypress part and i'm going to come here to the package.json and well we have some steps that we have to accomplish here and let me check my notes because it is a kind of process that we have to follow right and i don't want to do something wrong let me check that yeah i don't know what happened here let me see there it is now i'm going to come here to the package.json and if you remember correctly from the last video we included this um well cypress cucumber preprocessor configuration right because it was essential to have the the well the gear king working and actually cucumber working in cyprus right but now we're gonna be adding another configuration here which is gonna be the cucumber jason okay this cucumber jason is going to be having an object and this is going to have four different values the first one is going to be generate okay and this generate is going to be a well it's going to have the value the boolean value of true okay the next parameter that we have to add is gonna be output folder okay output um folder and here we have to specify where are gonna be having or we're gonna be generating the the jason reporter of cucumber in our framework in this case i want to have it in the cypress folder and then well a cucumber have a cucumber a jason folder okay then a well the next step is going to be adding a new a key over here which is going to be file prefix okay or prefix i'm not sure how it is pronounced in english i'm sorry file prefix and well here we don't have to specify anything because we don't have any kind of prefix at the beginning of our feature files but it is important to mention that we have a file suffix okay which is a that cucumber it is important and we can review it because we have here uh let me see oh all right we we're gonna see that as soon as the the cucumber jason is generated okay that's good um all right i'm gonna save this and if i close my testrunner and i run it again probably let's see i'm gonna clear my my console and i'm gonna be doing something like npn run test which is the the script that will execute the test runner right the cypress open command well i'm gonna execute my login feature right that's fine and as soon as it is done and finished with with test results correctly or not we're gonna see that we're gonna have a new folder here named cucumber.json and inside of this folder we have a new file named login.cucumber.json and as you can see we have all the different um well actually all the test results inside of this json and as you can see um well we have the feature name over here then we have the prefix which is cucumber and then well the file itself is going to be a json file because we have defined the cucumber json property of the cypress cucumber preprocessor okay that's important and that's something that you needed to know and then i'm gonna do the next step because well we now have the json file it is important to mention that every single feature that you have is going to be generating a different json over here under the cucumber.json folder and well the next step is going to be um i think we have to install a new library in our project okay so let's take a look at the package that jason let's see that we only have the cypress dependency and also the cypress cucumber preprocessor but now i'm going to do something different right so i'm gonna clear my my my terminal and i'm gonna be running npm install a multiple multiple cucumber html reporter okay we're gonna be saving this as a death dependency too okay and well let's see if we can uh we can access this access it as soon as it is ready and as you can see now we have a new depth dependency here named multiple cucumber html reporter and well the next step is going to be pretty simple but it is important we're going to be creating a new js file at the at the wall at the root of our project which is a well cypress cucumber in this case and i'm gonna be creating a new file here it is going to be named for example something like cucumber html reports dot js okay this file is gonna contain the some parameters that we want to have in our reporter okay so for example the the first thing that we have to do is something like accounts report uh it is gonna require okay the the world library that we have just downloaded which is reports no it is multiple i'm sorry multiple um cucumber html reporter right do you remember that we have installed that a few seconds ago report there right let's see yeah reporter there it is and well that's basically what i have to do then i need to let's see why it is not working require file is my commerci module couldn't find a decorate declaration for module reporter hmm let's see why um require multiple cucumber no that it is working yeah don't don't don't worry about this message then we're gonna be doing something like report that generate okay and here we're gonna have a kind of a object and we're gonna be doing and actually sending some keys and values the first one is gonna be the json directory where we have the json file okay so it is going to be inside of a cypress um cucumber um jason okay and if you remember it was inside of cucumber that's json and here we have the json file so that's basically what we had to do there then we're gonna send another key over here which is gonna be the report path okay the reported path is gonna contain or we're gonna define where we want to generate our reporter okay so here i want to do something like in the in the root directory i want to create a folder named reports and inside of the reports folder we're gonna have a cucumber um html report okay that html that's it basically then we have to send some metadata if you want if you don't want it it's fine but i want to do it so i'm going to create a kind of new key here which is going to be meta um data okay that's fine and sorry and this is going to be an object with some properties okay i don't know why it didn't work okay i missed the comma there it is and now i wanna also define the browser for example okay the browser is gonna be chrome okay uh i also want to define the the name of um okay it was the name i'm sorry let's see uh oh i see it it is because we have to also create an object from the browser i'm sorry and here we can define the the browser name browser it is name right there it is then we have to name the the the browser itself which is chrome if you want to add the version you can do it i'm not sure what version i have in my computer but i think it is the the 19 well 96 if i'm not wrong i need to add a comma here because it if i don't do it it's gonna it is not gonna work and and that's basically it i guess we can add um um a device here right if you want let's imagine that i want to say that this report is gonna have the metadata of a device as local test machine okay that's fine and well let's imagine what else we can add we can add the platform also if we want so for example if i come here if i come here at the bottom of my metadata and and i add the platform plot key okay a platform there it is we can add more properties inside of the platform let's imagine that it is the platform name windows in this case right and i need to add a comma and we'll add the version for example okay and this version is going to be a windows 10 in this case but if it is windows 11 you can do it too okay let's imagine what that it is 10 and that's basically it if i am not drunk it should be working as well with this js file let's try to generate our reporter it is going to be a well the way that we generate an html report using this js file from the json it is simply a well since we have our script uh kind of pointing to the cucumber json folder it is going to be generating a single or actually well wrapping all the json files that we have for every single um kind of feature right and well it is going to be generating a custom report with all the features inside so we have to do a note command here and well add the js file that we have here which is cucumber html reports dot js and well as you can see now as as we define in this script um in the report path we have created a support i'm sorry you know a reports folder and inside of this reports folder we have the index.html with all its um well we have another folder actually right with the the the final html so if i come here to my uh see to my repo which is in repos cypress cucumber reports and if i open up the index you can see that right now i have a kind of general dashboard with all the statistics important we have a like one feature in this case we have um well four scenarios every single one is working that's why it is in green right and also we have a features overview right that's that's something nice we have the metadata that i specified right we have the the chrome the browser version the os we have the device that we that we executed we also have the status and if i click here you can see that now we have all the scenarios all the gherkin structure here right in in plain english so everyone can understand what is happening there and well we have a final report also you can see that here we have the data table right and and that's basically what we can achieve with this reporter it is amazing from my point of view and well i hope that you enjoy guys because um i'm not sure if you wanna take a look of something else please let me know that in the comment sections please give me suggestions but i think that it was a an amazing um well kind of video to explain more stuff about cypress a cucumber so just to end uh the the video let's review what we did right um well basically we improved right let me see in the i'm sorry in the in the feature file which is under integration right there it is well basically what we did um was a reviewing why it is important to use background right and also we also we reviewed how to use data tables in cucumber right and also we saw the the the js code to well grab the hashes and iterate over all the rows that we have in a data table and at the end we generated an amazing report like this one with all the features scenarios that were that was passing or not and also a features overview with every single scenario a well printed in green in this case because everything is working fine but well that's basically what we saw thank you very much for watching and this video until the end thank you very much for all the support please subscribe let a like and see you in the next video this was young media until the next one bye bye

Channel: JoanMedia

Views: 210

Keywords: cypress cucumber, cypress tutorial, cypress cucumber tutorial, joanmedia, cypress io, testing, automation testing, javascript, typescript, cypress cucumber bdd, cucumber, gherkin, step definitions, cucumber datatables, cucumber report, cypress testing, cypressio, cucumber tutorial, cypress automation, cucumber framework, cypress and cucumber, cypress bdd, cypress-cucumber-preprocessor, Cucumber integration with Cypress

Id: BCY_9aMwJh4

Length: 27min 45sec (1665 seconds)

Published: Mon Dec 06 2021