Session 37 – Selenium with Java | JavascriptExecutor |S… — Transcript

So today, we're going to discuss one of the most important topics, which is JavaScript executor. Basically, JavaScript executor is an interface which is available in Java, which is available in Selenium WebDriver, and which is basically an interface.

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

JavaScript executor is an interface. So before understanding this JavaScript executor, we need to understand what different interfaces and classes are available in Selenium WebDriver and what the hierarchy is.

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

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 I can just repeat this once again. In Selenium, there are so many predefined classes and interfaces already available. So if you look at this picture, the root interface is SearchContext.

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

So the whole total WebDriver, the root interface is SearchContext, and the SearchContext is extended into one more interface called WebDriver interface. But normally, we don't consider SearchContext; we'll start from WebDriver as the root interface. But actually, WebDriver is also extended from the SearchContext interface.

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

Now, this WebDriver interface is again implemented using RemoteWebDriver class. So RemoteWebDriver is a class, and you can see here the blue color boxes are all classes, and the pink color boxes are all interfaces.

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

So the default or root interface in Selenium is SearchContext, and that is extended into WebDriver interface. This WebDriver interface is again implemented using RemoteWebDriver class because whenever you have some interface, we should have some class which implements that interface.

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

Similarly, WebDriver is an interface which has many methods because, as I said, an interface contains static methods, default methods, and abstract methods. There are a number of methods in the WebDriver interface, and those methods are implemented using RemoteWebDriver class.

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

Again, this RemoteWebDriver class is extended into multiple classes according to the browsers. The RemoteWebDriver class is extended into InternetExplorerDriver, FirefoxDriver, ChromiumDriver, OperaDriver, SafariDriver, etc. So each and every browser has its own class which is implemented.

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

ChromiumDriver is again extended into ChromeDriver and EdgeDriver. So Chrome browser and Edge driver have the same internal class, which is ChromiumDriver. So this is the hierarchy.

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

Now, if you look here, RemoteWebDriver is a class which implements WebDriver interface. Not only this WebDriver interface, RemoteWebDriver also implements some of the methods from JavaScriptExecutor interface. On the other side, TakesScreenshot is also an interface. So RemoteWebDriver implements WebDriver interface, not only WebDriver interface, but along with this WebDriver interface, it also implements two other interfaces, which are JavaScriptExecutor and TakesScreenshot.

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, remember, this RemoteWebDriver class implements how many interfaces? Three interfaces: one is WebDriver interface, another one is JavaScriptExecutor interface, and TakesScreenshot interface. All three interfaces are implemented using one single class, which is RemoteWebDriver.

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

Now tell me, what type of inheritance is this? How many parents are there for RemoteWebDriver class? First of all, tell me how many parents are there for RemoteWebDriver class. Parents? So RemoteWebDriver class implements three interfaces: WebDriver interface, JavaScriptExecutor interface, and TakesScreenshot interface. So these are the three parents of RemoteWebDriver class.

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

So RemoteWebDriver class, what type of inheritance is it? Three parents, one single child. Multiple parents, single child. What type of inheritance is it? Multiple inheritance.

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

Okay, in multiple inheritance, we have multiple parents having a single child.

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

Okay, so that we understood. So RemoteWebDriver class implements WebDriver interface, JavaScriptExecutor interface, and TakesScreenshot interface. So these three interfaces' methods are implemented by using a single class, which is RemoteWebDriver. Perfect, fine.

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

Now, is there any relationship between WebDriver and JavaScriptExecutor? Is there any direct relationship between WebDriver and JavaScriptExecutor? No, right? So TakesScreenshot and WebDriver also have no connection.

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

So in the next classes, I will talk about TakesScreenshot interface. Today, we will focus on the JavaScriptExecutor interface.

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

So if you look at this hierarchy, WebDriver and JavaScriptExecutor, these two don't have a direct relationship. They are two different types of interfaces, independent interfaces, but both interfaces are implemented by a single class, which is RemoteWebDriver.

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 again, this RemoteWebDriver is a parent of all other classes, all other classes.

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

Okay, now this is a hierarchy of all the classes and interfaces in Selenium. So if anybody asks you during the interview, you should be able to explain all these classes and interfaces, the whole hierarchy. You have to have it in your mind.

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

So what is JavaScriptExecutor? Now, JavaScriptExecutor is an interface which is implemented by RemoteWebDriver along with WebDriver interface.

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

So far, what we have understood is only WebDriver interface is implemented by RemoteWebDriver.

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

But not only WebDriver interface, RemoteWebDriver class also implements another two interfaces. We can call them parallel interfaces of WebDriver, so JavaScriptExecutor and TakesScreenshot.

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

So these two interfaces are also implemented in RemoteWebDriver.

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

Okay, just a second. Yeah, just a second, guys. Can you see my screen?

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

Okay, so what is JavaScriptExecutor? JavaScriptExecutor is an interface which is implemented by RemoteWebDriver class, just like WebDriver interface.

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

How it is implemented? Similar way, it is also implemented JavaScriptExecutor interface.

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

Okay, so this is a clarity which we need to have.

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

Then, what is the use of JavaScriptExecutor interface and where exactly do we use it?

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

In JavaScriptExecutor interface, we have one method called executeScript.

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

In JavaScriptExecutor, we have one method called executeScript.

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

Okay, so what will we do with this particular method?

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

JavaScriptExecutor interface has the executeScript method, and by using this method, we can execute JavaScript statements.

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

We can execute JavaScript, which is another language. Java is another language.

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

Okay, JavaScript is basically a scripting language which we can use for web development. Java is a programming language through which we can develop programming logic.

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

Okay, the business logic can be developed by using Java programming. JavaScript is a scripting language which we can use in web development.

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

So we can execute JavaScript statements.

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

So what is the use of this executeScript method, which comes from JavaScriptExecutor?

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

We can execute JavaScript statements using executeScript. That means in our Selenium WebDriver code or in Java code, if you want to execute JavaScript, we can use executeScript method from JavaScriptExecutor.

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

Okay, then why do we need to execute JavaScript statements in our WebDriver script, in WebDriver code or WebDriver automation script?

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

Why should we use JavaScriptExecutor? Why should we execute JavaScript statements? What is the necessity of executing JavaScript statements? That we need to understand.

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

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 executeScript method.

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

And listen very carefully, step by step. I'll make it very, very simple, and also from an interview point of view, it is most important. You should be able to explain this.

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

So as I said, JavaScriptExecutor is an interface which has executeScript as a method through which we can execute JavaScript statements.

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