Interacting with the browser | Executing JavaScript through JavascriptExecutor

In the Previous Tutorial, we learned to take the screenshot of the page. In this tutorial, we’ll explore ways to execute a piece of Javascript through the WebDriver.

What the heck is JavaScript?

Well, JavaScript is a scripting language that runs on Client-side, i.e on the browser (those who are smarter please forget about node.js for a while). Ever wondered, sometimes you enter an invalid value into an input box and instantly it displays a text saying it is an invalid value? That is the magic of scripting languages like JavaScript.

Why execute JavaScript through WebDriver?

In real-life projects, it happens that sometimes the application behaves so weird that WebDriver is not able to perform the action on a particular element. There can be several reasons for this. One of the reason is that since WebDriver simulates end-user interaction, it is natural that it will refuse to click on an element that is not visible to end-user. Sometimes it happens that although the element is visible on the page, still WebDriver thinks it is not visible.

In these cases, we write a piece of JavaScript to click or perform other actions on that element and make it execute through WebDriver.

We will take the example of Automation Practice page and will try to click the checkbox ‘Java’ for the Language field.

Execute JS by finding elements through DOM methods

  • JavaScript DOM functions getElementsByName, getElementsByClassName etc return all matching elements. If you need first matching elements, you need to index [0].
  • JavaScript function getElementById will return only one element as ideally id should be unique. It won’t take indexing. Did you notice, it has Element, not Elements, as the function name?
  • You strictly follow the syntax of JavaScript otherwise exceptions will be thrown. Please feel free to google in the case of any confusion.

 Let us inspect the element to get one of its properties like name, id, class etc. In our case, the Java checkbox has the name attribute that has language-java value.

Next, we’ll write the piece of JavaScript to perform the action on an element.

String strJavaScript="document.getElementsByName('language_java')[0].click();";

//Cast (convert) driver to JavascriptExecutor type
JavascriptExecutor js = (JavascriptExecutor)driver;

//Call executeScript() method and pass it the JavaScript as the String.
js.executeScript(strJavaScript);
strJavaScript = "document.getElementsByName('language_java')[0].click();"

driver.execute_script(strJavaScript)

As the above line of code will be executed, WebDriver will inject that piece of JavaScript into the browser and the script will do its job. In our case, it will perform click operation on the target element.

Execute JavaScript on the WebElement found by the WebDriver

//Find element
WebElement eleFirstName = driver.findElement(By.xpath("//input[@id='firstname']"));

//Cast (convert) driver to JavascriptExecutor type
JavascriptExecutor js = (JavascriptExecutor)driver;

//Call method to execute the script. Pass the JavaScript as well as the element on which we want to perform an action.
js.executeScript("arguments[0].value='TeachMeSelenium';", eleFirstName);
eleFirstName = driver.find_element_by_xpath("//input[@id='firstname']")

//Call the method to execute the script. Pass the JavaScript snippet as the first argument and the WebElement on which we want to perform the action.
driver.execute_script("arguments[0].value='TeachMeSelenium';", eleFirstName);

The above line of code will execute the JavaScript that will set the value attribute for the element eleFirstName as TeachMeSelenium. Once it is executed we will be able to see the same value in the input box.

What are the other actions we can do with JavaScript?

Click on the element

//You may use any of the three methods.
//Method #1
js.executeScript("document.getElementById('firstname').click();";

//Method #2
WebElement eleFirstName = driver.findElement(By.xpath("//input[@id='firstname']"));
js.executeScript("arguments[0].click();", eleFirstName);

//Method #3
js.executeScript("arguments[0].click();", "driver.findElement(By.xpath("//input[@id='firstname']"));");
//You may use any of the three methods.
//Method #1
driver.execute_script("document.getElementById('firstname').click();")

//Method #2
eleFirstName = driver.find_element_by_xpath("//input[@id='firstname']")
driver.execute_script("arguments[0].click();", eleFirstName)

//Method #3
driver.execute_script("arguments[0].click();", driver.find_element_by_xpath("//input[@id='firstname']"))

Scrolling page through JavaScript

js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
driver.execute_script("window.scrollTo(0, document.body.scrollHeight)")

Returning values from executeScript()

If the script has a return statement, then one of the following will occur:

  • If it is an HTML element, this method returns a WebElement
  • If it is a decimal, a Double is returned
  • If it is a non-decimal number, a Long is returned
  • If it is a boolean, a Boolean is returned
  • If it is an array, return a List<Object> with each object following the rules above.  Nested lists are supported.
  • Unless the value is null or there is no return value, in which null is returned.
  • For all other cases, a String is returned.

There are magics that you do on the web page with JavaScript. Like scrolling the page, performing the click on a sub-menu that is hidden inside the menu, and lot more. Why don’t you explore yourself? All you have to do is to Google to get that JavaScript and then pass it appropriately in the execute_script() method as a String.

In the Next Tutorial, we will explore ways to perform mouse simulations.

Leave a Reply