Use JavaScript with Selenium WebDriver

WebDriver is very powerful and supports lots of methods and features. But there are some cases which are best handled via JavaScriptExecutor.

JS extends the capabilities of the WebDriver and can be helpful in the below cases.

• Submit page instead of Click - Sometimes a button on a webpage does not have any Click methods, instead its treated as a form that has to be submitted. In such cases, even though there is button you can theoritically click, its not registered as a click but rather as a submit. Hence, in such cases, the click() method of the WebDriver may not always work and we may have to submit the page/form via JS.
• Handling nested web elements - Usual WebDriver commands like "Click" may not work on toggle always, as it may find that object is not clickable.
• Complete area of some web elements like button, checkbox etc are not  clickable. You need to click on specific part of element to perform action. Selenium might fail here some times. In this case also JS is very useful.
• Handling different types of Calendars.
• Scrolling can be a big problem in selenium. Using JS, we can scroll by pixels or to the web element.
• Handling hidden elements - JS can get text or attribute value from hidden webelements which could be difficult by direct methods.
• Drag and drop issues can be handled via js.
• Object Location - JS can also be used to locate web elements using below methods
• getElementById
• getElementsByClassName
• getElementsByName
• getElementsByTagName

 /*

  * Function to execute Synchronous script via JS

  * The return is of the type superclass Object

  */

 public Object executeSyncJS(String jsCode) {

   /*

   * Downcasting driver to JavascriptExecutor object because we had upcasted our driver object to WebDriver

   * We don't need to downcast had we used [ChromeDriver driver= new ChromeDriver();] instead of [WebDriver driver= new ChromeDriver();]

   */

  JavascriptExecutor jsExe = (JavascriptExecutor) getDriver();

 

  /*

   * The return type of the JS Response depends on the result of the command executed

   * It could be anything - String, boolean, Map etc

   * Since Object class is the parent class of all objects, we are setting the type of response to 'Object'

   */

  Object jsResponse = jsExe.executeScript(jsCode) ;

  return jsResponse ;

 }

 

 /*

  * Function to click a WebElement via JavaScript

  */

 public Object jsClick(WebElement elementToClick) {

  JavascriptExecutor jsExe = (JavascriptExecutor) getDriver();

  Object jsResponse = jsExe.executeScript("arguments[0].click;" , elementToClick );

   return jsResponse;

 }

  public void jsDemo() {

  

  //Scroll vertically via JS 

  executeSyncJS("window.scroll(0,1000)");

  Utils.sleep(1000);

  executeSyncJS("window.scrollTo(0,2000)");

  Utils.sleep(1000);

  executeSyncJS("window.scrollBy(0,1000)");

   //Return the result of a script execution

  Object result = executeSyncJS("return 1===2");

  log.info("Result of JS: " + result);

 

 }

 

 /*

  * Function to find element by ID via JavaScript

  * To return a WebElement we need to downcast the Object

  */

 public WebElement jsGetElementById() {

  WebElement webElement = null ;

//  getDriver().get("https://www.cleartrip.com/");

  JavascriptExecutor jsExe = (JavascriptExecutor) getDriver();

  jsExe.executeScript("return document.getElementById('FromTag')") ;

  return webElement;

 }