How to use JavaScriptExecutor in Selenium

In this article, you will learn about how JavaScriptExecutor works in selenium. Basically, JavaScriptExecutor is an Interface that allows you to execute JavaScript through the Selenium web driver. It is a medium that allows a web driver to interact with the HTML elements of a webpage. It provides two methods i.e. executeScript and executeAsyncScript, to execute JavaScript on a selected webPage.

Table of Contents

Why do we need JavaScriptExecutor in Selenium?

Sometimes, selenium web driver is not able to identify some web elements on a webpage and is not able to perform certain operations. In that case, we need JavaScript to make sure that functionality is working accurately.

JavaScriptExecutor Methods

JavaScriptExecutor provides two types of methods that are listed below –

1. ExecuteAsyncScript

This method executes an asynchronous piece of JavaScript on the current webpage. With the asynchronous script, web pages render very quickly, Instead of waiting for the script to download before the page renders which enhances the application performance.

2. ExecuteScript

This method executes JavaScript in the context of the currently selected webpage or window. The script in this method runs in the body of an anonymous function. This script can return WebElement, long, Boolean, list, or String.

Get started with JavaScriptExecutor

There are certain steps you should follow to use JavaScriptExecutor in selenium –

1. Import the Package

import org.openqa.selenium.JavascriptExecutor;

2. Create a JavaScriptExecutor Reference

JavascriptExecutor js = (JavascriptExecutor) driver;

3. Call the JavaScriptExecutor Method

js.executeScript(Script, Arguments);

Script – This is the JavaScript that needs to execute.
Arguments – It is the arguments to the script. It’s optional.

Some JavaScriptExecutor Examples in Selenium

Let’s try to understand how we can execute any JavaScript in Selenium using JavaScriptExecutor methods with the help of some examples –

Example 1 – Click a Button or Link using JavaScriptExecutor

To get an element using Javascript we use document.getElementByID method and provide a parameter as Id. You can refer to the below screenshot. It returns the button element.

If you don’t want to locate the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/buttons");

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// performing click operation using executeScript method
js.executeScript("document.getElementById('home').click();");

If you have located the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/buttons");

// locating the web element using selenium command
WebElement element = driver.findElement(By.id("home"));

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// performing click operation using executeScript method
js.executeScript("arguments[0].click();", element);

Example 2 – Type text into an Input box using JavaScriptExecutor

If you don’t want to locate the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/edit");

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// type values using executeScript method
js.executeScript("document.getElementById('fullName').setAttribute('value', 'Shubham Kumar');");

If you have located the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/edit");

// locating the web element using selenium command
WebElement element = driver.findElement(By.id("fullName"));

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// type values using executeScript method
js.executeScript("arguments[0].value='Shubham Kumar';", element);

Example 3 – Interact with Checkbox using JavaScriptExecutor

If you want to select or mark check for any checkbox, use the checked value as true and for the opposite scenario use false.

If you don’t want to locate the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/radio");

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// uncheck using executeScript method
js.executeScript("document.getElementsByTagName('input').item(11).checked=false;");

// check using executeScript method
js.executeScript("document.getElementsByTagName('input').item(11).checked=true;");

If you have located the web elements using the selenium command –

// launching the url
driver.get("https://letcode.in/radio");

// locating the web element using selenium command
WebElement element = driver.findElement(By.xpath("(//input[@type='checkbox'])[1]"));

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// uncheck using executeScript method
js.executeScript("arguments[0].checked=false;", element);

// check using executeScript method
js.executeScript("arguments[0].checked=true;", element);

Example 4 – Refresh the WebPage using JavaScriptExecutor

// launching the url
driver.get("https://testingwithsk.in/");

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// refresh the webpage using executeScript method
js.executeScript("location.reload()");

Example 5 – Get the Page Title using JavaScriptExecutor

// launching the url
driver.get("https://testingwithsk.in/");

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// get the page title using executeScript method
String title =  js.executeScript("return document.title;").toString();

Example 6 – Scroll a WebPage using JavaScriptExecutor

We can perform scroll on a webpage in four ways – Up, Down, Left, and Right. We can perform all types of scrolls using JavaScriptExecutor.

// creating a JavaScriptExecutor reference
JavascriptExecutor js = (JavascriptExecutor) driver;

// scroll using executeScript method
js.executeScript("window.scrollBy(X, Y);");

Where X and Y are the coordinates to scroll.

Scroll Up – (0, -100) [Vertical scroll up by 100 pixels]
Scroll Down – (0, 100) [Vertical scroll down by 100 pixels]
Scroll Right – (100, 0) [Horizontal scroll right by 100 pixels]
Scroll Left – (-100, 0) [Horizontal scroll left by 100 pixels]

Conclusion

Selenium sometimes faces issues with lactating web elements, So in that place, we can use JavaScriptExecutor methods to test the application. We can write any type of JavaScript and it enables us to execute those scripts in selenium.

Resources

Source Code with Example

You might Like

💖 If you like this article please make sure to Like, Comment, and Share it with your friends and colleagues.

Follow us on our social networks –