Click on WebElement using JavaScriptExecutor

First I would like to discuss about JavaScriptExecutor

JavaScriptExecutor is an interface by which you can actually execute JavaScript methods using selenium WebDriver. When you execute JavaScript code using WebDriver to perform actions like click, scroll etc, basically you are actually injecting the JavaScript from outside into browser to perform that particular action.

When we have to use JavaScriptExecutor ?

There are chances that on certain versions of IE and chrome, WebDriver inbuild click() or some other functions doesn’t work properly and at time we have to execute JavaScript code to simulate the actions as it is browser independent.

NOTE : WebDriver utilizes a browser’s native support for mapping the DOM element to WebElement object using id/xpath etc. One can also say, the click simulated by WebDriver on a browser is similar to what actual user do as compared to one invoked using JavaScript.

Scenario :

a) Launch URL – https://www.facebook.com
b) Print title using JavaScriptExecutor.
c) Enter username, password and click on Login button using JavaScriptExecutor.

Program

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;


public class JavaScriptExecutorTest {

    public static void main(String s[]) {

        WebDriver driver = new FirefoxDriver();

        driver.get("http://www.facebook.com/");
        JavascriptExecutor js=(JavascriptExecutor) driver;

        //Print title of a page
        String title = (String)js.executeScript("return document.title");
        System.out.println("title  : " + title);

        //Type Email Id
        js.executeScript("document.getElementById('email').value='contact.automateapps@gmail.com'");

        //Type Password
        js.executeScript("document.getElementById('pass').value='TEST123456'");

        //Click on Login button
        js.executeScript("document.getElementById('loginbutton').click();");

    }

}

Below code is also Facebook login, however the way to write JavaScript code is different :

public static void main(String s[]) {

        WebDriver driver = new FirefoxDriver();

        driver.get("http://www.facebook.com/");
        JavascriptExecutor js=(JavascriptExecutor) driver;
        WebElement element;

        //Find email input box using selenium WebDriver
        element = driver.findElement(By.id("email"));
        //Execute JavaScript code to type an email
        js.executeScript("arguments[0].setAttribute('value', 'contact.automateapps@gmail.com');", element);

        //Type Password
        element = driver.findElement(By.id("pass"));
        js.executeScript("arguments[0].setAttribute('value', 'TEST123456');", element);

        //Click on Login button
        element = driver.findElement(By.id("loginbutton"));
        js.executeScript("arguments[0].click();", element);

    }

If you really like the information provided above, please don’t forget to like us on Facebook, you can also leave the comment.