How to use JavaScript in selenium to click an Element

Question

I was using following code/html:

<button name="btnG" class="gbqfb" aria-label="Google Search" id="gbqfb"><span class="gbqfi"></span></button>

This is my Java code for clicking the element using selenium webdriver.

driver.findElement(By.id("gbqfb")).click();

How can I implement this using Java Script and Webdriver?

Answer 1

Executing a click via JavaScript has some behaviors of which you should be aware. If, for example, the code bound to the onclick event of your element invokes window.alert(), you may find your Selenium code hanging, depending on the implementation of the browser driver. That said, you can use the JavascriptExecutor class to do this. My solution differs from others proposed, however, in that you can still use the WebDriver methods for locating the elements.

// Assume driver is a valid WebDriver instance that
// has been properly instantiated elsewhere.
WebElement element = driver.findElement(By.id("gbqfd"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("arguments[0].click();", element);

You should also note that you might be better off using the click() method of the WebElementinterface, but disabling native events before instantiating your driver. This would accomplish the same goal (with the same potential limitations), but not force you to write and maintain your own JavaScript.

For further understanding, you can refer to the Selenium Certification.

Answer 2

JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript(Script,Arguments);

js.executeScript("document.getElementById('gbqfb"').click();");

Answer 3

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

Answer 4

In case, these locators do not work you can use JavaScriptExecutor. You can use JavaScriptExecutor to perform the desired operation on a web element.

Selenium supports javascript executor. There is no need for an extra plugin or add-on. You just need to import (org.openqa.selenium.JavascriptExecutor) in the script to use JavaScriptExecutor.

JavaScriptExecutor Methods

1. executeAsyncScript

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 JS so executed is single-threaded with a various callback function which runs synchronously.

1. executeScript

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.

The basic syntax for JavascriptExecutor is given below:

Syntax:

JavascriptExecutor js = (JavascriptExecutor) driver;  
js.executeScript(Script,Arguments);

• Script – This is the JavaScript that needs to execute.
• Arguments – It is the arguments to the script. It's optional.