How to click a button in Selenium WebDriver with Java using jQuery

Question

I have the following HTML:

<button class="gbqfba" name="btnK" aria-label="Google Search" id="gbqfba"><span id="gbqfsa">Google Search</span></button>

My following code for clicking "Google Search" button is working well using java in WebDriver:

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

I want to use jQuery with WebDriver to click the button. How can I do it?

I did the following (Test was run in eclipse by using TestNG framework):

WebDriver driver = new FirefoxDriver();
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("$('#gbqfba').click();");

Unfortunately the following error was displayed:

org.openqa.selenium.WebDriverException: $ is not defined (WARNING: The server did not provide any stacktrace information) Command duration or timeout: 23 milliseconds

What's the wrong with my above code?

Solution 1

WebDriver doesn't apparently use jQuery extension, so '$' isn't in the name space. You could load the minified jQuery.js into a string, then eval it as part of your test - which would add '$' to page's namespace...

Solution 2

The following code works nicely:

WebDriver driver = new FirefoxDriver();
JavascriptExecutor jse = (JavascriptExecutor)driver;
URL jqueryUrl = Resources.getResource("jquery-1.8.2.min.js");
String jqueryText = Resources.toString(jqueryUrl, Charsets.UTF_8);
jse.executeScript(jqueryText);
jse.executeScript("$('#gbqfba').click();");

Comments

[Ripon Al Wasim]

How can I use outer js file in WebDriver? Can you please give an example with configuration of .js file?

[oshea00]

What you want to do is get the jQuery.js file into a string. Many ways to do html5rocks.com/en/tutorials/file/dndfiles once you have that, you can do this jse.executeScript("eval(jqueryscript);$('#gbqfq').click();")‌​; I have to admit this is a hack, and would be slow if you have to do many of these since eval is slow anq even minified jQuery is large

[Ripon Al Wasim]

Thanks for your answer. I have understood the example, but still I am in a vague about jqueryscript parameter in eval. What will be written in jqueryscript?

[Ripon Al Wasim]

As "google.com" does not use jQuery the code mentioned my post failed. It can be solved by loading the contents of the jQuery code into a String from a JavaScript file (jquery.js, jquery.min.js or similar)

[Ardesco]

This is really not a good idea. You are injecting a fairly major bit of code into the website you are testing that may well not play nicely with the code that is already there. There are lots of JS libraries that conflict with jQuery and jQuery even conflicts with itself if you have differing versions. If jQuery is not available in the website you are testing don't use it! To be clear by doing this you are probably invalidating your testing.

[Ripon Al Wasim]

@Ardesco: Thanks for your suggestion. What's the best way? to use JS? Is it unwise to use JQuery in Selenium automated test?

[Ardesco]

Using jQuery is fine if the library is already available, injecting a bunch of new libraries (jQuery or not) into the website you are trying to test could have far reaching consequences. The question is why are you injecting JavaScript to fire a click event anyway, that's kind of why you have a WebElement.click() function in Selenium.

[Ripon Al Wasim]

Yes, I agree with you. I used just for learning JS or jQuery in WebDriver. There is click() method to use nicely.