Java Script & JavaScriptExecuter (I)

JavaScript is the programming language of HTML and the Web. JavaScript used to program the behavior of web
page.
JavaScriptExecutor is an interface of Selenium. It is used to change appearance of HTML coded webpage on a
client end. Usually we design webpages using JavaScript. JavaScript written in console of a Browser. JavaScript is a
programming language which is used –
 to handle elements on entire document object model (HTML document)
 Click on Element
 to enter the text in TextBox
 to select values from dropdown menu
 to handle alert
 to handle window (scrolling, Minimising, Maximizing, Closing ..)

There are two classes in JavaScript which are required to automate webpages.

1) Document Class –
This class refers to entire HTML DOM. We can perform different operations like click, enter text, select
from dropdown, change visibility of webElement, change colour of webElement etc. using this class.

Some Methods of Document class –

Sr. Property/Method Description Syntax

No.
1 Cookie Returns all name/value pairs of 1. document.cookie // return cookie property
cookies in the document 2. document.cookie = newCookie // set new cookie
2 fullscreenEnabled() Return a Boolean value indicating Document.fullscreenEnabled
whether the document can viewed in
full screen mode
3 fullscreenElement Return the current element that is var ele = fullscreenElement ;
displayed in full screen mode
4 getElementById() Returns the element that has id document.getElementById(“demo”);
attribute with the specified value
5 getElementByClassName() Returns a node list containing all var x =
elements with the specified class document.getElementsByClassName(“example”);
name
6 getElementsByName() Returns a node list containing all var x = document.getElementsByName(“fname”);
elements with a specified name
7 getElementByTageName() Returns a node list containing all var x = document.getElementsByTagName(“Li”);
elements with the specified tag name
8 Title Sets or returns the title of the
document
9 Images Returns a collection of all <img> var x = document.images.length;
elements in the document
10 write() Writes HTML expressions or document.write(“Hello World”);
JavaScript code to a document
11 writeln() Same as write(), but adds a newline document.writeln(“Hello World”);
character after each statement
13 URL Returns the full URL of the HTML var x = document.URL;
Document
14 Scripts Returns the collection of (script) var x = document.scripts.length;
elements in the documents
 2) Window Class -
The window object represents an open window in a browser. If a document contain frames
(<iframe> tags), the browser creates one window object for the HTML document, and one additional
window object for each frame.

Sr. Method Description Syntax

No.
1 alert() Displays alert box with a message and an OK alert(“hello, I am an Alert box !!”);
button
2 setInterval() Calls a function at specified var myVar = setInterval(myTimer,1000);
intervals(milliseconds)
3 setTimeout() Calls a function after a specified number of
milliseconds
4 clearInterval() Clears a timer set with setInterval() var myVar = setInterval(myTimer,1000);
clearInterval(myVar);
5 clearTimeout() Clears a timer set with setTimeout() mtVar=setTimeout(function(){alert(“hi”);},3000);
clearTimeout(myVar);
6 close() Closes the current window myWIndow.close();
7 confirm() Displays a dialog box with msg & OK & Cancel confirm(“Press a Button!”);
Button
8 focus() Sets focus to current widow myWindow.focus();
9 moveBy() Moves a window relative to its current position myWindow.moveBy(250,250);
10 moveTo() Moves a window to the specified position myWindow.moveTo(500,100);
11 open() Opens a new browser window Window.open(“https://www.google.com”);
12 print() Prints the content of the current window window.print();
13 resizeBy() Resizes the window by specified number of pixels myWindow.resizeBy(250,250);
14 resizeTo() Resizes the window by specified width and Height myWindow.resizeTo(250,250);
15 scrollBy() Scrolls the document by the specified pixels myWindow.scrollBy(100,0);
16 scrollTo() Scrolls the document to the specified coordinates myWindow.scrollTo(500,0);
17 stop() Stops the widow from loading myWindow.stop();

JavaScriptExecuter --

JavaScriptExecutor is an interface that helps us to execute Java Script through Selenium WebDriver.

Why do we need JavaScriptExecutor?

In Selenium WebDriver, locators like XPath, CSS, etc. are used to identify and perform operations on a web page.
In case, these locators do not work you can use JavaScriptExecutor. You can use JavaScriptExecutor to perform a desired
operation on a web element. Selenium supports javaScriptExecutor. There is no need for an extra plugin or add-on. You
just need to import org.openqa.selenium.JavascriptExecutor in the script as to use JavaScriptExecutor.

JavaScriptExecutor has following two methods to run JavaScript on current window or on selected window.

1. ExecutesAsynchScript(Script, Argument) –

With Asynchronous script, your page renders more quickly. Instead of forcing users to wait for a script to
download before the page renders. This function will execute an asynchronous piece of JavaScript in the context
 of the currently selected frame or window in Selenium. The JavaScript so executed is single-threaded with a various
callback function which runs synchronously.

2. ExecuteScript(Script, Argument) –

This method executes JavaScript in the context of the currently selected frame or window in Selenium. The
script used in this method runs in the body of an anonymous function (a function without a name). We can also
pass complicated arguments to it.

The script can return values. Data types returned are

 Boolean
 Long
 String
 List
 WebElement

NOTE : To use JavaScript Executer we need to type caste driver instance into JavaScript executer.

FirefoxDriver driver = new FirefoxDriver();

JavascriptExecuter JS = (JavaScriptExecuter)driver;
JS.executeScripts(Script, arguments);

Example 1 – Login on Facebook using JavaScript

public class JavaScriptExample {

public static void main(String[] args) {

System.setProperty("webdriver.chrome.driver","F:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://www.facbook.com");

JavascriptExecutor js = (JavascriptExecutor) driver ;

js.executeScript("document.getElementById('email').value='Vaibhav'");
js.executeScript("document.getElementById('pass').value='Vaibhav'");
js.executeScript("document.getElementById(\"u_0_2\").click()","");
}}

Example 2 – Scrolling down using JavaScript ( Interview question )

public class JavaScriptExample {

public static void main(String[] args) {

System.setProperty("webdriver.chrome.driver","F:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get("https://www.facbook.com");
JavascriptExecutor js = (JavascriptExecutor) driver ;
js.executeScript("window.scrollBy(0,100)"); // scrolling down by 100
Thread.sleep(1000);
js.executeScript("window.scrollBy(0,100)"); // scrolling down by 100
Thread.sleep(1000);
js.executeScript("window.scrollBy(0,-200)"); // scrolling up by -200
}}