How to use JQuery in Selenium?

Question

I would like to use Selenium to click on the tab of a web where the tab was created dynamically using JQuery. There is one problem, since it was created dynamically and the tab got no ID tied to it (only class-ID provided), so I am running out of clue to click on it using Selenium.

After googling for 2 weeks, I found out that it could be done using JQuery by injecting JQuery into Selenium and repackaging it so that it support JQuery API. But the problem now is I don't know how to trigger JQuery script in Selenium?

Is there any resources out there or guideline on setting up JQuery in Selenium? How am I going to execute JQuery in Selenium?

Nthalk · Accepted Answer · 2011-12-22T02:35:04.683

9

You can try using my selenium lib at github.

It handles almost the entire jquery API minus the functions that use/require handler passing:

HtmlUnitDriver drv = new HtmlUnitDriver(BrowserVersion.FIREFOX_3_6);
drv.setJavascriptEnabled(true);
try {
  jQueryFactory jq = new jQueryFactory();
  jq.setJs(drv);

  drv.get("http://google.com");
  jq.query("[name=q]").val("SeleniumJQuery").parents("form:first").submit();

  String results = jq.queryUntil("#resultStats:contains(results)").text();
  System.out.println(results.split(" ")[1] + " results found!");
} finally {
  drv.close();
}

edited Dec 22 '11 at 02:35

answered Dec 07 '11 at 18:36

Nthalk

3,774
1
25
19

jQuery's noConflict method is called here: https://github.com/Nthalk/SeleniumJQuery/blob/master/src/com/anteambulo/SeleniumJQuery/jQueryFactory.java#L144 – Nthalk Jul 31 '13 at 16:36

Lei Cao · Answer 2 · 2012-08-15T17:15:33.043

First you can read the jquery from a jquery.js or jquery.min.js file.
Then using execute_script(jquery) to enable jquery dynamically.
Now you can interact with jquery.

here is some code:

browser = webdriver.Firefox() # Get local session of firefox

with open('jquery.min.js', 'r') as jquery_js: #read the jquery from a file
    jquery = jquery_js.read()
    browser.execute_script(jquery)  #active the jquery lib

#now you can write some jquery code then execute_script them
js = """
    var str = "div#myPager table a:[href=\\"javascript:__doPostBack('myPager','%s')\\"]"
    console.log(str)
    var $next_anchor = $(str);
    if ($next_anchor.length) {
        return $next_anchor.get(0).click(); //do click and redirect
    } else {
        return false;
    }""" % str(25) 

success = browser.execute_script(js)
if success == False:
    break

PS: When I use Selenium to fetch some content from some website, they always ban me. Now you should use some proxy to go over it.
here is some code:

PROXY_HOST = "127.0.0.1"
PROXY_PORT = 8087
SOCKS_PORT = 8088

fp = webdriver.FirefoxProfile()

# Direct = 0, Manual = 1, PAC = 2, AUTODETECT = 4, SYSTEM = 5
fp.set_preference("network.proxy.type", 1)

fp.set_preference("network.proxy.http", PROXY_HOST)
fp.set_preference("network.proxy.http_port", PROXY_PORT)
fp.set_preference("network.proxy.socks", PROXY_HOST)
fp.set_preference("network.proxy.socks_port", SOCKS_PORT)
fp.set_preference("network.proxy.ftp", PROXY_HOST)
fp.set_preference("network.proxy.ftp_port", PROXY_PORT)
fp.set_preference("network.proxy.ssl", PROXY_HOST)
fp.set_preference("network.proxy.ssl_port", PROXY_PORT)

fp.set_preference("network.proxy.no_proxies_on", "") # set this value as desired

browser= webdriver.Firefox(firefox_profile=fp) # with proxy
browser = webdriver.Firefox() # no proxy
browser.get("http://search.example.com") # Load page

elem = browser.find_element_by_id("query_box") # Find the query input
elem.send_keys(u'my query string') # send query string to the input
elem.submit() # submit the query form

score 4 · Answer 3 · answered Oct 07 '10 at 21:32

Since you said that you didn't have an ID but a class:

(only class-ID provided)

...a better answer is likely to use the CSS locator strategy which is already baked-in to Selenium where you can select an element based on a css class or simply by using CSS selector logic (for at least css2 and css3)

So to select an element (div, span whatever) that has a specific class you can simply use this for the Selenium locator:

css=.class-ID

You can even use more complicated selectors that are similar to those available in JQuery such as:

css=#myDiv .class-ID

This will search for the element with a css style of class-ID within the element with an ID = myDiv.

score 3 · Answer 4 · answered Sep 29 '12 at 15:21

3

My team just finished a library that wraps jquery functions for use with Selenium. We just finished our first release, but plan on wrapping ALL of jquery's functions. This library makes it easy to use jquery from your Selenium tests in C#. It makes for MUCH cleaner looking tests. Here's the source code: https://github.com/AcklenAvenue/JQSelenium

answered Sep 29 '12 at 15:21

Byron Sommardahl

12,743
15
74
131

3

you mention C#, does it support JAVA? – huahsin68 Oct 01 '12 at 01:48

Takaaki Kasai · Answer 5 · 2012-04-03T04:43:23.837

You could use window.jQuery in getEval command:

|getEval | window.jQuery('div#main button').click(); | |

It works for me on Selenium IDE.

For FF3, use wrappedJSObject to get jQuery object:

|getEval | win = (this.page().getCurrentWindow().wrappedJSObject) ? this.page().getCurrentWindow().wrappedJSObject : this.page().getCurrentWindow() | |
|getEval | jq = win.jQuery | |
|assertEval | jq("div#main button").text() | click me! |

score 0 · Answer 6 · answered Jul 14 '10 at 02:31

0

You'd trigger jquery the same way you'd trigger some java script you'd inject. Try this how-to: http://seleniumhq.org/docs/05_selenium_rc.html#learning-the-api

answered Jul 14 '10 at 02:31

ascarb

468
5
21

How to use JQuery in Selenium?

6 Answers6

Linked