hello everyone i'm shadab sakhi from test automation and i'm going to start my first video series on this channel for web driver io where we are going to use typescript as a language and cucumber framework so in this series we will see first what uh what are the prerequisite to start the journey of web driver iom then we will try to explore the official documentation with the help of official documentation we'll try to configure web driver io in our system and then we will write our test case executed also we'll explore about the assertion and then we'll try to customize or optimize our code with the page object design pattern which will make our code more readable after that we are going to add few more test cases to cover the functionality or or the commands that we use on the daily basis after that we will try to cover hooks as well and at the end we will integrate one of the reporting tool so with that let's start our journey and we'll see what are the prerequisite now as a prerequisite i expect you to have a basic programming knowledge to start a journey with me as we are going to use typing as language as we are going to use typescript as a language i recommend you to have basic knowledge on that if you don't know i'll leave a link in the description so that you can just go through explore it and then come back here also i expect you to have a basic idea that how we can write the element locators and how we can find the elements of the webpage and obviously we need to have a willingness to learn so with that let's start our official documentation exploration so this is the web page of our driver i o where you land you first things you'll notice is this lively robotic harmonic logo and then there are a few menus where you can go through one by one now we have first menu as a docs where all the documentations are kept we have an api where all the apis are functional the functions available in broad web driver i o will be available there and then any blogs which is their recent happening blogs also we have a contribute menu where you can find the guidelines that how you can contribute from your site to web driver io and then if you are looking for a help for regarding web driver i o in this community tab will have all these options to get start with or with it it will give you the idea that whom to reach or where to reach so with that let's uh open the first link so in the docs option first things you will see is what is web driver io in this you these all are well documented here everything so you can just read through understand what is web driver or why it is required what is the benefit i'm not going to go detail into that you can just read through and understand it what we're going to cover now is that explore all the menus possible options that is required for you so after what is web driver i o there is option called getting started which will help you to start building your framework or to setting up your framework we will explore now again after coming through all this menu and we will see what it provides and if you are able to configure with this documentation or not then we have few boilerplate projects where default uh if you want to see that if you want to start your project and you don't know where to start and you want to have some basic codes already written you can go through so there are plenty of boilerplates projects here already given in the link you can just go and start you know you can clone it as per your need and you can start writing itself then we have a few cool concepts available here which talks about the basic uh details or how you can you know configure your type script how you can set up type what is the difference between sync sigmoid and many more uh similarly we can you know take help of configuration where you want to configure if you you know type script or table or other options proxy setup how you can do and then you have a guide you can you know see how we can integrate uh your test case with uh cloud or auto or docker or github actions then we have a reporting details where you can see what in our reports are available and how to configure it also we have a services where you can explore the what kind of web drivers or services our driver services are available next we have a api menu in the api it will talks basically all the functions or or the functions available or the api is available in the web drive io we can just read through it i'll just go ahead and i'll show you one that is inside the element so all the element related apis that you need to perform suppose you want to perform a click or you want to perform a clear value you can add a value you can double click you can just go through the documentation and read through it and get get the idea for example you want to perform a click in web drive i o just just see here how how it you can do it so you can read through the details you can go through the you know how we can use it also it will give you a sample example of code that how you can utilize it it's a well documented place you can just explore go through one by one and you will have a pretty good idea to start your journey then we have blog where you know latest happenings will be written here on this recent post blocks will be available regarding web driver related to web driver i o then we have if you want to contribute to web driver i o you can just go through this link it gives the detailed guided guide of how you can start your contribution if you don't know how to contribute it will you know help you to reach to the part in a proper channel or people who will help you to understand how you can contribute so this is in a detail again the documentation and then community so if you if your stack somewhere you need help from the web driver i expert there are many people who are contributing here you can just uh see there the list of people who is contributing also the proper channels or the website where you can ask your question from stack overflow for github or in the community channel you can ask your question then if you want to look for some resource whatever available in the internet you don't have to go google and search one by one just click on this tab and you will have you know good examples of you know documentation so the video channel youtube channels available here web driver io has listed already so here it says about the documentation the community the twitter handler of the people who is managing the plugins the reports also if you see here the articles written by articles written and the videos so this talk about the youtube videos or are there channel videos where they are covering web driver i o for sharing their knowledge and few talks webinars and confidence so you have all the resources you required also the materials if you go through right you can just go through any workshop and it says that you can use this asset if you are creating any content for educational purpose you can use this robot and that's what i have done i have used this humanoid toggle in my ppd and to add one more thing is that if you want to see that in which version you are right now or web driver i o you can see here this is the version version seven if you can if you click here it will go in detail that what other versions are available so if you see here version seven is currently stable you can see the documentation release notes and the version 6 is a long term support as of now until 2 2 0 2 2 available and then version 5 in version 6 is already deprecated then there is a link for web driver io official git channel and then you can change your theme so if you don't like dark theme you can you want to go with the white you can just click here and then if you want to search for this um you know search through all this website completely website anything you can just make use of this search option available and then you can search any functionality so with that exploration of web driver io now let's try to set up a project now to set up a project first thing you need is a visual studio code as an editor recommended now to download you can just go to google type a visual studio code download and you'll you'll have a link it's a pretty easy setup all you need to do is just download exe file and click next next next and then install it it is it's fairly simple uh setup and then also you can do a node you need a node.js to be configured in your system for that you can just go to google again type node.js download and you'll be navigated to the page you'll have a suggestion here you'll see this node.js.org download once you click you'll be landed to this basically you'll be landed to node.js download page you can go here in the download page and you can select which for which systems if you are on windows you can i'll suggest you to always use installer instead of binary and then based on your 32 or 64 bit system you can just install your binary file so if you are in mac or linux you can cross accordingly you can select your choice and then you can install node.js as well again uh once you download the exe file you just need to double click click on double click on it and select next next next and then just installation will be completed once installation is completed you don't have to do any further setup with that but you need to verify whether node is installed or not in your system for that what you need to do is first things you can just open and freshly after installation open a new command prompt and then just type node hyphen v and click enter now if it is installed properly you will see the version for me the current version i'm using is 14 as as of when i'm recording the video and then in future you might be different if you are seeing the video later also you can validate if npm is installed now npm you don't have to download explicitly it comes with the node a itself so as soon as you install node configure node npm also will be downloaded to verify you can say npm hyphen v and then click enter and if it is configured properly you will be able to see the version of npm as well so if we see here we got the version so we have a successfully node is configured and even the npm is configured i have already downloaded visual studio code so i did not walk you through how to install it but basically all you need to do is go to google click on um search in a google just type download visual studio code and start downloading so this is the visual studio coder now then we will move to create a first very first project for a webdriver io let's start with that so what i'll do i'll go to my desktop and i'll try to create a project here so i'll what you can do basically is you can just right click here and then you can click on new and then you can create create a folder and then you can navigate you can do that or you can just do it from command line i'll just say mk.dair to create a directory web driver io cucumber ts you can give any name as per your wish i'm just saying web driver i o cucumber as a framework ts stands for type received as a language and after creating a folder i'll navigate to that folder for that cd f driver i o combo yes now so if you see webdriver i o folder is created and i have now navigated to that folder now what i'll do first things i'll add this folder whatever i have created to visual studio code so let's go and do that i've opened the visual studio code click on file menu click on open folder select the path where you are creating your framework so i'll sell web drive in desktop i have created this is the folder i'll select the folder name and click on select folder okay so as you see now the web driver is already mapped here in my project folder but as of now there is nothing that i have configured any files so now let's create a file now what we need to do is let's go to the official documentation what our official documentation say about the configurations let's get the help so we need to go to docs click on get start getting started and just read through it now in installation says use npm or yarn to install webdriver test runner in your node.js project so now first things it says that we need to create a node.js project we have created a project folder but we did not create a node.js so we need to initialize this project as a node.js project for that the command is npm init now npm once you say npminute and you click enter you will have some you will be asked some questions what and all options you select so let's click enter and see what we are getting or if you want to ignore this um complete questions and you can select all the default configuration you can simply say npm minute space hyphen y which will skip the questions that you will be getting now and it will directly create the you know it will create a node project with a default settings so it says the package name now the first time package name will be taken uh based on the folder name so if you see webdriver i o cucumber ps which was my folder name it taken i'll select here you know i'll go ahead with this package name it'll ask for the version i'll go with the same version whatever is there description learning if there are your framework entry point you can set by default index.js test command we'll see later as of now let's go with the default git repository i'm not initializing in repository for now i'll leave it a blank keywords basically task any keywords you want to use i'll just say f driver i o comma separated i'll add multiple type script comma you can skip if you want you don't want to give any keywords you can skip that's not mandatory author i'll give my name again these are optional you you want to skip you can skip it license ise by default select yes now to ask you are you okay with this configuration that you have selected and i'll say yes i am okay with this now with this as soon as you click here enter you will see here a package.json is created now with this we we can be sure that we have initialized our project as a node project and there will be a few configurations that will explore up in a while what configurations we have but let's follow the documentation so what it says use npm installed web driver i o test number in your node.js project so we have created a node.js project now we can use npm on yarn but we are using npm here so we'll just copy this command and execute it so i'm just copying it click on the copy and what i'll do either you can open terminal here but i have already opened my command so i'll just go with this i'll just kill you this stuff what all you just paste whatever you have copied nothing else you just need you need to make sure that you are in that project folder itself which you have mapped here in the visual studio code so just say npm install and click enter now it will start downloading the cli it takes a while to complete the download so what i'll do and the pause the video and i'll come back once the installation is completed okay so installation is completed so let's see what it so once installation is completely you'll see some logs here and you'll see zero vulnerabilities 35 packages are looking for funding now we have few you know configurations with with cli will have some sub dependencies that all will be stored now some new things you will see here is that packagelock.json node mode is created don't worry about it resolve related to dependency but first things will see as soon as you install any dependencies using npm install command which we did here npm an entry will be made in package.json so if you open here package.json file you will see in dependencies section an entry is created for a same depend here wdi or ci with the version name and this dependency will be downloaded and stored in node models folder so node module folder is nothing but all the dependencies and package.json is nothing but managing or keeping the record of your dependency that you need for the project then other few options are there which we have you know set up con or selected while doing npm in it initiating the node project the you know package name the version the description and anything so test here nothing but by default it decided we're going to change it later and the keyword we have selected by comma separated so the package.json is basically you can relate it if you have already worked on selenium you can relate it with bom.xml file where in your maven project you maintain all your dependency in pom.xml and their versions in node project that same thing will be done in package.json now as you have installed that now let's see in the documentation with the next step now it says setup once you have installed cli you can now put strap a hello suit in your project that basically says that once you have installed the cli you can start configuring a webdriver i o i'm just copying the command i'm not writing anything extra i've just copied this first command installed it i'm going to copy the next command and i'll just go to here basically so what i'll do i'll just clean this up and paste it again i'm just copying pasting it nothing else now just notice again one more time here in the package.json as of now dependency is only one cli now let's install now what it does basically it will start a configuration helper will start it will ask you some set of questions that what kind of framework you need uh what compiler you need what services you need based on your requirement you can select the options and then you can your process will be ready to you know start with your you know basic setup let's click enter and see what options that we're getting okay so you see now wdio configuration helper is started and the first question asked is that where is your automation backend located it means that where you want to keep all your backend automation now there are many options that we have in expertise source lab you have a browser stack or testing boot lambda uh you know or any services or if you have a selenium cloud for simplicity i'll keep it for now in my local machine is it it is already selected if you want to select different option you can just press arrow down in your keyboard and it will be showing your different option so as of now i'll go and select on my local machine and i'll click enter that option will be selected now it asks the second option is the framework that you want to use we are going to use cucumber forever can select that click enter it is asking which compiler you want to use we will be using type script enter now it is asking where you want as it is a cucumber framework you have selected is asking where you want to keep your feature file whereas if you select framework as a different option it will not ask your feature file so it is that intelligent based on your previous options that you select your next command will be generated so now it is asking where you want to i'm okay with the basic default location that is suggesting so let's go and click and draw then it asks where you want to keep your step definitions i'll keep in suggested location now it is asking do you want web driver i o to generate some test so if you select yes what it will do it will generate some sample test cases with the feature file and the you know as step definition and the page elements everything will be there by default which will be very help to just quickly check if the setup configurations are fine or not and it will also help you to start with how to write any or you know pages or how to write a feature that will help you to understand so i'll select yes for now and then it asks do you want to use page object design pattern if you select yes accordingly the page object model also will be created so i'll say yes again where you want to keep your page objects in a suggested location and then it asks the reporter you want to use i'll select to reporter as of now one is a spec and another's earlier report so you can this is a multi-select option you can just move up and down uh arrow key in your keyboard and then you can press your space button in keyboard which will select or unselect it or uncheck it so i'll select spec analog and i'll click enter then options are to you know set up which services you want to use suppose if you want to use cross browser test you can use you know selenium standard which is which will makes your life very easy but for now we're going to start with chrome driver in upcoming videos you will see how to use standalone and how you can do cross browser test now first uh this time let's go with the chrome driver click enter again base url which you're going to deal with basically if you're going to deal with only one application you can provide a base url here i'll go with the first whatever is the suggested we can change it all these configurations if it is required later from the configuration that will generate now if you notice here we have only two file and one folder now let's click on this and start the configuration now if you see here installing this wdio package so based on the selection you are made here this required dependencies or packages will be done downloaded now it's going to take a while so i'll pause the video here and i'll come back once it is completed okay so the configuration is done as you see here a configuration file was created successfully to run your test execute this command this is what it says now another thing is that to have a type script support please add the following packages to your type list so web driver is suggesting if you're using type script as a language you need to have this type skeptic related configuration in a type list so basically what you need to do is just copy this command and just go to your project folder right click create a new file here basically i'll say now the file name will be if any type is calculated configuration should be in ts config dot json file this file json file will hold the type script related configuration so which i have just copied it and i'm testing here i'm not writing an extra code now again it's just a copy paste again pasted i'll just save this okay now configuration is created now i told you right that before setting up we had only two file and one folder was there package.json package lock and node models now we just create ts config manually but we see wdio.ps file is created and feature folder is created also there are some extra entries that were not available earlier before configuration only wdio cll is there now we have multiple dev dependency now this is nothing but when we select our options in your with a configuration helper whatever is required for your project that package entry will be made here and a related dependency will be downloaded and kept under node models so this is your basically all your package manager you can say so all your dev dependencies will be listed here now what basically we are ready to execute your test case we have already said that we want to generate few test cases by default now where it is generated just see under feature folder you see one feature file is created one step definition is created and even we have selected page object model as yes so few page locators is always also created by default we did not write anything as of now so we we have things uh ready to execute now all we need to do is just follow the command now what it says basically that to run this command but it will throw an energy i think there is some mistake here in this command we have selected typescript file so basically this should not be a gs it should be a ps that is the one i i think there is a gap here and we can fix that we can contribute you know in our community guidelines and then we can you know raise this fix so what i'll do now just copy this and you can run this command to execute it but for now our framework is ready with the basic configurations and it's ready to you know execute and run so with this uh we'll end our lecture here itself and we will see the you know uh future you know the execution part and all the configurations later in upcoming videos okay so now let's recap what we have covered in this video so we have just gone through the prerequisite we have also explored the dawfish official documentation and following the official documentation we are able to write the web drive we are able to configure web driver io also we have seen that default uh you know test cases are already generated and we can execute now next video will try to execute that test that is created and also will try to write our own first test case so with that thank you for watching