JavascriptExecutor in Selenium WebDriver

Sometimes, we come across the requirements to execute/ inject the Javascript/ jQuery code into the browser from our Selenium script. Thankfully, WebDriver API is rich enough since it provides classes and interfaces to achieve the same.

What is JavascriptExecutor ?

JavascriptExecutor is an interface which provides methods to inject the Javascript/ jQuery code into the browser from automation code.

Methods of JavascriptExecutor interface :

executeAsyncScript command :

Usage : Used to execute the asynchronous Javascript/ jQuery code passed as a string in a currently selected window or frame.

Syntax : Object executeAsyncScript (String script, Object args)

Return type : Object

Parameters : script – The Javascript to execute, args – The arguments to the script (may be empty)

Applicability : Not specific to DOM element

Example :

// to be added


executeScript command :

Usage : Used to execute the Javascript/ jQuery code passed as a string in a currently selected window or frame.

Syntax : Object executeScript (String script, Object args)

Return type : Object

Parameters : script – The Javascript to execute, args – The arguments to the script (may be empty)

Applicability : Not specific to DOM element

Example :

// to be added

Both the methods are used to run the Javascript/ jQuery code in currently selected window/ frame. The second parameter accepts the arguments for the script in any.

Arguments (second parameter) is optional here, we can ignore it or pass null too.

Where the methods of JavascriptExecutor interface are implemented :

Since, JavascriptExecutor is an interface, it does not provide any implementation for the above stated methods. So, the question arises asking where these methods are implemented?

And the answer is RemoteWebDriver class.

RemoteWebDriver is a class which implements JavascriptExecutor interface along with many other important interfaces like WebDriver, TakesScreenshot, FindsById, FindsByName etc.

For more information on internal implementation, visit : Selenium DOCS

How to get instance of JavascritExecutor ?

// instantiating the webdriver with the instance of FirefoxDriver

WebDriver driver = new FirefoxDriver();

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor)driver;

// using executeScript method to execute JS code

js.executeScript(“javascript code”);

Where to use JavascriptExecutor in code ?

Now, we will have a look at the scenarios where we can make use of JavascriptExecutor to get our job done.

To enter value in text field.
To perform scrolling in the window.
To generate an Alert pop up window.
To refresh the browser.
To get title of the webpage.
To click the link under drop down menu (Click sub menu links even if drop down does not work)
To get loading state (readyState) of dodument

Enter value in text field using JavascriptExecutor in Selenium :

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(“document.getElementById(‘lst-ib’).value=’selenium’”);

To perform scrolling in the window :

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

// scrolls by 0px horizontally and 500px vertically (x,y)

js.executeScript(“window.scrollBy(0,500)”);

To generate an Alert pop up :

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(“alert(‘Alert pop up’);”);

To reload the webpage :

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(“window.location.reload();”);

To get the title of the webpage :

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

String title = js.executeScript(“return document.title”).toString();

System.out.println(“Title of the webbpage is : ” + title);

To click the link under drop down menu :

This is one of the best usage of JavsacriptExecutor.
Suppose, we have a drop down menu on our page, and the links under menu will be visible only on clicking/ hovering on main menu.

In this case, we can use JavascriptExecutor to click on the link directly.

If we click the link as shown below, even if the drop down functionality fails(i.e. the sub menu links do not displayed), the automation script will not fail.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();

driver.get(“http://www.google.com”);

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(“document.getElementById(‘gb192’).click()”);

To get the loading state of the document :

We can get the loading state of the document using JavascriptExecutor.

We can make use of getting readyState property in order to check whether the page has completely been loaded or not.
Possible values of readyState :
1. loading : It says hold on the document is still loading.

2. interactive : It says the document has finished loading and its been parsed too, but sub-resources like CSS, Images, Frames are still loading.

3. complete : It says the document and all sub-resources have finished loading.

So, from automation perspective, we can make out script wait till we get readyState property as complete.

WebDriver driver = new FirefoxDriver();

driver.manage().window().maximize();

driver.get(“http://www.google.com”);

// casting a driver instance into JavascriptExecutor instance

JavascriptExecutor js = (JavascriptExecutor) driver;

// since JS code returns String value, we need to use toString method

String loadingState = js.executeScript(“return document.readyState”).toString();

System.out.println(“Loading State : ” + loadingState );

Hope it helps you!!

Cheers 🙂

Advertisements

#javascriptexecutor