Webdriverio V7-Cucumber-RealTime Scenario -Part-1

hello everyone this is absal ali so in this video we're gonna learn about webdriver io version 7 with cucumber okay so the today's agenda is uh we'll be doing manual scenarios first so basically what we gonna do is we'll be automating a a particular website uh right so first we'll go through the what all the manual scenarios that we can automate and then once we get all the manual scenarios then we'll be writing cucumber garkin scenarios right in the cucumber gherkin keywords given when then conditions then we'll be writing after that is being done then what we'll be doing is uh the proper driver uh i o installations and framework setup then after that how will be writing the page objects then how i will be doing step definition then reporting and uh will understand more about the coding how basically the whole flow works and how it works in the real real-time scenarios in the real company when you start working with a web driver i o with the cucumber framework then how everything will integrate together so we'll be uh going through each of them right okay so we'll also go through the ci part as well like github action integration and then we'll be dockerizing the whole uh framework and we'll try to run using uh docker uh in in docker containers within the github actions and also we'll try to integrate with git lab or maybe some other ci tools as well right and also we'll integrate with the selenium grid implementation will do or maybe aws or gcp wherever we can do so i'll be creating a separate videos for those right so in this particular video we'll mainly focus uh till github actions integrations okay yeah so let's get started with manual scenarios so i'll be going through uh one of the website that i have taken so this is the website uh that will be using throughout this uh whole session what we'll be doing is basically uh the scenario is we need to sign in okay uh basically not sign in let me okay so what we need to do is uh first we need to sign up okay because if you are new user you need to sign up first from here if you click on the sign in button then there is a create account uh section over here so you need to create account suppose uh i'll give some example over here maybe one two three four whatever create account so we'll be doing like this create new account and we'll be filling all the details over here all right once you fill all the correct details then your account will be cleared so make sure this while creating the account right so this email is should be unique so basically we will be creating a random email each time whenever we run this uh test right so that uh it will not complain that this email already being used by other users right so this is the real-time scenarios so once you register for it once this particular uh particular email address is being registered then we go ahead here okay so basically what we need to do is uh once you sign up then you need to sign in using newly created email email and the password right once you have that uh once once you have that email address and password you need to sign in okay so this is the email address i already have registered previously so i'll be using this email okay um yeah this email is being created then i will be reusing this email then uh just copy then just enter the correct password then you should uh see uh this particular page so you need to verify this all things like sign out button is displayed and the name of that the first name and last name of that user is should be shown over here and then also you need to verify uh this particular page is correct or not so you can also check address information whatever you have provided during the sign up uh this uh information also uh we need to verify so this all thing that will be verifying uh in in our scenarios okay so this is the one uh scenarios um we'll be verifying the other thing that what we'll be validating is then uh purchase of the product meaning uh we need to go back to uh this page over here all right then we need to select uh the sections over here okay then uh you need to select subcategories then uh after that you need to select uh to add to cart okay so basically we'll be providing the name name of this item or product from the cucumber feature files then based on these names it will add to the cart once you add to the cart you go ahead and proceed to check out so basically what we'll be doing is uh going through the whole checkout process okay so here and also we'll be adding quantity then we should see some change based on that all right it should be able to delete the product and you should be able to add the product uh those kind of things that will be validating all right so just then proceed to check out and you can also verify your delivery address over here and the billing address so this all address also we need to verify and this address will be same as you while you uh during the creation of your account you have provided right those information so we'll be using some random fake data generator so that will generate uh this uh details of address or name etc okay so we'll be using some uh faker api or utility class for that then after that other proceed to check out and yeah so just agree on this then proceed further then the payment options should be there and you need to check click any of them so based on the cucumber feature file you will be providing which one you want whether you pay by bank wire or pay by cheque so those two options will be available okay based on that it will click on uh pay by check or something then you confirm your order and after that you should see this message so we'll be verifying this as well and payment amount this payment amount also will be verifying and uh yeah so this all information will be uh verifying through cucumber the whole process that we'll be doing in this particular session okay so let's start with our uh first scenario that will be writing in cucumber okay so when you enter this url it should be landing on this particular page okay so now you need to click on this sign in button okay the first scenario would be you are on a home page so this is the home page then you need to navigate to sign sign up page meaning you need to click on this okay so once you click on this you need to enter this information so in our cucumber scenario we can write like this so i'll just open one text editor i can write uh gherkin scenarios in this editor also text editor okay so feature is sign up and sign in then purchase the product so you can write uh some meaningful feature name as well then we can write the scenarios okay scenario you can uh write some tc 001 so test case also you can write like this as well okay then create new user okay or maybe you can say sign up or sign up so this is the first scenario that will be writing okay so i have written uh given i'm on the home page okay the first page that we saw uh this is uh the home page not this one okay so this is my home page then i navigate to sign up page so once you click on this i now we get to sign up page okay then after that i create an account with a random username so basically uh you need to create user with a random username so this is all uh you need to write so in this particular scenario you can write uh the whole thing some random email then click on create so this all i click and everything no need to write because this is a generic business requirement like you need to you should be able to create or create new account or maybe you should be able to sign up with a unique username so this is uh the business scenario no need to write like click on this uh button then you enter the first name then enter the second name last name or those kind of thing no need to provide uh in in the future file itself so this is a self explanatory okay or if you want to provide this names last name etc uh you can also use uh data table as well in here but i think uh we'd be using some fake data using api so no need to provide from feature file itself okay yeah so we'll be using some random fake data from uh faker utility classes utility uh packages okay yeah so once you create the account and now you are uh finished with this particular page now the next thing is uh next scenario is you should be able to log in with the created user okay let's see okay so the scenario two is tc002 sign in with a newly created credential so whatever credential regenerate password we created over here we'll just reuse the same and uh here same given is i'm on the sign in page all right sign in page means i to navigate to here till this page then you enter login with newly created created credentials then after that then i shall verify the address information uh in my address section okay so as i shown already so you need to navigate to the address section then verify the address whichever you provided during the account creation okay so because basically we provide addresses okay here your address company name those kind of thing uh will be validating in the address section once you log in okay so this is the scenario number two then the scenario three uh would be adding uh products to your cart okay then check out uh then uh then you will be able to purchase that product using uh cash or maybe pay by check those informations uh so those scenarios also we can add in here okay the scenario three is add product to online cart and check out so you need to add the once you log in okay given i am on the sign in page then login with a newly created credential newly created username and password in this scenario also you need to use uh the username and password you created in the scenario one so that means you need to share that email and password in each of the scenario where we'll be logging in so what we'll be doing is we'll be creating a global variable where we'll be saving uh email and password okay somewhere in the global variable and we can reuse that email and password because each time uh the email and yeah email would be different or maybe username is unique so we can reuse that email in each of the scenarios to login okay then after that uh we have this one to add below uh product to the card so basically uh we'll be using data data table where we'll be using category subcategory and name of the product and model and quantity how many quantity you want to add in into that shopping cart all right so basically like this um yeah so this is category categories address so this is the category basically you can also select this category uh or woman okay a category is uh the section you see here then sub category whatever you see uh casual addresses evening somewhere so those kind of thing are subcategory whatever you see here so the second sub this is the sub category so we can provide here you can meaning if you provide here then it will click then second one then after that uh the name uh the printed address so basically it will go and check for the printed address this is the title of that product and it will click on that also first then it will also check the model number so whatever model number you provide over here it will check and this model for whatever here model 3 so based on that it will compare this and if it is not matching then it will fail or if it is not matching and go back and select another product which matches with the model number as well then if it matches then uh it will enter the quantity all right uh i think we're not selecting this one also you can add this check as well then i had to cry cut and now you need to go to the proceed to check out so if you have multiple products you want to add so simply you need to continue shopping click on that then select based on the same thing right so this is what the scenario that will be covering up okay okay so then we have this is validate the shopping cart whatever you have added over here right you you need to validate those in the shopping cart okay so whatever you add over here right so you just go ahead and uh in the shopping cart itself this is the card so we'll be validating those uh the name of that product and this demo for demo to whatever so we'll be providing here the name model name and the name of that product and the quantity so those those thing will be reading from here and validating uh using this data table okay so we'll be asserting this then after that i shall be able to buy the product and i shall be able to buy the product using check payment so yeah just go ahead check out uh and that will be end okay and also you can add as many as scenario there will be a lot of scenarios for this website so we'll try to uh try to uh complete as many as scenarios that we can think of within the limit of time but you can also go ahead and check for more scenarios also what we'll be doing is uh we'll be also checking after you sign in right uh once you purchase something uh using your uh using your account right you can also see in the i think it is in the customer service where you can ask for uh you you you can ask for a return or something is there maybe i can show you when you successfully uh buy the product right you can also see the order differential so those uh information also we can validate okay so basically what we are going to validate over here is uh i think you can go to uh in home page uh you can see there is a contact us uh button over here just click on that so this is this is with the next uh scenario that will be having so what we can do is we should be able to uh select from here okay customer service then you should be able to validate this your email address so you should see this email address whichever you use for purchasing your uh product right you should see that same email and you need to validate that as well and in the reference thing now we need to validate that the reference number okay unique reference number when you complete your successful transaction right the payment then you receive this uh number so we will be validating this number as well whether in this drop down list we can see or not so once you able to select that you should be also validate those uh product that you bought right you should be able to see this drop down so we can also validate this so this is uh one scenarios and also you can write any message over here okay any any message like you want to you you want to give any feedback on this product or you want you don't like this product and you want to return something you can write something then send button okay so and uh just validate this information so this is the next scenario that we'll be doing okay so these are the uh scenarios for scenario setting okay so this is the fourth scenario i have written just now uh i'm on the login uh i'm on the sign in page then log in using newly created credential i'm on the contact page because this is happening after this all three scenarios right already you purchase something then uh i'm on the contact page so you go to the contact page then send a reference refund a request uh in the customer care in the previous order whatever you order just um [Music] request for the different and also you can validate those drop down uh the correct or not everything all right so we'll be doing those information uh those checks uh in this particular scenario okay scenario four so this is the four uh scenarios that we can uh we we can automate through web driver i am using cucumber so this is our feature file already you can see the feature file is ready for us to use in uh in web driver io now we can go to webdriver.io this is the website where you can get all the information right so this is very handy you can use the installation process over here so before uh going for the installation so there are some pre-requisite you need to have uh latest node.js installed in your machine all right and also it's good to have the python 3 installed and java jdk so these three thing you just check in your system it should be installed before proceeding with the installation process of webdriver io okay so yeah so let's get started of the installation process how we can uh process uh proceed from here okay so i will be opening uh visual studio code i'll be using vs code for this particular session okay i just now open my bs code okay if you haven't installed please install the vs code and this is very useful for java javascript based projects all right so now uh i'll be just creating a folder somewhere in my maybe here in the desktop also all right all right so web driver io cucumber so this is the folder i have created in desktop or you can create in anywhere okay any drive i'll just go to the desktop uh then what driver i have cucumber just open it okay so once you open it here okay so you can see like this uh you are in the folder so what you need next i need to do is uh i'll just right click on here open in integrated terminal basically you will be seeing the terminal over here okay once you right click and i should be able to see this screen all right okay so make sure you are in this particular folder so what the next step you need to do is npm okay before that you need to also check npm in install or not okay uh yeah npm init so once you do this i should see like this package name i will just keep it default so i'll also just click enter enter description uh you can write something cucumber web driver io v7 project okay so entry point uh you can write index.js it's a default one test command also just enter we'll see later on uh enter keyword enter i'll just write my name okay license enter and then finally just click enter then you can see uh the package.json file created over here okay so this is uh the first step you need to create a project basically all right so basically it's having all the information about the project that the node project that you will be running so it it contains all the information descriptions uh your main index.js file etc all right so the next step what we need to do is uh just go to uh web driver io a website over here and just try to copy the first first line and just install it over here all right so what it will do it will uh install this wd io cli okay webdriver i o cli uh it will install so that you can from the command line itself you can run uh your tests all right now if you are doing for first time it it might take some time to install this okay now you can see there is something called dev dependencies being added over here right and also you can see magically there is a node module folder is being added automatically when you install anything all right and package log.js and uh file also is being added so the next uh thing that we need to do is uh npx uh the config all right i'll just use uh not s if you provide a yes and it will just create a default one so i need to select something so what i'll do maybe just use config so i need to select it if you just provide ss right over here so basically it will just select whatever default for you okay so you want to run in any cloud uh no i want to run in my local so if you have your own selenium cloud also you can write like this so i'll be using just click enter so that it will sit on my local machine uh okay so for framework we'll be using cucumber so if you arrow down um if you click on the down button for arrow okay just enter so do you want to use a compiler so basically you need to use babel for this particular so i'll be using uh javascript based in all the types type script so you need to use this bubble right then okay where you your feature file located uh you can just uh click enter for the default one enter for step definition also default uh do you want webdriver io to generate some test uh files you can generate there are some test files uh we can see whether this is uh all our installation working order so for now let's generate it then i'll be deleting those uh tests okay do you want to use page objects uh page objects yes we want the page object uh where your page objects located you can just pick okay okay here uh there is a reporting so basically there's a spec reporter dot reporter janet earlier so i'll be using the spec reporter later on we'll add some more reporting uh features okay and here you can select which service chrome driver i'll be using for now okay later on we'll use some other thing if you want browser stack or maybe some something else we'll see okay so for now let's use the chrome driver what is your base url uh let's see localhost and then installing uh whatever based on your selection uh this all uh in these all dependencies will install automatically okay i will see here it will take some time i'll just pause the video okay so the configuration uh installed successfully all the dependency and you can also check uh in dependency uh everything bubble code and everything is being installed all right so yeah that's the and you can see this wdio config js will go through a briefly about this one so before this uh i need to install or i need to set up something for visual studio code basically if you are using vs code if you need intellisense like in other ide like eclipse or intellij you might be seeing when you type something then automatically it will show you the suggestions so to enable this for vs code you need to do something so if you go to official documentation and search for vs code basically you need to go to this auto completion one so here we need to create one file called jsconfig so what i'll do i'll just create a file over here uh name it as jsconfig.json right and grab everything present within this file yeah and paste it in here so make sure if you are using latest because if you see we are using the latest version of web driver i o that is 7.14 as update today all right so yeah this is the latest uh webdriver i o that currently present so for that um you need to like use a sync mode so basically uh this is in asynchronous mode okay so in this current version of webdriver io it supports only asynchronous so sync way also can but it's your node version should be less than eight or something yeah so yeah basically you need to use this one asynchronous okay from version 7 onward that is the recommendation you can also read about asynchronous and synchronous way of writing web driver io tests so we'll talk about that as well later on okay so once you uh do this just save it and just close uh that's all and also you can see here it's automatically created some of file because we selected remember we selected for uh test uh some test to be generated do you want to draw to generate some test files basically it is generating some test file and you can see some uh default uh login scenario is there okay a step definition also has been created for this okay you can also go through this uh how it is being done and all uh all right so will not uh you will just maybe run first whether everything is working fine or not so what you need to do is uh just run this command npx wd io run command all right so when you run it basically it will try to open the browser okay you can see it's opening my browser over here and it's going to that particular login page and try to login i think okay okay so it logged in successfully and you can see in the test path so meaning our installation is successful now okay so yeah what we do uh we just remove everything present in here okay we'll not be using uh this so i just wanted to show you uh that it also generates some dummy tests all right uh okay move to truss and this step also i can just move to maybe delete and this login also just delete everything fine so you can see uh nothing now present uh in this folders so let's create the create our uh step definitions all right using so the first scenario is uh create new user sign up okay so i'll just copy these and use the same thing in our test okay so what we'll do uh maybe we create a feature file over here you can have a feature file over here or maybe you can create a folder for that as well okay for now let's create a feature file so you can name anything okay so i use uh online shopping dot feature so you need to use this so you can see uh i can in my case i have very nice folders uh over here so one thing you need to do is you need to install two plugins basically uh maybe i can show you a couple of plugins that you need to install i have installed already so one uh plugin is cucumber okay so just search for cucumber this one the first one i have installed already so you need to install this particular uh plugin then another one is uh material theme i have installed okay so the first one you you you can install this for you know nice view of the folders over here in this folders uh you know in a material view so yeah you need to go to here and search for material uh icon theme okay and install it and then another one is pretty uh prettier code prettier i think yeah this one so it will auto format your javascript code when you whenever you save uh that code okay so you can install this uh plugins to have a very good views and you can have very good code formatting as well okay i need to use the feature so you can have the feature name over here so you can see automatically is adding everything because of that plugin i have so feature name i can just copy from here whatever we have written all right and just paste it over here then you can ha you can have some description or as a user or whatever you can write some story over here so yeah we not going to do that now i'll just copy and paste the scenarios all right scenarios uh we can write over here so for scenario also you can also add something uh documentation over here if you want okay for now let's uh not do that okay so i just added uh this scenario for this particular feature where it says i'm on the home page and then now we get to sign up page then create an account with a random username so let's uh let's go and create the step definition first okay uh in this particular folder we'll be creating the step definition right we can have a file over here may be called a common file common step definition common dot maybe you can just use step dot js okay so so that we can understand like this is the step definition okay uh file name then dot step dot js all right so this is uh the common uh stabilization whichever the common uh steps that we'll be using uh this particular step definition for that okay so this particular thing like i am on the home page uh we can write in the common okay navigate to sign up page uh we can have in the login uh login scenario or login page then uh login or maybe authentication step definition will be adding okay so this is my step definition so what i will do is just go there and create a step definition for that okay so for that uh you need to import something you need to do like this import given okay you can see it's automatically also selecting this cucumber okay you can also given when then because we might need this uh okay in other step definition so once you do that you need to use given okay and uh your uh okay so your page home page i'm on the home page this is the text or whatever text that you have uh written over here you just need to write over here okay so the next thing uh what you need to do is um so basically uh you you need to write a cucumber step definition in the async mode okay so let's see how we can do that okay so you need to write like this as a regular expression over here okay i'm on the home page then this is the way that you need to write then uh this is async and this is uh the uh method parenthesis then fat arrow okay so yeah so within that we can use our um actual code for navigating to uh that particular page in the home page this home page okay so this is my url okay so let's see how we can do that for that i think we need to create another within the page object uh let's create another common uh common page as well okay so what you can do common dot uh page extension like this then the js so in here uh we'll be writing the uh the logic for navigating to this homepage okay so i'm here and we can just create a class new class called common page okay so this is my class and you can create one method called open home page all right so yeah so here uh what you can do is we can use a browser you can see the intellisense because of this uh jsconfig.json you can see all the intellisense over here browser then dot also you can see all the information are available in this browser so uh browser then dot url so this will navigate to that particular website just now we copied the url all right so yeah uh you'll be navigating to that particular url so after that maybe i can just say here console.log so that we can see uh in in the console log over here navigating to a url uh maybe i can see over here okay so after you navigate right uh you need to also verify certain things like whether this is page is being loaded or not using this title or something else so you can validate once you navigate to that so for that i think we can use another method over here to validate everything i can see i can write verify page heading all right and similar way i can also write this method okay so you need to write like this the method so this is the uh the asynchronous way that will be using a method over here okay yeah uh so what i can do over here is um maybe we do later on when we will be doing the other stuffs then we'll be using this verify page heading so for now maybe i can use here itself for the title one okay get the title uh here for example const browser title or maybe the website title whatever i should be my store basically will be doing some assertion okay for this uh title with my store so yeah we'll be showing after that how we can use uh which library to use in in case of asserting okay so this is uh the navigation one so you need to call this method open page method in the common state in here right uh you need to write here so for that you need to import this particular uh particular class also so import in javascript it works like you need to export from here whichever methods or whichever class if you want to export it in if you export it then only you will be able to use in this particular step definition right so how to do that so in this common uh page okay maybe for now i'll just comment this verify heading all right so here what you need to do is you need to write export okay default and then you and then common uh the class name so basically will be exporting the whole uh class object all right like this so once you export it then it should be able to import this particular object import maybe you can write common page from okay like this um you can see double code okay so uh if you see here in the page objects and common page so no need to use dot js also okay so once you get the object of that particular class then you can use this method all right you can see the open page uh method already accessible over here all right so now you are on this home page the next thing that we'll be doing is uh will be capturing the objects okay uh page objects or web elements for each of the uh for this particular home page then uh the sign up page etc and we'll be creating a separate separate javascript files js file then within that we'll be using our page object model okay so let's see how we can do that as well so first i i'll just get uh the locator for this sign in uh button okay so you can see the we can use dot class okay so like this you can use the class name or maybe css selector also so i need to go to um here and we'll be creating the page object i'll be creating another file called uh maybe a home home dot page dot js okay so all the web element present within this particular home page i'll be writing over here so let's create a class called home page all right similarly uh you need to export it export default on new home page all right and here we can write all our [Music] web element locators and here we'll be using actions meaning click on that or uh whatever things that we'll be doing with those web element we'll be writing over here so let's first get grab all the elements first okay so first of all we need to for the login button we need to use a get i'll be using like this for button i'll be using btn for input i'll be using input something like that then the name of that web element button sign in okay so like this and here you need to return and dollar sound sign dollar sign over here and then uh whatever the element locator and just copy from here and just paste it here okay no need to provide like whether this is a css or maybe expert or class etc right so you can use like this also so similarly uh let's get for other buttons as well or whatever the text that you can see over here contact us etc uh we can uh get the web element for that like this just uh here click on these and then go here and you can see this is a link so you can also get the link for this particular um for particular uh this thing all right so for that how we can use the link okay so there are uh two more uh elements there's a link contact so basically this one contact us so it is having uh the id you can see over here it has id so we can use a has has then contact link the id name so basically this is the id if it is dot then this is the class name all right all the class name and the image logo so i'll be getting this image uh local web locator as well okay once you've got that um i think um you need to [Music] use something for this okay so let's see what else we can grab from here for now i think that's all uh let's see what we can do the next thing that is actions here um you need to validate first everything then after that uh we'll be clicking on those buttons sign in button we need to click on that sign in button okay so to [Music] click on that button maybe what we can do i'll just write one more method over here called navigate navigate to login page okay so basically you need to click on that method sorry that bought this sign-in button then only you will be navigating to this login page or sign up page all right so you need to use this uh navigate to sign in login page method and and within this uh you need to you call this button okay sign in button then click on that so how to do that you need to use this okay button sign in dot click so the click method is there okay so you need to write like this and you can also use the console log to confirm that this is sign in button is clicked or something sign in button is clicked all right so but this is uh this should work fine if you are using the sync mode uh as web driver io uh seven is in asynchronous mode so i need to use uh this all thing and the click function or whichever function that you uh perform on any element right uh you can see this uh giving a promise basically all right so this is in asynchronous mode and when you use like this the response for this will take a little bit of time and in that moment it will try to execute something else after that also okay it's not like java like it will stuck uh it will just wait for this element and then it will just click for uh click then only it will execute it uh the next line in javascript in asynchronous mode it will try to uh execute it it will not wait for each response to be available then only it will do this uh console log so basically it will do uh this one and after that quickly it will just go and uh execute this one also whether uh this is working fine or not it will not work so for that to handle that uh we have called something awake all right so it will wait for this operation to be performed then only it will execute this okay so if you using a weight uh this function has to be async has to be in async mode all right so you need to write like this async then you need to use this await fine yeah so this is for navigating to uh this uh sign in or sign up page all right so the next thing that we can do okay so let's uh call this uh this method also in our uh in in our common state okay so basically let's see what's the home page so basically just navigate to that home page then after that maybe let's let's validate something after that uh before calling that uh click button we just validate something over here so what we can do is let's see what i'll do is just import the home page also home page from build objects then this is home page all right so what i'll do i'll just uh in the home page right we do have uh some method uh some uh some link image link uh remember we uh we added this link then this contact button sign in buttons uh locators there so you can also see also here okay button sign in uh you can see uh whether this is uh present or not so uh for that to us assert this whether this one is present or not you can use something called expect okay so this is coming from chai chai is uh uh you can say assassin library similar to testing your junit in the java right yeah so you can see here uh exp it's not giving any intelligence over here because we need to install chai as well okay so let's see in in our package.json that dependency is not present i believe so yeah no not present so what you can do is npm install so if you want to install some dependency third party dependency uh you need to write npm install then child so if you wondering like where you are getting this chai and everything so there is a website called npm js okay npmjs.com so there you need to just go and search for any package all right so for example chai is a very good library search for that and you've got the channel and click on that and you can see this particular uh command to install it all right so basically it will just get it from there and install it okay so installation is completed and you can see uh here uh maybe it should be depth dependency i should hyphen i can save deb if i write it will be coming under this one okay so we install this but we need to do something to uh import this chai globally so what we can do okay i can go to this wdio config.js and here i can search for before tag basically it will run before anything okay so on complete and this is after and the b4 should be here somewhere and search for that this is before step before feature i can have in a b4 function so just uncomment this particular thing all right so this is the before so before all it's kind of before suit in testing g all right so what you need to do over here is um you need to maybe first require you can also write here require chai right so once you do that uh you need to write global all right dot expect so this is a a variable that we are saving with the chai dot expect all right so basically we're saving this expect with this globally so it will it is available this expect will be available globally right so that we can also access from here in in global all right yeah so basically it's available over here so what you need to do is to write to be present over here meaning it will check whether this is present or not all right so similarly also we can do other checks as well for other um [Music] other links as well okay so this uh should be present this three thing uh in this home page when you log in uh when we launch the home page and fine then after that uh what we need to do is uh we need to call we need to call our click method to login okay and go to the navigation okay for that i think it is also present in the home page all right home page dot and navigate to login page okay so basically this will go i can also click over here and you can see sign in button is clicked all right so once you clicked on that um yeah once you click on that it should navigate to that this login page so let's see whether this is working or not before that or one thing we need to do over here so we have a step definition this is our online shopping let me just remind this correctly all right so this is the this is two uh page objects all right and you we have this common step definition over here what you need to do is go to web driver wd i o config js right so if you want to know more about this wd i o file right we i already have one video regarding this you can go and watch okay i'll be providing the link for the web driver i o so basically this is the my website where you can go and check for web driver i o io tutorial okay just look for this server driver web driver io convert v5 and click on that here this is the video web driver io part 2 test runner configuration where i have explained everything so when you click on that it will go to the youtube and uh yeah so you can see this is uh test runner configuration so basically i have explained everything present in this configuration file okay yeah you can also watch that video fine um okay so what we need to do here is to check uh whether this uh spec files spec file means the feature files uh are present uh in the correct uh correct folder or not so okay so let's see uh dot means the current folder all right current is in feature feature folder is there within the feature we have uh star star means any folder so we are not specifying any folder name over here okay you can also uh specify the folder name also so you can see we have we don't have any folder as such over here uh directly we have dot feature file so within the feature folder itself it is there so in that case we can just remove this okay if you have another folder within that if you have maybe you can create another folder over here right um so that within that also you can uh keep this online shopping dot feature so for this video let's keep it there okay then just remove this and uh star feature style means any name okay starting with anything and ending with the dot feature right so this is the my spec depth uh spec file then for step definition you need to just go down a little bit okay uh log label also you can see i have uh put info so you won't see much logs okay in case of debugger trace you will get a lot of in detail uh in detail logs okay so we don't need that framework uh reporter respect reporter is there so this is the one uh features within the feature file we have step definition definitions folder within that uh we have this uh common uh dot step.js so in this case what we'll do a similar way we can use star then step dot js okay basically this star dot step dot because all this table extension files end with dot step dot js okay so you can have multiple step definition and no need to write multiple times over here because this is also array it can contain multiple step definition like i can use like this okay uh you can add your step definition one more but uh this will take care of all or if you have multiple files also right so the next thing uh yeah no need to go through this file uh and also for the local host we're not using this base url from here so no need to change also if you want to use it maybe later we'll use it in the latter part of the video okay so that is done uh from here let's see what's left oh yeah so here also you need to use a weight okay because uh for v7 it's a more outward thing now okay so if you make sure this is in async and this is uh here you need to whenever you uh uh you interact with any web element you need to write like a wait uh before that all right so once that is being done uh let's see here um navigate to login page we have this and let's see if this works or not all right let me just clear this one and let's see hopefully i'll get some error i'm thinking yeah so to run this file right uh how you can run is you can just use node make sure node is installed in your system if you are using uh if you are using uh i think uh windows machine uh the system will behave little differently so what you need to do is instead of node you need to give the full path node node modules like this sorry you need to write a node node modules sorry [Music] not modules then i need to write i think dot bin okay so within bin we have something called wd i o okay till uh wd sorry yeah wd i o then you need to use this so this is only for actually using uh windows machine okay you need to write wdio.com all right so you need to go till wdio then it should work like this in windows machine okay now it's going here and navigating to that particular page okay and then it should click on the sign in button okay i think it failed let's see uh as expected it got failed somewhere let's uh see where it got failed okay so it got failed uh in this step right so you can see uh this is not present already navigate to sign up page is not defined let's see by saying it's not defined because i have only created a one step right only i'm on the home page navigate to sign up page is not defined yet so what we can do is we just create another step definition there okay okay so instead of here i have written this navigator uh login page uh maybe i create another and we get to sign up page uh this one is just copy from here and then go to this uh uh common step definition basis uh maybe we can create uh another step definition over here maybe let's see here in the common okay given maybe i can say when um yeah i like this all right then dollar you need to write like this and it should be in a sync mode and within the the fat arrow all right so here what we can do i'll just copy paste this thing and uh yeah after you navigate to this uh sign-in page all right this sign-in page you can also validate certain things in this uh authentication page basically all right so yeah you can console.log also console.log navigated to authentication page already sign up page okay so this is my authentication page over here you can create account then uh you want to sign in also you can do that okay so for the last step definition uh create an account with a random username let's create another step definition over here okay not the common one now the other step definition would be dot step dot js okay so this is uh for authentication purpose okay uh create an account with a random username and this is the auth dot step definition for js okay so here what we need to do is um we need to create the account so now you are in this page okay once you click on this you need to enter this particular thing okay for that what we can do is we can create another uh maybe another page object where we can uh use this page of the input box or this button and after clicking on that all this uh information the form okay we can have in another uh page maybe we can use um sign in or sign sign up page or something all right right so let's see yeah just create another page called auth page over here you can name anything anything that you feel it's uh more readable okay similar way we can do here export or export default sorry uh default new page fine so you need to first similar way that we did for other class here you can use page objects and then some actions over here okay so let's get the first page objects over here that input create a email okay the first one here input uh create email this is input box then after that button uh here we can use the button okay so create a button once you enter some valid unique valid or unique email you can go to the next page here you need to provide all the information so all the uh input box and this button everything you need to get the locator for that and grab it and write down over here okay okay so i grabbed this uh all the button uh all the wave element present uh in that particular class uh like gender first name last name email password uh dropbox this is a dropbox and days okay so for the date of birth days then uh this one month then this is a year so separate second web element so yeah you can see here yeah house means it's a id okay uh yeah so i did all the button all the web element present there so once that is being done the next step would be to create some actions for account creation one okay this is all the web elements you got now the create account right so how we can do that in here uh i'll just so create one method called create account okay uh i'll also use async way and here the method name like this okay you can write uh the same way that we did but here i'll be parameterizing two things uh like email id email id and then come to this okay so this two thing i'll be providing from somewhere from the uh somewhere where i'll be calling this particular uh method okay there i'll be providing this to email because email has to be unique each time and and this address also has to be unique okay so we'll be generating random email and address and will be providing to this particular method okay so now the first thing what we need to do is uh the create email account or the first the previous page that input box you need to enter first okay so this dot say uh input okay create account email so this is the first one and uh i think when you navigate to this particular page right you need to wait a little bit so far wait for exist so for this element uh you can use uh wait for a clickable wait for exist i'll be using here okay so if you see the documentation also webdriver io wait for exist you can also see here okay go here and check how this is being done this is first one is timeout and also you can see some example over here how it is being done okay so you can see this particular one wait for exist or wait for this to be exact something all right so this is how we use synchronous is a little simple and no need to use a weight at all so always go for the asynchronous all right here what i'll be using is timeout timeout is from five seconds that is five thousand okay so i'll be waiting for this element to be uh exist okay after that uh okay you need to use here also await okay then the next thing await this dot you need to set the value input create create account email.set value right so whatever the email that you'll be providing from here from outside i just provide here this is the function then after that so we need to click on this uh maybe i go here okay so this is the set value then after that you need to click on this button so the same thing we need to do over here also okay wait uh this dot btn button is create account button and here you need to click all right so this will uh navigate to the next page for the uh it will because you already got this unique email id you entered this your set value then click on that after click it will go to this particular personal create an account page okay here you need to select uh whatever the title first name last name etc so yeah here also just put some weight because we are navigating to the next page uh for the gender uh button uh let's uh okay for this one uh id gender so gender one so just wait for that element to be exist okay all right so got the gender uniform id gender from here locator you can see this one okay so this uniform id gender one uh you got that and saving the constraint then we are waiting for element to be exist for 15 seconds yeah then uh clicking on this uh radio button right you know when you click on this it should be clicked fine once you that is being done the next thing would be simple so make sure you are using the weight away thing over here otherwise it it will break right then the next thing is first name last name email uh something like this you can just grab the input first name dot set value and first name you can also provide uh from here because this is the address uh this is one object that i'll be passing where in that object everything will contain like first name last name where he stays everything so the address dot first name uh using uh this from this object we can get this first name last name uh and the email id also we have already providing here and the password just hard code something password one two three okay so once that is being done uh set uh till password till here the next thing is date of birth for date of birth uh we can do uh we can do like this wait uh select by index basically this is drop down then select by index all right and whichever index uh you can select because this is a drop down you can see i'll be selecting 12 and from here march 1992 so yeah you can see select by attribute value uh like this okay you can also see this information in the website also okay you can also search for select by attribute or something okay maybe just you can also use select select by index select by attribute this thing will be up you can see over here and select by visible text also you can select okay so in my case uh i'll select by attribute i'm using because i have some issue with select by visible text so i use this value because if you see here right in this drop down let me see inspect this um yeah this select have uh it's not a text actually it's a value one two three four five six uh if it would have been uh here text i think it's a text but uh here text also is there but it was not working or maybe i forgot already uh yeah so we can use a value over here using attributes okay select by attribute value 3 value then uh 1992 from that drop down list or from here all right so the date of birth is done and now the next thing that we'll be doing is address okay same thing first name last name company address etc etc okay also these two uh check box also you can select over here okay we did the check box so now for the address i can see input address work so all the web elements we already captured over here okay so we are just using those and then set value so this this all the name first name last name address everything will be provided in this object basically we are providing this address is object which will contain all these informations like first name last name company address one then address two etc this one and this line one line two city state postal code etc all right so once uh you have done uh it's pretty simple like said values and then click etc okay so that should create a account okay the signup process should be completed you need to click the register button also yeah submit button all right so that will uh complete this whole process of signup now i go to the step definition where i need to create that object uh i need to call that object or other create account function so what i'll do i'll just import uh i can say auth page all right yeah what page let's say hot page from page objects and then art page over here and i call this function function name is create account i think let me see yeah and this is the method create account all right so it takes uh two [Music] uh two parameter like email id and address okay so email id and uh address is object address object uh this two thing we need to create over here okay so the email id uh you can say constant email id or something uh constant email id okay so this is my email id like i can say my email uh then something one two three um yeah then other gmail.com all right so this is a hard coded one so we need to make uh this is a unique uh email id each time so what we can do we can use the random method okay uh from the javascript and from the node then we can replace from one to three we can replace one two three each time so how we can do uh is uh maybe let's create a random random string so this one will give me a random string okay i can use this random string and i can also use here template uh string as well so instead of this i can use like this dollar okay so basically each time it will create some random string and it will just append over here my email then uh this random thing and this is the gmail so this same email id i will be just passing over here similarly i need to create an object right the object for the address object here constant address object you can see like that basically we need to pass this first name last name company address one address two okay so this name also you can hard code here but i think we need to generate a unique name each time as well so what we can do we can use a third party library as well so if you go to the npm js np mjs okay so here we just search for faker okay so this faker uh it will generate some fake data like faker.name.find name and it will just give us some random effect name each time okay each time it will give us some random uh so these are the method these are the things available for address for a lot of things are available okay so we'll just install this third party library uh in here in our project okay and go to this uh directory just npm i faker okay so then uh how to use it you can also see here uh they're using like a faker dot name dot find name first name or whatever okay let me see okay it's been installed over here so what you need to do is you need to just import that i import that faker sorry faker from that maybe faker yeah you can see uh here it is available just copy this faker i can see faker dot name dot i think the first name it's not giving the introductions uh sorry you need to be here so yeah here like this okay similar way faker dot name i now you can see the intelligence is coming faker.name uh then dot okay first name then you can see last name yeah like that okay so similarly for city uh you can use um for company like you can use the faker dot company android company dot company name something like that all right similarly for faker dot address okay dot maybe you can say address one street street name uh yeah street name or street address okay so something like that you can use for address two also uh faker dot uh random under some alphanumeric uh you can get like five alphanumeric data right so this is how you can uh generate a random uh thing a random random string or a polynomic whatever and you just created this object and just pass this object to this particular create account method so basically it will go there and check for this and this address you can see that object we are calling uh for setting this input first name last name email etc okay android dot last name something something here you can see so we are using uh each each time a new uh new ad this information will be passed in this object okay so this is we can do now okay now we can run from here so basically what how you can run this node uh you can directly provide this wdio wd io dot conf dot js so in windows i need to provide the whole bin then wd i o and then you need to run it okay so uh let me see yeah node wdio wd i o dot js uh oh okay i am doing some mistake over here so you can use like npx uh wd i o run uh then have this file this wdio conf dot js okay so you can write a wd i o uh configuration.js file and when you run it it should work okay and so to go to uh home page then click on this sign in link then there and it will sign up okay let's see okay store the first file on first page so basically we are getting one error over here it's saying some wdio utils in a reference chai not defined okay so uh you you need to um you need to add something uh to make make it work okay let's do uh do that so for this i need to install one more dependency npm install you can say this is called expect web driver i o okay so this dependency need to install it over here okay so you can see this package is being installed already you can also check in the package.json okay so now we go to wdio uh config file so here we have added uh something called chai right so here what you can do you need to use this expect webdriver i o as well and here we can have another global variable called global dot maybe wd i expect uh equal to global expect global dot uh expect okay so this one uh we'll say to this wtio uh expect okay and then the next thing uh that will be doing let's see whether this uh this is working fine or not in in our case now okay i'll just clear it and pm run uh maybe that's the yeah you need to use npm uh npx wd io run configured this thing okay so successfully running till now uh opening the browser let's see whether this works this time okay i think again it got failed uh here in valid session i think got one more exception somewhere uh okay jai is not redefined okay let's see okay so the error was due to this chai library basically uh if you see the documentation of web driver io the chai is already um included other that expect the expect assertion is already available in web driver i o runner okay so no need to explicitly uh install chai library for this so you can uh install both uh so how to do that so this is the way in before you can just copy paste this information like this and paste it and it should work but i think it's already already there so what i do i'll just comment out this section uh i maybe i'll just remove this because i don't need this uh in my test and also from package.json if you see if it is there in any dependency dev dependencies somewhere just remove that and after removing that just npm i npm install you do and it will refresh your node package your dependencies okay so once you do that one one more thing that we we did mistake here we forgot to add [Music] a weight so that's why it was failing in [Music] step here okay so make sure if you are calling any method that is a synchronous so you need to use a weight over here okay so after removing this let's try to run this and let's see whether this is uh working on npm run test because if you see in the package.json i already have this script already written okay so it will try to run our wdio config.js okay so it's running now okay so it's uh coming to here in the home page then it should click on the sign in button after clicking on the sign in button it should go and create the account okay yeah i think that's all we have done for the first uh step depth in uh first scenario create an account okay so basically it's a created one account uh the next step would be to login okay okay so i added the second scenario that is sign in with a newly created account so we created a new account account already and after that i will we need to login using the new credential so if you see here in the earth step we generated email id basically the new this email id that need to be used uh in in our step definition uh in another step representation where we'll be logging in okay so let's see how we can reuse the same um same email id and the password i think the password that we use here if you see uh it's a hard coded one so the password i think is a password one two three okay so yeah you can see here input password this is password123 and for the account email that we use so the email that is being generated randomly yeah okay so we will create another um method over here for logging okay okay sign in using existing uh or maybe newly created account all right so this is my method for signing okay so here i have input login email so basically uh you need to get this email and password locator and sign in button also so i already have that uh in [Music] in in this auth page okay so i'll be just reusing that input login email uh value the username so this one uh we need to provide it uh from somewhere okay maybe i can say username and the password password is already there so no need to provide the password so what i can do i can just replace it with that variable okay so this is a sign in function and we created uh this step definition uh maybe let me create this a new step definition for this okay so this is my new step definition uh in auth.step.js file uh login using a newly created credential over here and here i need to provide the email user id or maybe username that we created already in here okay so how we can share it we can also make it as a global but one more uh method i can so where we can reuse this method from or we can save it somewhere in the global variable okay so let's see how we can do that if i go to the wdio.config okay so here we can save it i'll go to this section over here before feature and uncomment it and so this this function will this is a hook a cucumber hook basically this will run uh before running each of the stepped each of the feature files okay once uh running a feature file it will run just once yeah so what we can do is we can we can define one object and within that we can just have a variable something say shared variable or something like that okay i can [Music] this is object and here what i can do email i can say this is now empty or null or whatever you can say and similarly address also we need for uh to store for address okay so this is object type email and address both are available in the shared variable okay so this one we can access here uh if i go to auth page uh okay so we created these in authentic definition i believe here okay so i can do something like that global dot share i just copy from here share variable okay dot email uh dot email uh let me see this is yes dot email or maybe username whatever you can say equals uh whatever email id is being generated okay similarly uh global dot uh this address also you can watch whichever the address that we created uh this one address right uh we can save into this object okay this is the global object basically equals this address object okay so now uh this two uh value is being saved to this global shared variable so we can use this variable anywhere so similarly in case of username i just use that global shared variable email so this one will be available okay so we can just pass this username or user id into the sign in so this is the name it's coming here then password okay yeah also we need to create a step definition for this one also i am on the sign in page so when you create this uh new account right you already signed in so you need to sign out then you need to go to the sign in page then only you will be able to log in with the newly created credentials right so what we do we just create uh one more uh method over here in the auth class and first we need to sign out okay then we need to sign in okay so written this one is i am on on the sign in page basically i'm checking whether the sign out button is present or not so if you uh logged in right with a valid credential let me see with my credentials okay so when you log in uh or maybe when you create your a new account so this sign out uh button should be displayed so just check whether this sign out button is present if it is present and click on or maybe sign out okay so this in auth page uh you need to create another method for the sign out okay we don't have any method for that we'll just create a sign out method okay let me just quickly create over here here sign out similarly for async method all right so like this uh once you create the method just need to click on this sign out button okay so this is log out button dot click you yep so after that some validation is there like whether sign in button is present or not uh that image logo is present or not then navigate to login page okay so just in the home page uh i call this navigate to login page so if the home page is not there then just import this home page page object dot home page okay so this is the home page and within the home page we have this navigate login page so you go to the navigate to the login page then maybe what i'll do i'll just cut and paste above it so basically this is the first step i'm on the sign-in page then only you will be able to log in using the newly created credentials okay and that credential will be stored in the shared variable look global variable and you just get it that from there okay so you need to make sure this all uh sign out button uh is already you captured right uh then also uh you need to verify uh this shared variable email already there okay so then i think this would work um let me rerun again okay so if i re-run so this time let's see okay so it's loading the page okay creating the account registered then you see it should sign out okay sign out and it is in the sign in page now it is signing in with the new account okay so this is the one uh second scenario uh this is until here is completed and one last thing uh left is uh then i shall verify the address information in my address section okay so let's create this step definition okay copy for this uh i'll create another step definition for my uh information or my account information so what i do uh i'll create my account dot step dot yes okay so this is my account uh step definition and similarly i can create one more my account detail page objects as well page dot js okay so this is the class okay so this is my class my account having my uh button of my address those information so whatever you see here this is my address button okay then we have button of order history so all these buttons you can get it here then personal information whatever all right so we are validating this my address click on this then after that you need to verify this title and this first name last name and this buttons and this add a new address button all are present or not so that thing will be doing in here okay so here now we get to address so it will just click on this previous button then after that it should come here then you can validate your address information you can also get this in the shared uh get the information from the cr object okay okay uh let's save it uh this one and for the step definitions i created already one so what i do i uh import this given uh yeah i think given only needed here okay let's run this test now uh it will navigate to this uh two address okay so you can validate this as well okay we can create a separate method for that in my account uh then we can just set it up everything and validate it okay let's uh run this two scenario and uh in the next video we'll be covering uh another two scenarios okay so if this works okay then uh we'll be also adding some more validation on this last step as well okay so before that also what i can do if you want to open this browser in full screen mode you can also add something in here as well maybe before feature file i believe let me see this is before scenario uh you can add also before scenario fine uh our before feature also is okay i believe browser dot maximize window okay so this one will open the browser in the maximize mode as well so you can see the test pass six uh yeah six refinances got passed already all good so in the next uh next video i'll be covering these two uh the remaining two uh scenario that we have written in our text editor okay so yeah that's that's all for this video and see you in the next video then bye for now

Channel: OpenSourceAutomation - Afsar Ali

Views: 1,132

Keywords: webdriveriov7, cucumber, bdd.webdriverio latest, webdriverio full cource, webdriverio, automation for beginner, first webdriverio

Id: VOzGnMktPho

Length: 114min 33sec (6873 seconds)

Published: Thu Oct 21 2021