Session 37 - Selenium with Java | JavascriptExecutor |Scrolling Pages|Upload Files | 2024 New series

So today uh we're going to discuss one of the most important topic so which is uh JavaScript executor so basically JavaScript executor is an interface so which is available in Java which is available in SEL web dri and which is basically in interface okay JavaScript executor is an in interface so before understanding this JavaScript executor so we need to understand what are the different interfaces and classes are available in s web driver and what is a hierarchy okay so first we need to understand this and then we will come back and discuss what is the

use of JavaScript executor and how we can use it so earlier we already discussed some time back but can just repeat this once again in selenium there are so many PR different classes and predefined interfaces are already available so if you look at this picture the root interface is search context so the whole total web driver so s web driver the root interface is search context and the search Context is extended into again one more interface called Web driver interface but normally we don't consider such context we'll start from the web driver is a root

interface but actually the web driver is also extended from the search context interface okay now this web driver interface is again implemented using remote web driver class so remote web driver is a class and you can see here the blue color boxes are all are classes and the pink color uh boxes are all interfaces so the default or root interface in selenium is web driver is search context and that is extended into web driver interface and this web driver interface is again implemented using remote web driver class because whenever you have some interface we should

have some class which is implemented that interface similarly web driver is an interface which is again having so many methods because as I said in interface which contains static methods default methods okay and Abstract methods there a number of methods are there in web driver interface and those methods are implemented using remote web driver class and again this remote web driver class is extended into multiple classes According to the browsers the remote web driver class is extended into Internet Explorer driver Firefox driver chromium driver Opera driver Safari driver and Etc so each and every browser

is having their own class which is implemented and chromium driver is again extended into Chrome driver driver and Edge driver so Chrome browser and Edge driver is having same class internal class is same which is chromium driver so this is the hierarchy now if you look at here remote web driver is a class which is implemented web driver interface and not only this web driver interface remote web driver is also implemented some of the methods from JavaScript executor interface and other side takes takes screenshot this is also an interface so remote web driver is implemented

web driver interface not only web driver interface along with this web driver interface it is also implemented another two new interfaces which is Javascript executor takes a screenshot okay remember this remote web driver class is implemented how many interfaces three interfaces one is web driver inter interace another one is Javascript executor interface and takes Screenshot interface all three interfaces are implemented using one single class which is remote web driver now tell me what type of inheritance it is now how many parents are there for remote web driver class first of all tell me how many

parents are there for remote web driver class parents so remote web driver classes implemented three interfaces web driver interface JavaScript executed interface Tes a screenshot interface so these are the three parents of remote web driver interface so remote web driver class so what type of inheritance it is three parents one single child multiple parents single child what type of inheritance it is multiple inheritance okay in the multiple inheritance we will have a mul multiple parents having single child okay so that we understood so remote web driver class is implemented web driver interface JavaScript executed interface

takes the screenshot interface so these three interfaces methods are implemented by using single class which is remote web driver perfect fine now is there any relationship between web driver and JavaScript executor is there any direct relationship between web driver And JavaScript EX no right so takes a screenshot web driver is also there is no connection so in the next classes I will talk about t screenshot interface today we will focus on the JavaScript executed interface so if you look at this hierarchy web driver JavaScript executor so these two don't have a direct relationship they are

two two different type of interfaces independent interfaces but both interfaces are implemented by single class which is remote web driver and again this remote web driver is a parent of all other classes all other classes okay now this is a hierarchy of all the classes and interfaces in selenium so if anybody ask you during the interview you should be able to explain all these classes and interfaces the whole hierarchy you have to be in your mind so what is Javascript executor now JavaScript executor is an interface which is implemented by remote web driver along with

web driver interface so so far what we have understood is only web driver interface is implemented by remote web driver but not only web driver interface remote web driver class is also implemented another two Interfaces we can call them as a parallel interfaces of web driver so JavaScript executor and takes screenshot so these two interfaces also implemented in remote web d okay just a second yeah just a second guys can you see my screen okay so JavaScript what is Javascript executor JavaScript executor is an interface which is implemented by remote web driver class just like

a web driver interface how it is implemented similar way it is also implemented Java Script executor interface okay so this is a Clarity which we need to have then what is a use of JavaScript executor interface and where exactly we use it in JavaScript executor interface we have one method called execute script in JavaScript executor we have one method called execute script okay so what we will do with this particular method JavaScript executor Interface is having execute script method and by using this method we can execute JavaScript statements we can execute JavaScript is another language

Java is another language okay JavaScript is a basically a scripting language which we can use for web development Java is a programming language through which we can develop programming language okay tot business logic we can develop by using Java programming JavaScript is a a language scripting language which we can use in web development so we can execute JavaScript statements so what is the use of this execute script method which is comes from JavaScript executor is we can execute JavaScript statements using execute script that means in our selenium web driver code or in Java code if

you want to execute JavaScript we can use execute script method from JavaScript execute okay then why we need to execute JavaScript statements in our web driver script in web driver code or web driver automation script why we should use JavaScript execute why we should execute JavaScript statement what is the necessity of executing JavaScript statements That we need to understand so now let me show you a scenario based on that we can understand what exactly and where exactly we have to execute JavaScript statements using execute script method and listen this very carefully step by step I'll

make it is very very simple and also interview point of view also it is most important you should able to explain this so as I said JavaScript executor is interface which is having execute is a script is a method through which we can execute JavaScript statements but why do we need to execute JavaScript statements in selenia web driver so that we need to understand so normally what happens is let's say in your web application you can see different type of web elments it can be radio button or checkbox or input box drop down whatever it

is let us say I have some button called click there is a button so normally if we want to perform click action on this button in web driver how we will do we will identify this element and that element dot click so normally we will call a method called click method let's say this is my submit method submit button and if you want to click on this button we will identify this Element and perform the click action dot click so when I say dot click okay then what will happen actually so click is a method

so whenever I call this click method this will internally execute the code so whatever the method is implemented by Selen web driver Whenever I Call this click method this click method internally will'll execute some statements we'll execute some statement that means whenever you call a method that method will perform some task so that we already learn in Java sessions whenever you call a method that method will perform certain task similarly when you call this click method when you call this click method it will perform certain task but how it will perform the task it will

execute some statements or which whatever the code or logic is implemented as part of this click method will be executed so what this code will do this will actually perform the action on the application this is your application so what exactly we are seeing is whenever you perform click action it is directly going and clicking on the button which is there in your application let's say it is submit button so when I call this click method it is Executing set of statements and these statements will actually performing the action on the submit Buton so this

is what we understood so far but actually what happens is when you call this click method internally it will execute some JavaScript statements why because only through JavaScript we can interact with the web elements because the web elements are designed by using HTML and the action suppose if you click on the button what should happen that is designed by the Javas script so only through JavaScript language we can talk to the browser or we can interact with the elements so what exactly happening is whenever you call this click method internally certain JavaScript statements will be

executed and these JavaScript statements are actually performing the action on the application this is the process I'll repeat once again so whenever you call a click method and not only click method any method from the web driver whenever you perform certain action on the web element you are calling submit or send Keys a click method right so the multiple methods we are using so far so whichever method you call from web driver Internally execute the JavaScript statements these JavaScript statements will perform the task on the application or on the element this is the normal process

but sometimes what happens is when you call this click method because some reason it is not directly able to execute the JavaScript so click method cannot execute this JavaScript sometimes maybe a number of reasons so whenever when I call this click method this click method cannot execute the JavaScript statements in those cases what happens this will throw an exception called element intercepted exception element intercepted exception remember this exception name which is very very important element intercepted exception so when you will get this element intercepted exception when you call any method from the web web driver

internally execute the JavaScript statements JavaScript statements will actually talk to the browser or talk to the elements but sometimes what happens when you call this click method this click method is not able to execute this JavaScript statement internally so this will throw an exception called element intercepted exception okay so Then what we should do is as a workaround instead of calling this click method because whenever you perform a some click action it is throwing element intercepted exception why you getting this element intercepted exception because of JavaScript statements are not executed by click method so now

what is the remedy for this instead of executing this JavaScript through click method we will directly execute this JavaScript method JavaScript statements in our automation code without calling click method okay so without using this click method we directly executing the JavaScript so whichever JavaScript is executed by click method we will directly execute those JavaScript statements in our web driver using execute script method okay so instead of Click method we call execute script method from the JavaScript executor in this we will pass this JavaScript statement inside this execute script method then what will happen so this

will execute script method we execute the JavaScript statement and that will interact with the browser so that will perform the click action so what exactly we're doing when I perform click action it is calling JavaScript And JavaScript is actually performing the job but when I use JavaScript executor what exactly we are doing we are we are directly performing the action instead of calling this click method we executing this JavaScript statements directly by using execute script method in our web driver and so that action will be performed on The Element this is a concept everybody's understood

so far so what is Javascript executor what is execute script why we need it and when to when we need it so this is a very important so this context you need to understand okay so not every method get index get text not every method action methods action methods in the sense what click Send keys so sometimes we perform some action on the element getting text is nothing but what that is not action method get text is not an action method text is already there we are capturing it but we are not performing any action

on the text right so not that type of methods action methods means what click is an action method sendys is an action method so you understood my point right so forget about Mouse actions Mouse actions are different Mouse actions are different Mouse actions we can perform by using actions class methods we can perform I'm talking about web element methods click Keys belongs to web element method right and send Keys also belongs to web element method so normally these are the two actions we do on the web elements again get text get attribute value these are

not action methods so those methods we can use to capture something from the element but we are not performing any activity on the element you need to understand this point only click and send Keys these are the only two methods we can call them as action methods means you can perform some action on the element using either send keys and click so click method normally where we will use on buttons radio buttons checkboxes links on these elements we commonly use click method and where we will use send Keys method most of the times we use

send Keys method for input boxes or text areas right so the even clear also clear means what the text is already present in the input box but we are just clearing it we just clearing it so clear is also not applicable mainly we use sub this send Keys method and Click method just remember only these two methods so rest of the methods we don't find any issue element intercepted exception you will get only on radio button check boxes or input boxes okay so the context you understood right so why we need to execute JavaScript statements

in our web driver that's a crucial Point here so everything is a linked together first thing JavaScript executor is an interface which is implemented by remote web driver class and which is having execute script method and this method by using this execute script method we can execute JavaScript statements directly in our web driver script but why do we need to execute JavaScript statements this is a reason because whenever you call the click method or send Keys method normally what happens it will execute internally JavaScript JavaScript will talk to the browser but some reasons the sometimes

click method will not work send Keys method directly will not work in those cases we will execute these JavaScript statement directly by using execute script then it will able to perform the action on the elements so that is a necessity why do we need execute JavaScript Statements in our automation means sometimes the action methods may not work directly on the element so we will directly execute the JavaScript statement in execute script method okay so this is an example so now what we can achieve with the execute script what kind of statements we can execute I

will show you various examples where and all we have to execute JavaScript statements in our web driver so we'll take some examples and go through them so this is the context guys so this we need to understand first okay now what are all things we can achieve the by using execute first we will see uh example for input boxes and check boxes and radio buttons so instead of Click instead of Click method as an alternative we can use execute script similarly uh instead of send Keys as an alternative we can use execute script so first

we will see those two methods because most of the times uh we will face issues on click and send Keys element intercepted exception okay so let me put some points here so JavaScript executor is an interface which is implemented by remote web driver class execute is A script through which we can execute JavaScript statements and when we have to use this approach action methods like whenever you are using send keys or click method as an alternative we can use execute script not only these some other places also in special scenarios also we can use execute

script method I will show you those scenarios okay so first we will see how to use execute script method from the JavaScript execut as an alternative of send keys and click method so let's go to eclipse and I'll show you one example first let's create a new package so day 37 JavaScript executor demo so don't give name as a JavaScript executor as it is because that is a predefined interface that name is not allowed so we can just put some additional thing like demo sample or test or something like this JavaScript execut a demo I'm

taking main method say finish okay so now we'll see how to use Javas script executor as an alternative of click and send Keys methods click and send Keys methods so for that I'm taking this Application just a second okay so now you have some input boxes here name email phone number and so on and also have some radio buttons male and female so you can handle them by using send Keys method right so you can input boxes we can handle send keys and the radio buttons also we can use uh using send uh you can

click method you can use but if they are working fine that's fine you can use it cck method send Keys method directly you can use it but suppose sometimes you're not able to click the button using click method but xath is correct your locator is correct everything is perfectly fine F but still you're not able to click on that element or you not able to pass the text in the input box you're getting element intercept element intercepted exception so in those cases you need to handle this using JavaScript executor now let me take this sample

application and I'll show you how we can pass the value in the name field let me inspect this element so before that uh let me create uh driver instance okay so the first thing is I'm creating web driver driver equal To new Chrome driver so we need to import this web driver and we need to import this chrome driver now we have imported web driver driver equal to Chrome driver and after that I'm launching my page this is my test autom blogspot.com and maximizing the page okay now we have to interact with this element let's

inspect this element and go to the selector Hub taking this x paath so normally how we will handle driver. find element by. XPath and pass this xath element dot send keys and here you can pass the name so this is a normal way we can handle so let's execute this run as Java application so if normally send Keys is working fine you can go with that no problem so you can see send Keys is working here but in some cases if it is not working you're getting element intercepted exception so then you can prefer to

use JavaScript executor otherwise no need you can directly use send Keys method now the same action I will perform using JavaScript executor Okay so let me uh comment this first so I want to perform the same task using JavaScript executor so For that instead of driver. find element I'm just getting this element I'm not performing any action for now I just get this element in a variable so it is input box and this is a web element there's a web element input box now I want from the uh send Keys action on this element that

means send keys in the sense we have to pass some value into the input box so but I don't want to use a send Keys method without using send Keys method I want to just pass some value in the input box using JavaScript executor we should achieve so how we can do it first thing we need to create a variable for JavaScript executor I can say JavaScript executor uh JS some variable is required equal to and we don't create an object we cannot create object for JavaScript executor why why can't we create an object for

JavaScript executor because JavaScript executor is an interface for the interface we cannot create an object we cannot use new keyword JavaScript executor equal to new JavaScript executor we cannot do that why because JavaScript executor is a an interface okay but what we can do here is whatever driver we created the driver I directly assign I'll assign the driver and this JavaScript executor I'll import from uh org JavaScript executor spelling mistake executor yeah that is imported so JavaScript executor we have imported from or open. selenium so now the first step is we need to assign the

driver object to the JavaScript executor variable so what is this driver driver is a variable of web driver interface type driver is created for web driver interface whereas what is Js Js is a variable of JavaScript executor is there any relationship between these two driver and JS is there any relationship as per the hierarchy web driver and JavaScript executor is there any direct relationship no but what exactly we are doing web driver variable I'm assigning into JavaScript executor variable that's how the statement is seems right driver is what web driver variable that I'm trying to

assign into JavaScript executor variable is it possible or not is it possible or not it is not directly possible but when you do casting it is possible POS so now what I will do is I will do casting process type casting like this now it is possible so we can ass send the Driver into JavaScript executor okay now again if you look at the hierarchy web driver variable I have assigned into JavaScript executor and if you look at here this web driver variable is a web driver type but which class we specified here while creating

an object Chrome driver class Chrome driver class okay that means this driver is a an object of chrome driver class driver is a an object of chrome driver class that we are storing into JavaScript executor variable now just observe the Chrome driver so here it is the object of chrome driver I'm assigning into JavaScript executor variable ultimately JavaScript executor is a parent of chrome driver or not JavaScript executor is a parent of chrome driver or not maybe it is not immediate parent but it is a parent or not yes because Chrome driver is extended from

chromium driver chromium driver is extended from the remote driver remote driver is implemented JavaScript executor so ultimately Chrome driver is also having the methods from JavaScript executor yes or no yes so Chrome driver class is also having everything from JavaScript executor Now what we have trying to do here is the object of Chrome driver are assigned into the variable of JavaScript executor that means the object of the child class we are storing into the variable of the parent interface is it possible or not possible or not yes and what type of casting it is down

casting or upcasting downcasting or upcasting child class object we are storing into parent class variable child class object we are storing into parent class variable it is appcast so same thing we are doing it here so driver we are converting into JavaScript executor then we are assigning into JavaScript executor variable so this is a process okay suppose observe this suppose instead of web driver driver equal to new Chrome driver I'm directly creating an object of the Chrome driver can we do like this also right this is also correct yes or no can we create like

this perfectly fine so instead of web driver interface why should we go with web driver driver I can go with the Chrome driver driver equal to new Chrome driver this is also correct but in this particular context is it correct or now Here what exactly we are doing the driver is focused on the Chrome driver directly Chrome driver directly and the JS is what JavaScript executor now the parent class variable can hold child class variable or not parent class variable can directly hold child class variable or not yes so that is a reason here you

don't need to do type casting you can directly assign driver into JavaScript executor so this is possible so when it is possible if if the driver is created directly with the Chrome driver class object but here also driver is a pointing to Chrome driver object but the type of this variable is what web driver so web driver JavaScript executor is totally two different interfaces that is the reason we have we have to do Ty casting here but if you create the driver directly like this chrome driver driver equal to new Chrome driver you can directly

assign the driver variable into JavaScript executor why is it so because the object of chrome driver class can directly store into the variable of JavaScript executor JavaScript executor is a parent only right is a parent of chrome driver so the child Class variable or child class object you can store into parent class variable directly we can store that is the reason but earlier why we have done down upcasting because we created this variable as a web driver interface and web driver interface and JavaScript executed there is no relation that is a reason even the object

is Chrome driver object we have to do upcasting you have to convert this driver into JavaScript executor then we can store it so what I'm saying is if you are using this particular notation while creating the driver you have to do the typ casting if you are creating the driver in this particular notation then you no need to do typ casting you can directly assign the driver into JavaScript way variable this is the concept okay so based upon how you created your web driver instance accordingly you have to choose either this one type casting approach

or the direct approach so when you're directly creating the Chrome driver class object then you don't need to type cast directly you can assign the driver into JavaScript executor variable or if you get the driver for web driver interface then you have to do the typ casting so is this Clear every one so depends upon your way of declaring the driver instance you need to do this okay and just commenting this so in these two approaches if I go with the first approach then you have to enable this I can put this sorry if you

go with the first approach then you have to do typ casting and if you go with the second approach then you don't need to typ Casting okay now once you created your JavaScript executor variable using this JavaScript we can call one method called execute script so I told you one method right execute script is a method which is available in JavaScript executor so by using this execute script we can execute the JavaScript directly now I'm calling js. execute script now what is the purpose of calling this method because I want to perform same IND ke

action I want to pass some data into this input box that we have to achieve through JavaScript executor so in this we have to pass uh some parameters so js. execute script here the first parameter will be in the double codes we need to put that is actually JavaScript statements arguments of zero I'll tell you what it is arguments of zero dot set Attribute set attribute of value set attribute of value comma uh the whatever value you want to pass that you can specify in single course and then close the bracket and then uh second

parameter is a element on which element you want to pass you can pass it that element and then close it this is the final statement so what exactly it is just observe so Java js. execute script is a method through which we can execute JavaScript statement so this is a whole thing is Javascript statements only this is the web element actually and whatever is there inside the double codes in the first parameter that is a JavaScript so what is an argument of zero representing an element whatever element we are passing here that element will be

stored in arguments of zero and Dot set attribute in JavaScript we have a method called set attribute see uh earlier we have used one method called get attribute of value what is the get attribute method will do it will capture the value of the attribute similarly set attribute method is also there in JavaScript so whatever element we are passing here as an input box that is captured into arguments of Zero and that element dot set attribute value is John so in this element the value attribute is set to John that is actually text so this

is a JavaScript we have executed through the execute script method so what this script will do the script will set value attribute of this element as John okay now let me execute this and show you so I have not used send Keys method just by using JavaScript executor we are doing this so I'll put this as a comment so these are the two statements the first statement we assign the driver into JavaScript executor variable by using execute script method we just pass some JavaScript statement and along with the element now I have not used send

Keys method still it is able to perform the method just observe yes now can see we got a value here John so this is again JavaScript method so argument of zero means what whatever element we are passing here that element will be stored in arguments of zero this is an array array okay arguments is an predefined array in JavaScript so whatever element we are passing as a second parameter that are that is storing in the arguments of Zero and the same element value attribute is set and the value of the value attribute is what John

that's the meaning of argument of zero so whatever web element we are passing as a parameter a second parameter that is going to store in arguments of zero and on that element this action will be performed so if you look at this the values got entered this is a alternative of send Keys method so without using send Keys method if you want to pass some value into the input box we can use JavaScript executor as a alternative yes this always should be zero only because we are passing only one element here so arguments of zero

this should be only zero default value is zero so this is a alternative of send key method so passing the passing the text into input box so what is this this is alternate of send Keys method alternative send Keys method everyone is clear how to use JavaScript executor in the place of sendes method I have not used send method anywhere just a JavaScript executor I have used through which I'm able to pass the data in the input box it doesn't mean every time you have to use JavaScript Exor no it's very rare cases if you

get element intercepted exception okay when you are using send Keys method or when you're using using click method and you're getting element intercepted exception then you can use this as a workaround or as an alternative you can prefer this otherwise no need directly you can use click or send case method so now I'll show you how we can handle this by using click action suppose I want to select a radio button so for radio button also we use click for button also we use a click for link also we use a click method so common

action so then how we can use how we can perform click action using JavaScript executor suppose I want to select one radio button called mail so what we will do normally is we'll select this radio button get this radio button and here I can say driver. find element by. xath specify that and I say click so this is a direct method click so this will perform the action or it will select the radio button now we can see it is selected but sometimes if it is return element intercepted exception it is not selected this element

or sometimes when I click on the button or sometimes when You click on the link if it is throws element intercepted exception then you can handle this using JavaScript executor so for that what I will do is I will store store this element in a variable this is a radio button or yeah so I can say radio BTN this is a web element so it is a web element we able to capture this element now we need to perform the click action on this so we already created JavaScript executor variable so we can just reuse

it you don't need to write two statements every time so once you created this JavaScript executor variable this is one time job so you can use JS n number of times now again I'm using js. execute script method execute script now this time JavaScript statement will be changed execute script and now what are the JavaScript statements we have to execute to perform the click action so to perform the click action again the first parameter arguments of zero arguments of zero dot clicker clicker on which element radio button pass this element as a second parameter that's

it so here what we have done we call set attribute method because we want to set a value into the input box this Input box but this time on this radio button we have to perform the click action now this radio button element is stor into arguments of zero and then perform the click action this click action is coming from the Java JavaScript so this will also do the same thing I'm not used click method here directly I'm not using click method from web driver and this click method is from JavaScript so this particular argument

whatever you are seeing in the double codes that is a JavaScript statement basically so now execute so without using click method by calling JavaScript we're able to select the radio button now you can see the radio button is got selected same thing you can apply for checkboxes you can apply for buttons everywhere so wherever you are doing click action you can apply this as an alternative so you can apply this an alternative so if you want to pass a value arguments of zero do set attribute value is John there a radio button then arguments of

zero. click it can be radio button or normal button link whatever it is whenever you want to perform click action you can just call this JavaScript just remember only these two statements from JavaScript You don't need to learn the entire JavaScript no need just remember this part this is for click action this is for send key action only these are the two actions you need to handle through JavaScript executor and when you have to prefer these approaches whenever you you are getting element intercepted exception then you prefer this so clicking on element this is alternate

of click method okay so everybody's understood how to use JavaScript executor for send Keys action click action please confirm in the chat box everyone so you don't need to learn anything new stuff just you need to remember this part how to pass the value how to click on the element and if send Gees method is not working even though if your locator is correct still you can use this one even though uh suppose click is not working even though if your located is correct then you can use this as a work current so this is

how we can use JavaScript executor for send Keys method and click and not only this we can do many more operations using JavaScript executor so different kinds of scenarios we can handle So now let me show you another concept scrolling the page how to scroll the page using JavaScript executor scrolling so what is scrolling so for example uh I open this web page this is my web page so at the time you cannot see the all the content in the web page you can see some base content now if you want to see more content

you need to scroll down the page like this once you scroll down the page you can see more content so if you look at this this is a scroll bar and this scroll bar is actually belongs to the browser not belongs to the application so developer is not developed the scroll bar actually developer is designed this web page which contains all the elements whatever you can see on the web page only these elements are developed by the developers but the why the scroll bar is appearing the scroll bar you cannot see every time suppose if

your web page is very smaller right if you're able to see all the content then the scroll bar will not appear but your content is very H and if you want to see all the content then the scroll bar will automatically Appears depends upon the size of the page depends on the size of the page the scroll bar sometimes will appear sometimes it will not appear if the page content is very smaller if you're able to see all the content then the scroll bar is not needed it will not display by default but if the

content is very huge then the scroll bar will automatically appears or displayed by the browser so what I'm saying is this scroll bar is not part of your application so we cannot locate this scroll bar element this is not web element first of all the scroll bar is not web element you cannot inspect you cannot get attribute anything because this is outside of the application this is out of the box now we need to handle this we can scroll bar we should scroll down like this suppose I'm I'm looking for some element I'm not able

to see here then what I can do I can scroll down like this then I can find whichever element I want so this is a scenario and this we can handle using JavaScript executor only through JavaScript executor we can handle this so we can scroll down the page in three different options are there one is we can scroll down the page till it reaches Some pixel number and we can scroll down the page till we reaches some element or some element is visible till it visible to some element on and we can scroll down the

page till end of the page or end of the document three three approaches one is we can specify the pixel number so accordingly it will scroll down and then will automatically stop second is suppose I want to I'm looking for some element so I don't know when that element where that element is displayed so I just want to scroll down the page till the element is visible based on the condition so I will scroll down the page till the element is visible so what is the condition here is visibility of the element so I will

scroll down the page till that element is visible as soon as the element is visible then it will stop scrolling that's the second approach third one is I want to scroll down till end of the page okay suppose if the scroll is reached end of the page again I want to go to the initial point then I can go to the initial Point can you can go back scroll down and scroll up both you can do using JavaScript executor so now I'll show you all three approaches one by one let us see how we Can

handle scrolling bar or can say scrolling or scrolling bar this is not a web element remember this this is not a web element this is not part of the page it is out of the box so we'll see how to handle this scrolling and uh I'm taking another example for this scrolling page some other application yeah yeah so let's take this page and in this page I have different country flags see when I scrolling down you can see so many flags in the B till bottom of the page almost uh 170 197 countries are there

197 countries are there but you're not able to see all the countries right only few country flags you can see and if you want to see other countes flags you can just scroll down like this and you can see other countries so now let us see how to handle this scroll bar in this application go back to Eclipse new class scrolling page and this we can achieve using JavaScript executor so as a first step as usual I will create web driver driver equal to Chrome driver and this is my application and then maximizing it Okay

so first thing as I told you three approaches one is we can scroll down the page based upon some pixel number second is we can scroll down the page till we find certain element and we can scroll down till end of the document or end of the page three approaches so now we'll see one by one and before doing any approach first we need to create a variable of JavaScript executor we have to take the help of JavaScript executor so I can say JavaScript so JavaScript executor JS equal to JS is just a variable you

can put anything and JS equal to we need to assign the driver instance and again driver is created with web driver variable so we need to do type casting here same JavaScript executor we need to do upcasting done so now the first approach scroll down the Page by pixel number so I will provide some number accordingly the page will be scroll down for that what you can do is you can take this J JS variable do execute script any JavaScript statement we can execute only through execute script method so execute script and the first parameter

here is window dot uh scroll by window do scroll by this is all JavaScript methods And you need to just remember okay there is no other way window do scroll by and uh initially the scroll bar is in zero position right so if it is here it is a zero position initial position is zero so first parameter I pass zero comma How many pixel you want to move let's say I want to move 3,000 pixels I can say 3 ,000 pixels and close this so this is the first parameter this is actually JavaScript method we

are calling and what could be the second one we don't we are not passing any web element so it should be empty empty brackets you can leave this is a single statement so this particular statement will scroll down the page till it reaches 3,000 pixels but how we will know whether it is more 3,000 pixels or not not so we provided 3,000 it is moved somewhere here it is stopped but how we'll know whether it is exactly moved till 3,000 pixel or not that value we can capture so how we can capture that value is

we have one method here to capture the value so what I can do is system. out. println I'm printing that value again that also we can use by using JavaScript executor JS dot execute script execute script here we have to Pass one parameter called rden window Dot Page y offset page y offset colon and semicolon colon and quotations second argument is not required in put two brackets so let me explain what exactly this is whatever scroll bar you are able to see here is it x-axis or Y AIS is it scrolling in x-axis in y-

axis Direction Y axis right so here we are calling one script from JavaScript executor only we are returning what we are returning window. page y offset means what window means what this whole page y offset means wherever this score bar is got stopped that position it will return that position is return return vertical scroll bar right so this command return window return window do page y offset y offset in the sense y axis and this is a JavaScript statement so this will return exact position where exactly the scroll bar is stopped and that I'm going

to print using print elent statement okay so if you want to check how much how many pixels it is got moved you can execute this command so now 3,000 pixels we moved so this is also should return 3,000 that's our expected now observe so this is the first approach I'm just running it as Java Application so it is every time it is asking for cap just so you can try some in other some other page if you want okay let me take some other page because it is asking for captures and everything we'll take some

large page so that we can easily do it yeah so let's take this page so you can also try in the capture page but uh sometimes it will fail because we manual intervention is required so I'm taking this one so now I said 3,000 pixel so this Butler page should move some where 3,000 pixel like this execute and see run as Java application okay it is already moved here let us try executing one more time see 3,000 is very huge actually so it is went till bottom of the page let's give a smaller number 1500

I've given 1500 yes now I can see from the beginning to here it is just m here till here and if you go back and See 1500 pixels exactly it is mode because we provided 1500 so the y axis is given 1500 so this is actual initial position but when executing it it went to this position so this is a one approach we can scroll down the Page by passing pi pixel number so from zero is initial Point 1500 how much you want to move you can put and this command will return the how many

pixels it is mod So currently 1500 is returned perfectly fine now this is the first approach now the second one suppose I want to move this page so initially I could not see entire page now I want to scroll down the page okay till I see news label or Community poll so Community poll is here so initially you not able to see Community poll but I want to scroll down the page like this till you able to see Community poll this is the label so starting pixel is zero only okay it will start from zero

default value zero initial position is zero from that how much you want to move you can specify this number okay now so if I look at this page I can scroll down the page till the community poll is VIs visible I want I'm looking for this element to be visible So based on the condition I can scroll down but how many pixels is mov I don't know it can move any number of pixels but finally I should able to see this community poll that's my requirement now we'll see how we can achieve this same process

but we need to just change the parameters JavaScript statement we have to change we copy this second one scr scroll the page till element is displayed or element is visible till the element is visible so now how we can change this parameters so first of all on which element you want to visible so that we need to capture so go to the page this is a community pole element I want to visible I want to select so go to selector Hub get this element so this element is pointing get this element and driver do find

element by. X paath and this is element okay so I can say this is a element I'm looking for web element okay now I I want to scroll down the page till this element is visible visible so how can we change this parameter so we can change like this because this time we have an element right so this element we have to pass as second parameter and how can we capture this element Here arguments of zero earlier we have done already right argument arguments of zero so that will capture this element and arguments of zero

instead of window do scroll by you need to call one method called dot scroll into view scroll into view this is a method this is a method so this element is captured into this arguments of zero and what scroll into view method will do is this method will scroll down the page till this element is visible that is a statement and the second parameter should be the element on which element you're looking for that we need to specify but how many pixels it is moved how we will know again we can execute the same statement

return window. page offset so we don't know how many pixels it is moved here we will check so let's execute yes now we can see from the beginning position to here it is got moved and we're able to see Community poll here we're able to see Community poll till this element is visible it is successfully moved how many pixels is moved this is a number so 2,103 pixels it is moved approximately so to get this element on the web page so this Is conditional based okay sometimes what happens is this approach is very very useful

sometimes you launch the page and suppose uh you want to directly perform some action on the element which is bottom of the page suppose here there is a button called vot and as soon as you launch this application and you are trying to click on the vote sometimes it is not directly working why because vot is not visible element so in that case what you can do first scroll down the page till the vot element is visible now after that you can perform the click action so you can scroll down the page till this element

is visible once it is visible then you perform the click action so that will work not every time sometimes okay as soon as you launch your page immediately you will not able to click on the vote button why because that's not visible you may get the exception called element is not visible in those cases this will be very very helpful you can scroll down the page till that element is visible then you can perform the action on the element so this is a second approach first we get the element then pass it here so by

using js. execute script We exec in the JavaScript statement by passing The Element so this will scroll down the page till this element is visible and we can capture the location this is second approach now the third approach suppose I have very hug page then I want to go till bottom of the page I want to navigate till the bottom of the page suppose here this is initial point now want to scroll down till end of the page even the fotter section also I should able to see the entire page I want to see end

of the page so simple what you can do is again same thing scroll down or scroll page till end of the page or end of the document same again the first approach only but slightly we need to change the parameter so js. execute script js. execute script uh window. scroll by zero is a starting position and instead of this static number we have to tell end of the page how we can tell document this a parameter document dot body dot scroll height scroll height this is a parameter and second parameter is no need you can

remove this so window dot scroll by from zero position to what is this parameter is representing document.body do scroll so this parameter Is representing end of the document okay so from zero position to end of the document we're asking to scroll and after that again we are capturing the location how many pixels it is got mve now execute yes so you can see even the footer section also we able to see here end of the document so how many pixels so 2 3 1 0 pixel I think this is the last number so earlier also

it is moved till here I think this is the last one so till end of the do doent also we can just move it so these are the three different approaches we can go with this number static number or we can go with this element or we can go with the end of the page only the JavaScript statement is changing only the JavaScript statement is changing but if you want to capture the location same method return window. page y offset here also return window. page offset here also return window. page offset okay suppose now currently

I'm in end of the page like this now I want to go back to the initial position reverse way so it is already reached end of the document or somewhere in the middle now we want to go to the initial point zero position reverse way so how we can go back to The initial point so to go back to the initial Point what we can simply do is go back to all scrolling scrolling up to initial position initial position same command this will go to end of the document right now this time we have to

use the same command just to say minus 0 comma minus document.body do scroll height so if we don't put minus it will go to end of the document when you say minus it will come to the reverse it will come to the again initial Point execute and see and it will go very faster actually we are not able to see the execution so I'll put thread do sleep so that you can clearly see whether it is go to last and again come to the beginning section so I can say 5,000 run as Java application so

now you can see it is went to last position now again come back to the initial position a zero position okay so this is how we can handle scroll bar using JavaScript executor okay Suppose sometimes you can see horizontal scroll bar it is a vertical scroll bar this is a vertical scroll bar sometimes so you can see bottom of the window so in this particular direction horizontal scroll bar so this is a vertical Y axis scroll bar sometimes you can see vertic it's very rare case actually because I never seen that many times but suppose

if you want to handle the horizontal scroll bar then slight changes you have to do what are the changes this is the same method again window. scroll by 0.500 and instead of page y Offset you need to say page X Offset you need to get the value of x-axis by using page X offset instead of Y Offset you need to say x offset same thing and in the second approach again it is also same in the third approach this is also s but instead of scroll height you have to use scroll width okay if it

is a horizontal scroll bar instead of scroll height you have to use scroll width same here also instead of scroll height you have to use scroll width that's the only changes and rest of them are same so we don't need to modify any x-axis because we are not dealing with X we are just Dealing with the scroll this is only there only Y axis so we don't need to deal anything with x-axis it is just only y offset some sometimes if we see our general scroll but then we will deal with X not y okay

so we are not no need to deal with any X because we already have these methods directly in JavaScript so that will take care so everybody's understood so you can just have this code whenever it is needed it will be helpful even if you're not able to remember these parameters no problem it's not a big thing but during the interview perspective if anybody ask you how to handle School bars can simply say using JavaScript executor we can do that that's it so other than this they don't ask anything more because these intax and all you

need to just have somewhere and you can use whenever it is needed in your projects so you everybody's understood the way how we can handle the scroll SC bar scroll bar is not a web element remember this and we can handle this using JavaScript executor okay now I'll show you some more examples for JavaScript executor where and All we can use let's close this and zooming the page sometimes we can zoom in zoom out the pages right we can resize the page suppose if you look at the page this is 100% Zoom if I look

at this so zoom level is 100% okay suppose if you this is ma whenever you launch the Page by default it is open in the short window like this right and then what we are doing we are using one method called driver. manage. window. maximize then it is maximizing suppose I want to minimize the page like this I want to minimize the page then I want to execute my script how we can minimize this and sometimes suppose I don't want to maximize I don't want to minimize I just want to set page size suppose here

100 is a zoom level I want to put this in 50 or 25 something like this so how we can set this size of the page so this also we can do using JavaScript executor so the zoom level we can adjust using JavaScript executor let me show you how we can do it so we can say new class zoom in zoom out so I'm just taking the previous example Itself all right so one of JavaScript just I'm commenting so this is the page so whenever you want to Maxim if I don't use max then what

happens the page will open in the smaller [Music] window say this see this small window by default it is display small window now if you want to maximize this box what you have done we have executed this command driver. manage. window. maximize so this will maximize the page driver. manage. window. maximiz similarly we also have a minimize method me so we can see this is maximized so this is maximized similarly we have also minimized method so instead of this minimize is like this we can minimize the page like this we can minimize so to minimize

the page as soon as the page is got launched to minimize it we can call another method driver dot manage do window do minimize so it will do very faster so I can put some thread dot sleep after launching the page so that we can clearly see whether it is able to minimize or not sleep and say 5,000 milliseconds yes by only using JavaScript executor we can trigger browser options yes Okay now I say minimize we'll see how we can minimize the page after launching the page see this small window is open initially just observe

just minimized you can see it is minimized and again if you execute this maximize here then what happens after minimizing again it will maximize so this weight statement again I'll put here so multiple times I'm doing initially I'm launching the page so it will open in the smaller box then I'm minimizing it after 5 seconds again I'm maximizing it run as Java application see this is smaller window 5 Seconds minimized and after 5 seconds again it should be maximized now we can see it is maximized so these are the two two options are available minimize

and maximize but apart from these two suppose I want to set the zoom level of the page like 50% 70% 80% like that then you have to take the help of JavaScript executor so JavaScript executor so let me comment this so after maximizing first I'm maximizing the page then I will set zoom level so How we can set first we create a JavaScript variable and then Js dot execute script and here we need to pass one parameter only one single parameter that is document document is always referring to the web page document do body do

style document.body dostyle do Zoom equal to here in the single code we have to specify how much percent of Zoom you want let's say I want to have 50% just 50 percentile also you have to specify only one single parameter in the double codes this is again JavaScript statement document. body. style. zoom and whichever percentage you put here the zoom level will be set now execute so this will set zoom level 50% so execute and see so first initially smaller window then maximized after that set 50 50% if I look at here it is still

showing 100% let's try executing one more time the content is compressed actually so I'll put thread dot slip here also after maximizing and and also after 50% The browser is same but the content now it is maximized now you can see after becoming 50% see now it is got compressed the pace size is got compressed okay this is how we can set the zoom level and similarly suppose I want to again make it as a 75% or 80% just observe first to smaller window then it become 50 then it will become 80 now it is

maximized then it will become 50% then it will become 80% 80% so the zoom level options also we can control using JavaScript executor okay so this is a another use case of JavaScript executor so not only this I've have just discussed a few of most important stuff but there are so many other things we can achieve JavaScript executor so at the end of the class I will share one video session you can go through that video so you will understand what are all other scenarios we can still Handle by using JavaScript execute there are n

number of scenarios we can handle okay so this is all about JavaScript executor part JavaScript execut so everybody's understood so far what is Javascript executor what is execute script And how we can execute JavaScript statements using execute script method we can perform actions send keys and click we can also doing the scroll bar actions and we can also control the zoom levels of the web page all these things are possible JavaScript executor and there are many more scenarios are there but again if you discuss them it will be very lengthy so I'll share some small

video you can go through that and will understand about JavaScript executor okay now so I'll show you one last example how we can upload the files so that's not related to scroll bar that's not related to JavaScript executor That's A New Concept how to upload the files so normally selenium doesn't support or doesn't recommend to automate these kind of a scenarios uploading files and downloading files so these scenarios are not recommended by selenium most of the times okay so if you find such type of test cases uh don't try to automate them better to don't

try to automate them but if you still want to automate you can still do that there are many ways are there okay so a sample I'll show you how We can upload files how to upload single file how we can upload multiple files how we can do validation so I'll show you one example let us see how we can do this and uh we don't need to use JavaScript executor these are a different concept and for that I'm taking one sample website take this browser right so look at this there is upload file button here

choose files here I can upload one file or we can upload multiple files after uploading the files we can also verify the message for example let me show you I'm trying to upload one single file I'm clicking on the choose files and then I'll go to my this PC C drive automation automation files okay I'm just sample test 1.x I'm just uploading as soon as you uploaded the file is got uploaded and also it will show you the name of the file it will show you the name of the file this is single file upload

and if you want to upload multiple files again choose files and select both the files suppose I want to upload test one and test two select both the files say open now Two files are uploaded now we can see the names of both the files so two scenarios we can hand in one single page one file upload and two files upload how we can handle this scenario and if you look at this if you click on this you will get this window right this window you cannot handle in selenium why because selenium is a web

based automation tool it can handle only web elements but this window you cannot handle you cannot recognize these folders you cannot recognize this open cancel or input box these things you cannot recognize you cannot inspect because this comes from window this is desktop application okay this we cannot handle but how we can handle this scenario just by using send Keys method you can handle it so let me show you let me write an automation script for the single file upload and multiple files upload new class file upload main method and finish it and we can

also do validation whether the file is successfully uploaded or not so now import this web driver Chrome driver so this is my page and then then maximizing The page so after maximizing the page then now first we will see single file upload single file upload so it's very straightforward and very simple so go to the page inspect this choose files element inspect so you can see input tag here input tag means what it is an input box it seems a button but beside the button there is an input box is associated right this is the

input so get the expath of this input box this is a element capture this and you can directly locate driver. find element by. XPath and here dot send Keys you can directly use send Keys method so dot send keys and here you can specify the location of your file in the double codes specify the location where exactly your file is present in your drive so I go to C drive automation automation file files and this is the location I'm copying and also you need to specify the name of the file so test one is having

some content so I just want [Music] to pass this name SL slash name of the file and then semicolon so just by using send Keys method we can upload the file so we located this element send keys and pass the location wherever your file Is exist so this will able to upload the file but after uploading the file how we can do validation suppose I'm uploading this uh test one right so as soon as uploaded you can see the name of the text so now this we have to validate so this file we have to

validate so how we can validate you can inspect this element right so this is the element but every time you don't see test1.txt right suppose if you uploaded some other file which is having different name so that name will be displayed here so will this xath match with this element every time will this xath match every time with this element no because whatever file name is having same file name is displayed here but that's not our requirement whichever file is updated uploaded the file name is displayed so our exp should able to match with this

file name so like that we have to write so what I will do is I instead of getting this xath I will get my own xath I will write my own xath so from the UL list I'm going to start because here it is in list item right UL so for the UL I will write an X paath inside this UL El tag is there Right this is matching so now I'm going to use this particular thing so Li so this is exactly pointing this element now go back and here after uploading you can get

it driver. find element by. xath Li dot get text so I'm getting the text of the web element and what is a condition what is a validation the file name should be what is the file we have uploaded test one file name is what test one. EXT so test one. EXT is a file name so this get text we are expecting is test one.txt right so I'm putting one condition if this particular get text Dot equals equals so whichever file I have uploaded that file name should be present equals doxt then we can say file

is successfully uploaded simple validation while is else you can say upload failed okay this is a validation single file so I just uploaded one single file and I captured the message file name and compare with our expected file name and uh we decided this is the validation of single file upload right now execute see test 1. EXT is uploaded now can see test1.txt is also displayed and File is successfully uploaded perfectly fine this is all about single file just by using send Keys method you can specify the location and it will automatically upload but the

main thing is how to upload multiple files so if you want to upload multiple files should we write multiple send Keys method multiple send Keys method no we have to say only one send Keys okay because as soon as you write one send Keys method only one file will be uploaded then next time it will not allow us again if you write the same statement one more time I'll show you what will happen suppose this statement is uploading one single file let's say multiple files so I have written this statement and again I written one

more statement here I'll upload test one here I upload test two if I write two statements then what happens is first time test one is uploaded successfully so second time when you upload test two the test one is replaced with the test two so you can see only one file is Got uploaded that's a problem when I use send Keys method two times so now how we can handle this so to handle this first of all whatever files we have we need to copy those uh locations of both the files in a two different variables

I'm taking a string file 1 equal to where is the location of the file one this is the location I will store this entire path in a variable I'll store this entire path in a variable so this is my first file semicolon now the second file string file two and in the same location I have another file called teste so these are the two files I want to upload so stor them in two different variables now driver same command again so this is a command driver. find element file upload send Keys earlier we have uploaded

only one single file that we have specified in the single send Keys method the path we specified so whichever file path we specified that file is got uploaded now we want to upload two files so then what you have to do is in the send Keys itself you have to pass this file one first file concatenated give one sln and again concatenated file two this is a format so in the send Keys itself We are passing two files file one is representing this path slash n/n is representing the next line actually okay next line so

first file one will be uploaded in the next immediately file two is also got immediately uploaded with one single send Keys method one single send Keys method both the files will be uploaded if you have more number of files again you can continue this statement plus again slash in file three again plus slash and file four like this you can add all the files here first you need to capture the locations of the files then you can pass it like this okay now let's execute and see whether it's able to upload both the files or

Not N is representing the new line just observe two files are got uploaded test 1. EXT test.txt now we want to verify so whatever files we have uploaded both the file names should be displayed here both the files should be displayed how many number of files we have suppose tomorrow I have uploaded five files now all FES files are uploaded or not we can also verify the count count also verify so two files are uploaded how we will know two files are got uploaded so we need to capture the x paath of the element so

let Me show you so here currently one file so let me upload two files so count how many files we have uploaded we can verify the file names also same or not also we can verify so now we can see two files are uploaded test one test two how we can get the count so if you inspect this element test one and test two just test one you update test one here first li is a test one under UL you can see file list inside the UL there are two L list you can see test

1. EXT test. EXT I want to capture all the files so we need to write an xath like this so if you write an xath like this now we can see two are matching two are matching matching first one and second one both are matching if I say index one then first file is matching when I say index two second file is matching but don't say index two files are matching so tomorrow if you upload five files this XO will match five files so by using this xath we can count how many files are got

uploaded so driver. find elements because we are capturing multiple elements by. xath dot size do size so that will give you number of files uploaded number of files uploaded what is the type of this variable is integer Variable now we can compare so because we uploaded two files here whether this Valu is two or not we can simply verify if this number of files are uploaded equal to to so you can put multiple even text the name of the file also you can put the validation so you can say system. out. pintel and files are

uploaded you can say all files are uploaded and else can see suppose if the number is different all files itself is not uploaded then you can put files are not uploaded or incorrect files uploaded maybe sometimes it will upload only one file by mistake right sometimes it may not upload all the files sometimes it will upload only one file so files are not uploaded or incard files uploaded else so we can count it so this is the verification Point execute so two files are uploaded test 1. test 2. EXT now can see all files are

successfully uploaded can we verify the text this is validation one number of files number of files verified now in the second validation I want to verify the name of the files okay sometimes I have uploaded two More other files right so based on only one validation I cannot check so I can put one more validation the file names also same or not I want to verify so validate file names so both the files I want to validate so how we can do it e so from the same xath because this xath is pointing to two

files right from the same X paath put this in driver. find element okay I'll write everything take this everything driver do find element by. ta paath here Li is returning multiple elements but when I say Li of one returning first file name right first file name so driver. find element by. xath and this is the xath dot get text dot equals what is the name of the first file test one. EXT this is a one validation and and second file also we need to validate right same thing copy and file two L of two representing

file two get text. equals to test 2. EXT so now we verified both the files now condition if file names are same that also another validation so you can say file names mating so in the first validation we counted number of files are correct or not number of files are uploaded are correct or Not the second validation we are checking the file names are correct or so else so file names are not matching okay this is how we can put another validation so now two files are uploaded test one. dxt test. dxt see all files

are uploaded also file names are matching so this is how we can handle file upload scenario you can use EAS display also easy display also you can use but the problem with the EAS displayed is easy displayed we can verify element present or not okay but that cannot check the text value correct or not so that will check test one test two is present or not but suppose uh you you uploaded some other files let's say test three and four you have uploaded in that case also e display method will work and it will give

success it will pass but that should not happen right so whatever files we have uploaded how we can exactly verify with the name of the file but when I use e displayed method it will always return true because elements are displayed but the thing is what suppose tomorrow you uploaded some other files other than test one and test two that time also easy displayed method Will work and it will pass so that's the reason e display is not recommended especially when you are validating the text not the web element suppose if you want to verify

web element is present or not suppose the demo is present or not the logo present or not in that case you can use display but here our case is different you're validating the text of the file name that's the one so if you have a multiple files yes you can use a looping statement that's a fine you can read each and every file one by one and compare with your expected file name that also you can do it so ultimately everyone is understood how to upload a single file if it is a single file you

can directly specify the location of the file in send keys if you are uploading multiple files then you can capture the files into two different variables and you can pass those two variables by separating with sln using one single send Keys method so these are the process this is a process okay so just try to practice this just one round of practice is enough and you no need more assignments later on I will give you assignments okay yeah so that's all For today we'll stop here and next session we will discuss some more interesting stuff

and then we will proceed further so how to use JavaScript executor then how to handle file upload scenario so that's it so practice these things for today and Monday session we will continue further