How to combine selenium cucumber java script java script together

let us go through one uh framework and we are we are actually trying to integrate uh cucumber with javascript and then later on uh we will be seeing you know how to format the outputs before and after hopes for cucumber integrate selenium with cucumber plus javascript that is the basic uh goal of you know writing a cucumber gherkin scenario obviously we need to tag in with selenium async awaits the timeouts wherever it's required and basically refractoring of the framework okay in order to do that i am i am going to create a simple directory let's say practice selenium json and cucumber right cd and we come here we have nothing inside it so the first thing first okay few things that you required to actually run javascript um the first one is node.js so i already have installed node on my system this is uh version 16.1.0 and you need to have npm um that is node package manager the version is one seven point one point uh one one point two now in order to install node or node.js you can just do a video install install node.js or npm node this is this is it uh this would actually install uh node.js in your system okay now seeing that you already have these two setups on your on your system let's you know go ahead with the next flow so inside this uh directory you see there is nothing there so first thing that i'm going to do is npm um i n i t y that is a forceful saying yes this would actually create a package.json file so if i do a ls here you can see a package.json file has been created okay so um let us go let's go and open this folder in a particular uh whatever id you like i am using webstorm so here if you see here uh inside inside this particular folder we only have package.json right and we are mainly focused into the scripts here so um i'm gonna remove everything from here for now okay now we have to install uh cucumber so in order to install cucumber um the best way to do it is actually following the package installer so if i come here i am inside this i'm in this particular website npmjs.com wherein you can see all the you know you can ha you can actually import all the different packages that node node gives you so for cucumber i am using this particular package okay so here they already gave you and gives you this particular line and you can copy this line here put it here this would install uh install cucumber on your system cucumber package on your system so now if i get inside your package.json file you can see that under the dependencies there is something called cucumber at the red cup member so and also whenever we do an npm install it creates a node modules directory under which you you can have all the you know all the dependencies and the binary files over here so we are interested more into you know using this particular recommended cucumber js right so how are we gonna use this okay so now we now that we have uh we have actually imported or installed that uh cucumber package we would like to see now let's create a framework uh uh particular directory structure for cucumber so basically go into the root directory create a directory called uh feature right or features and inside features create one more directory call it as step definition definitions okay and inside feature you can write a file you can actually create a file called test dot feature right now this is a normal uh gherkin or cucumber feature file we can just write a feature for let's let's write a feature called you know adding two numbers adding two numbers and scenario scenario is same adding two numbers i say when i add two and five then the result should be seven cool this is your feature file now uh we have to actually call this feature file from from our package.json script tag here you can you can you know in order to call call that we are interested in we are actually using this binary file a cucumber.js binary file which is inside here so how do we call that we just say node modules module slash dot bin slash cucumber js and then our features slash test dot feature okay now let's see uh what happens if we run this i'm gonna clear it i am gonna say npm run and since we have we named it as test we are gonna run it with test npm run test now this runs and it says that fine i got your feature file but i am not able to understand what is when uh when i add to n5 so in order to you know you know to make me understand please implement these steps so when i add so i'm gonna copy this these are called step definitions i'm gonna put inside the step definition folder i say new file and i say you know custom steps dot js since it's javascript i'm gonna copy it remove this in fact remove the return then i go here copy the other part and then again i would say okay now what happens if i run let's see okay now it says that when is not defined this is because your custom.js file customsteps.js file doesn't understand when and then so we need to import this from somewhere i am going to we are going to use so i'm going to use this constant is equal to required um sorry we're getting from cucumber okay now what do we want we want a when comma we wanted then right now let's run it once again okay now you see that your feature files are actually running um we we see that once in io passed there were two steps in it so one scenario two steps one scenario two steps right these are this is the scenario and these are the steps okay now uh let's implement this let's complete the addition so i say let sum is equal to 0 and then i say sum is equal to inp plus int so you can you can actually you know you can give names to this you know like number one and number two number two and in that way you have to put your number one number two okay now the result should be uh should be int again like you know we can say this as um result right i'm gonna use that a lot of assertion libraries i'm gonna use uh expect from shy um so in order to do that we have to install uh shy again the similar way the same way i'm gonna follow so if you come here searching for chai so this is an assertion library as you can see in order to install it we just do npm install save dev that's that's here this will install chai and now we can say const keep it empty is equal to require what i require okay now what do we want here we want expect right this now we say i'm expecting so expecting my sum dot equals to result now let's run it okay both the scenarios have passed obviously it will pass because we have given the correct expected output let's change seven to six and let's see what happens it says that we were expecting uh we were expecting uh six but we got seven so we're gonna change this to seven back again and this would run perfectly fine okay this is now uh we have achieved you know uh cucumber with you know cucumber with javascript so our first part is is over and over like you know integrating cucumber with javascript second is formatting outputs okay now when we run cucumber uh from you know cucumber.js we are running that command you can see that uh you get a dot dot over here instead of you know feature and then the entire feature file you know printed so we can have a pretty way of actually printing that which is actually the format options uh for that we're gonna install uh pretty formatter from cucumber so i'm gonna use this package cute number pr8t ui pretty formatter yeah this is the one and in order to install it again we say install save dave pt formatter all right cool now um what you can do is we come here inside the package.json file wherever we are using this quick number js command we need to specify what formatting we want to use so we say like we want pretty pretty format so it comes from cucumber see you see you and the er slash pretty uh formatter right you can you can just check it over here so inside at the red cucumber you have got pretty for matter right so now let's run this once again and see what happens here now you can see uh feature adding two numbers now you're adding two numbers when i add and this past right so there there are there is one scenario and there are two steps for it okay now um interestingly we have we have covered the formatter option formatter option comes with lot of other you know other tweaks so if you go inside it you can see you can actually put your own theme so when i say theme it's like you know we can have whatever different colors you like for feature you can have your colored you can have your scenarios colored in red so you can go and try that yeah see that's that's out of scope for now okay so um formatting outputs is done let's look into before and after hooks right so uh cucumber obviously uh you know gives you something called before and after hooks now let me let me uh emphasize on why do we need those hooks first of all so whenever we run a cucumber our cucumber actually you know there's a feature file and then it starts reading your scenarios right and we we tend to write our tests over here so for example i want to go to google and then i want to search for a search for full bar and this and that so it directly jumps into your uh test test uh files or your test steps right so in order uh sometimes it happens that we we actually need something to run even before our test starts so that's when our our hooks come in picture you know for example um we want to we want to initialize the driver even before our our test starts we want to quit the driver after our test completes so in order to do those we we can use uh cucumber hooks so let's go and see how cucumber hooks work best way again to is to go to you know your cucumber package this is chai your cucumber package and and here you can see there is a repository for it like github repository we can click here and we will you know we'll get into this repository and inside it you can see that um you know there are there are all the uh you know customization and and uh and your installations are here so about hooks they say like you know we can use hooks accordingly so similarly we're gonna use like you know before function and then let let's let's copy this put it put it somewhere here right or even before let's sum let's keep it here okay before function and similarly that would be after function sorry there will be something called after function so let's let's do something here called console dot log i'm inside before and similarly i say console.log inside after okay now if i obviously again like you do not understand before and after so i need to insert this so i already have this i am saying i want after and i won before okay now let's run it npm run test now you can see we have something called inside before and inside our inside after so that that's even before your your steps are executed you can see your inside before command is getting executed right the console.log okay now now that we have covered before and after um i'm just going to go and cross checking this okay the next thing is like we want to integrate selenium with whatever we have you know achieved till now so we have got you know cucumber we have got javascript we have got this gurken file you know and now selenium why selenium is required it is a very silly question again but yeah selenium gives us the ability to interact with the browser and that way we can actually execute our test cases uh this is basically our entire obviously our test cases are obviously our application is on the internet so we want to access the browser and also also the application so in order to do that we would like to integrate selenium here so how would we do that right so similar stuff like i come here i say like i want i want the package called selenium webdriver selenium webdriver right this is the package it saves me uh if we want to install it we do this okay i come here i install selenium webdriver all right package.json would would give me selenium webdriver as dependencies okay now that we have uh you know installed selenium webdriver in our local how will we use this so normal normal flow is like you know we we tend to write our scenarios in the future file that that those scenarios gets mapped into our you know step definition file and here is where we want to actually write that or we want to actually build up the driver and call the driver so um let's create a different feature file and we say that you know file search search tech ready to on google right this is our feature let's create a scenario for it scenario search tech very true then i say like when i are given i visit google page then when sorry when i search for tech ready then i should see see the results right similar way we're gonna run this feature file in order to run this feature file we need to go to package.json and just change the path for the feature file obviously you can have a different uh script over here for that particular feature file uh we are interested in search tech variator feature let's go and run it yes it is saying that we are not able to understand right so for making it understand just gonna copy this put it here then put it here and take this put it here remove this and remove this okay so given i visit our google home page search for tech verito and then the results okay now um now that we have uh you know this is again garkin we have not yet installed selenium we have installed selenium but not yet used it so we're gonna see how we can actually use the driver from selenium the driver is an object that selenium selenium webdriver provides which comes with different methods to interact with the dom right so um best way to actually you know learn those things and uh you know implement those things just to follow the api the selenium webdriver api so i'm gonna i'm gonna show you how so selenium webdriver again we wanna go to the github repository right so here you can see that you know selenium obviously has been written for a lot of a lot of languages we are interested for javascript right now so we go to go to this particular uh particular site and and if you can if you go here you will see that you know there are a lot of a lot of methods and you know methods that are actually given to given uh to use selenium in javascript so uh the very basic thing is like how to how do we get the driver so it has given me a snippet so i'm going to use this right let me put it somewhere here okay so it's it's always good to copy things if you understand what those things are right uh obviously before copying try to understand what what is what you are actually copying so um for now i don't need this constants for chrome and firefox right i don't need chrome options file for firefox options okay i need the browser for chrome okay now if i run if i run my run this file let's see what happens you know since we have already uh you know called this driver method or called this webdriver method let's see what happens if i run npm run test it says given is not defined so this is where it is not able to understand so let us let us import given again now you given see that it has opened up our chrome browser right we have not yet interacted with the browser uh we will be interacting it soon so now we have got this driver right so what we're going to do is you know first of all let's convert the functions to async a s y and c sorry so let us convert all the functions to a sink and we would use await okay now we say like we have the driver we say like await driver dot no first of all we need to go to that home page so we say https colon www.google.com right then i search for tech verito so basically what we are trying to do is if i if i come to this place and if i say like google.com i'll reach here and then i want to type something here so in order to type i have to grab this input so i have this input over here we can actually locate that input with the help of this name tag so i name attribute sorry so i can say await driver dot find element by dot uh name right name and the name is q dot send keys we're gonna send keys i'm gonna type tech verito take verito plus this would actually simulate your enter key so um by by this it will actually send your enter key okay okay we need to we need to import away from selenium webdriver because it doesn't sorry you need to import buy from selenium webdriver so we have this let's do it from here cool right and then we want to see the results so uh driver.find elements so after we you know put something called tech verito so obviously we'll get this results over here okay i see an id which is called search right let's use those use that id so we say await driver dot find element y dot id and the id name is uh search dot get text let me return the text i say let text is equal to this and let me console it console.log text cool let's run this discuss and see what happens so you should actually open my browser okay now um let's see the issue here now if you see that we have something called you know function timeout and the default timeout for cucumber j is 5000 milliseconds we will see how can we improve this timeout so far now we have we have actually completed you know integrating selenium uh cucumber with javascript right we have also seen a sigma weights now the next topic is timeout so in order to increase the timeout for selenium we would again refer the refer the api so in the api if you see there is something called timeout right and it says that you can use timeout in this fashion right with with the with the step definition you can use it so i'm going back to this and i'm saying that when i search for driver and this needs a timeout right this is like you know giving timeout for this particular step or else if you want to uh you know use timeout for the entire entire uh you know globally you can actually do set default timeout this would actually change your timeout from 5000 milliseconds to 60 000 milliseconds right yeah so know that you should uh not call from a hook or step this should be called globally right so um now let's see uh since we have already implemented timeout here npm run test just typing there it comes to this page and now boom we are able to actually see the console log file for that particular uh tag that we used here so uh this is this is actually giving you the console log so yes um we have seen like how to use timeouts now uh so basic things now you know uh basic few things are require remaining like basic refractory now if you see uh for every driver uh instance that has been called you know your uh your chrome driver installs instance is not closed so in order to do that since we already have a before function what we would do is like you know we would say like uh before even like my my my case is my steps run i want to my scenarios run i want to actually initialize the driver so we say driver here let's let's remove the driver from here right and then we can say let driver and then driver is equal to this and then after after the you can say same driver dot quit let's run it you will see that the chrome instances will get open and closed okay we we require timeout for google home page so let's do one thing let's let's do a global timeout here okay so in order to do that we come back here and we say like you know set default timeout we're going to use this i'm going to copy this entire thing put it here instead of where we say let it be const right and then we are done if we don't require time out here we can remove this timeout all right now we say please run it done right okay this was one and uh one more refraction that now this is this is where you can actually see the the uh the main use of before and after hooks uh one one more thing that we can obviously do over here is you know instead of uh calling the driver here this is a basic refractory obviously you can have a number of files as you like we can say like you know inside inside your feature file inside your feature directory you can create a different directory and call it support um and inside support you can create a create a file like driver youtube driver util.js and this inside this you can actually then you can extract this and put it here right and obviously your driver web driver things will come from here i would require buy but i don't require this here so i take it out and put it here right and then i saw something like exports exports dot init init driver and your ibr and this would driver this would give me want to put it inside this and i say i return the driver okay now let's go back here um i i need to you know import it from that file so i say const and similar way we say required require dot dot slash support slash driver utils and what do i require i require any driver and this any driver i can call in the before function right and i say like driver driver is equal to any driver so this is one of the basic refractoring that we can obviously do you know just segregated the segregated the initialization of driver in a different folder and we have actually put it into the support so let's see you know how this obviously this would work um running the file once again cool so uh that actually completes the entire um entire tutorial so we have like you know done some basic refractoring so finally we we achieved something you know we achieved uh cucumber we achieved cucumber with javascript we we kind of like integrated selenium with cucumber javascript um i hope this tutorial would help you a lot in you know building up a framework by yourself and following the basic apis it is not that difficult if you know how to read the read the apis and how to follow the you know instructions given on the uh on the website itself thanks a lot um hopefully hopefully in future i'll be coming up with uh you know uh javascript we already did javascript right so we will be you know covering typescript with selenium cucumber and that would be again an interesting uh video i'm sorry this video was a bit longer because we had to cover a lot of topics but obviously if you have any questions or doubts you can obviously put put that in the comments thanks a lot

Channel: haardic.joshieo.cafino

Views: 2,965

Keywords:

Id: C7cSKtnovEo

Length: 35min 12sec (2112 seconds)

Published: Mon May 24 2021