How to use JavascriptExecutor in Selenium ?

Hi Friends,

I'm explaining some scenarios regarding JavascriptExecutor. Which i have experienced during Selenium automation.

So first thing come in mind is what is JavascriptExecutor ?
Expertise whose daily routine to play with Selenium may be aware but if you are new to Selenium then you are on right place. JavascriptExecutor is an interface which allows you to execute JavaScript code in Selenium Webdriver and perform your actions.

Why we need to use JavascriptExecutor ?
Some time browser fails to load your script so in that case we have to execute JavaScript intentionally and perform our intended action.There is one important  method available in this interface i.e. 

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

With 2 parameters script and argument. We need to import below package to use the same :

org.openqa.selenium.JavascriptExecutor;

Lets start with the scenarios :

1. How to change attribute value of an element ?

Let's say i have below button which is hidden I need perform to click on but selenium detect it as Invisible.

<button id="datasubmit" name="btndubmit" style="display:none;">data submit</button>

If I try to locate, selenium will throw me the ElementNotVisibleException. So here you can set or change the attribute value of any element and perform your intended action. Here I'm going to change attribute value

WebElement element = driver.findElement(By.id("datasubmit"));

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript("arguments[0].style.display = 'block'", element );

Another scenario can be suppose I have some same kind of ad images on my page i want to hide all them, refer below tag which contains the ad

<img src="images/temp/advertisement.png">

Solution 1 :

JavascriptExecutor js = (JavascriptExecutor)driver;

List<WebElement> element = driver.findElements(By.tagName("img"));

for(WebElement e:element)

{
    if(e.getAttribute("src").contains("images/krishna_ads/jobs.png"))
    {
        js.executeScript("arguments[0].style.display = 'none'", e);

    }
}

Solution 2 :

    "imgs[i].setAttribute('style', 'display: none');" +

    " }" +

    "}" );

 2. How to enter text in a text field without using `sendKeys()` method of Selenium

WebElement element = driver.findElement(By.xpath(".//*[@id='example']/div[1]/div[2]/span/span/input"));

JavascriptExecutor js = (JavascriptExecutor)driver;

jse.executeScript("arguments[0].value='Aniseed Syrup';", element);

3. How to get bonded value of an element ?

WebElement element = driver.findElement(By.xpath(".//*[@id='example']/div[1]/div[2]/span/span/input"));

JavascriptExecutor jse = (JavascriptExecutor)driver;

String value = (String) jse.executeScript("return arguments[0].value", element) ;

4. How to evaluate an xpath which locating a text element ?
Selenium doesn't allow us to locate an element using text node. For example I have below HTML snippet

<table id="test" width="100">
     <tbody>
         <tr>
           <td valign="top" nowrap="">Details:</td>
             <th align="left" valign="top" >
                 Firsname : narendra<br>
                 Lastname: rajput<br>
                 Tool: selenium
              </th>
          </tr>
      </tbody>
</table>

Here I want to select the text "Firsname : narendra" only and I have the below xpath for that :

//table[@id='test']//th/text()[1]

but while use the same xpath in selenium to get the text it gives Exception xpath is not valid because selenium doesn't allow to locate the element using text node. So by using JavascriptExecutor you will be able to evaluate the same xpath. you have to use evaluate() method in following manner

Solution 1:

JavascriptExecutor js = (JavascriptExecutor)driver;

Object firstname= js.executeScript("var value = document.evaluate(\"//table[@id='test']//th/text()[1]\",document, null, XPathResult.STRING_TYPE, null ); return value.stringValue;");

System.out.println(firstname.toString());

Solution 2:

WebElement element = driver.findElement(By.xpath("//table[@id='test']//th"));

JavascriptExecutor js = (JavascriptExecutor)driver;

String firstname= (String) js.executeScript("return arguments[0].childNodes[0].textContent", element);

Apart from these you can do the following things too -

5. To perform the click on an element if click() method of Selenium is not working

WebElement element = driver.findElement(By.yourlocator);

JavascriptExecutor js = (JavascriptExecutor)driver; js.executeScript("arguments[0].click();", element);

6. Generate Alert Pop window 

JavascriptExecutor js = (JavascriptExecutor)driver;

Js.executeScript("alert('Javascript alert');");

7. Refresh the page 

JavascriptExecutor js = (JavascriptExecutor)driver;

driver.executeScript("history.go(0)");

8. Get innertext of the entire webpage

JavascriptExecutor js = (JavascriptExecutor)driver;
String innertext =  js.executeScript("return document.documentElement.innerText;").toString();

9. Get the Title of our webpage

JavascriptExecutor js = (JavascriptExecutor)driver;
String pagetitle =  js.executeScript("return document.title;").toString();

10. Perform Scroll on application

JavascriptExecutor js = (JavascriptExecutor)driver;

js.executeScript("window.scrollBy(0,50)");