JavaScriptExecutor in Selenium WebDriver with Example

JavaScriptExecutor is an Interface that helps to execute JavaScript through Selenium Webdriver. Sometimes we face a lot of issues when performing actions on web elements. Then this concept comes into the picture.

Required package:

import org.openqa.selenium.JavascriptExecutor;

Methods of JavaScriptExecutor:

1. executeAsyncScript(java.lang.String script, java.lang.Object… args)

Execute an asynchronous piece of JavaScript in the context of the currently selected frame or window.

2. executeScript(java.lang.String script, java.lang.Object… args)

Executes JavaScript in the context of the currently selected frame or window.

Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(Script,Arguments);

Handle different scenarios with JavaScriptExecutor:

Use of executeAsyncScript: js.executeAsyncScript(“window.setTimeout(arguments[arguments.length — 1], 5000);”)

Below is the code snippets from eclipse editor:

Use of executeScript:

Below is the demo application:

1. To click a button without using click() method:

js.executeScript(“arguments[0].click();”, loginButton);

Below is the code snippets from eclipse editor:

2. To type Text without using sendKeys() method: js.executeScript(“document.getElementById(‘some id’).value=’someValue’;”);

Below is the code snippets from eclipse editor:

3. To select checkbox:

js.executeScript(“document.getElementById(‘enter element id’).checked=false;”);

4. To generate Alert Pop window:

js.executeScript(“alert(‘Hello World’);”);

5. To refresh browser window:

js.executeScript(“history.go(0)”);

6. To get innertext of the entire webpage:

String sText = js.executeScript(“return document.documentElement.innerText;”).toString();

7. To get the Title of a webpage:

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

8. To get the domain:

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

9. To get the URL of a webpage:

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

10. To perform Scroll operations:

//Vertical scroll down by 500 pixels:

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

//scroll down till the bottom of the webpage:

js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);

Below is the code snippets from eclipse editor:

11. To click on a SubMenu which is only visible on mouse hover on Menu:

js.executeScript(“$(‘ul.menus.menu-secondary.sf-js-enabled.sub-menu li’).hover()”);

12. To navigate to different page:

js.executeScript(“window.location = ‘pageUrl’”);

13. To find hidden element:

js.executeScript(“arguments[0].click();”, element);

14. To select option from dropdown list:

// set the dropdown value to ‘mango’ using javascript

js.executeScript(“arguments[0].value=’mango’”, listbox);

15. To perform drag and drop action:

js.executeScript(“function createEvent(typeOfEvent) { var event = document.createEvent(\”CustomEvent\”); event.initCustomEvent(typeOfEvent, true, true, null); event.dataTransfer = { data: {}, setData: function (key, value) { this.data[key] = value; }, getData: function (key) { return this.data[key]; } }; return event; } function dispatchEvent(element, event, transferData) { if (transferData !== undefined) { event.dataTransfer = transferData; } if (element.dispatchEvent) { element.dispatchEvent(event); } else if (element.fireEvent) { element.fireEvent(\”on\” + event.type, event); } } function simulateHTML5DragAndDrop(element, target) { var dragStartEvent = createEvent(‘dragstart’); dispatchEvent(element, dragStartEvent); var dropEvent = createEvent(‘drop’); dispatchEvent(target, dropEvent, dragStartEvent.dataTransfer); var dragEndEvent = createEvent(‘dragend’); dispatchEvent(element, dragEndEvent, dropEvent.dataTransfer); } var elementToDrag = arguments[0]; var target = arguments[1]; simulateHTML5DragAndDrop(elementToDrag, target);”, sourceLocator, targetLocator);

16. To Handle datePicker:

//This will select From date

WebElement FromDate = driver.findElement(By.id(“id”));

((JavascriptExecutor)driver).executeScript (“document.getElementById(‘id’).removeAttribute(‘readonly’,0);”); // Enables the from date box

FromDate.clear();

FromDate.sendKeys(“21-Oct-2020”); //Enter date in required format