How to use JQuery in Selenium?

Hi,
I am new to Selenium and also new to JQuery, currently I was assigned a task to test a web base app using Selenium and the site was develop using JQuery. One thing I'm frustrating is I have no way to click on the tab using Selenium.Click() because that tab was dynamically generate using jQuery and no ID assign to it. I have done a search for the whole week on injecting JQuery into Selenium and have repackage the selenium-server.jar so that it is able to recognise JQuery syntax. But I'm still stuck where I don know how to trigger a JQuery in Selenium? I don even know whether repackage the selenium-server.jar with JQuery is a right move? Any pointer or tutorial on this issue? How can I click on the tab link without using ID but class-ID?

Any suggestion/recommendation would be much appreciated.

THanks in advanced.

You should be able to use click() on any button that has a unique xpath. If you have elements with unique name/class pairs, name //[@class='classname'] should work, I think.

xpath is new to me. I did try on the Xpath checker on firefox plug-in, but I'm still not
able to click on it using Click() from Selenium. Very interesting that
the output generated from xpath checker is using id instead of class
name. I did try on both, but neither let me get though the link.

Lets have an example here:

Code:

<div class="container_1">
  <div class="tab_1">
      <a href="#link_1" tabindex="10">link_1</a>
  </div>
</div>

How can I access to "tab 1" using xpath?

THanks @!

Provided that that is the only div with class=tab_1, /div[@class='tab_1'] should work, if memory serves. There are a number of other ways you could address it though, depending upon uniqueness. /div[@class='container_1']/div, /div[@class='container_1']/div[1], or /div[@class='container_1']/div[@class='tab_1'] should probably all work.

I am so curious how to click on the link? Do I need to specify it like this?

Code:

/div[@class='container_1']/div[@class='tab_1']/a

or how?

THanks @!

That should work. Alternatively, if it is the only link_1 on the page and will always have that link, click("link=link_1") or click("/a[@href='#link_1']") should also work. Or if it is the only thing on the page at tabindex 10, even click("/a[@tabindex='1']") should work. :)

You are right, the code is working by using xpath. But the tab page did't refresh it.

Here is the situation, there are 2 tabs in the page. In an ideal case, when the page is loaded, tab 1 will growth/highlight and the content of tab 1 will be shown in the page. When click on tab 2, tab 2 will growth/highlight and the content of tab 2 will be shown in the page. Here is the code.

Code:

<div class="container_1">
  <div id="tab_1">
 
    <a href="#link_1" tabindex="10">link_1</a> 
</div>
 
 <div id="tab_2">
      <a href="#link_2"
tabindex="11">link_2</a>
  </div>
</div>


But when I'm using the selenium.click() by passing in the xpath argument to click on the tab 2, the content of tab 2 didn't shown up. Basically I'm still able to access it, the xpath thing really work, just that I feel a bit strange where I didn't see any content of tab 2 shows up while the test is undergo.



Do you feel strange as well?
How can I bring up the content of tab 2?

Thanks @!

Some times, Selenium handles some behaviors oddly. This may be a case of that. If it works, I would take it as good, but keep looking for a definitive answer. You have clicked on tab2 first, right?

I think I was wrong, sorry to confusing you. Lets make thing clear.

After the page is loaded, it shows the tab 1 page, when I clicked on the tab 2, the page 2 should be shown. Here is the piece of the code.

Code:

<div id="container_1">
  <div class="xxx_yyy"> // dome dummy code generated automatically using JQuery
    <a href="#link_1">link_1</a> // this will bring up tab 1 content
  </div>

  <div class="xxx_yyy"> // dome dummy code generated automatically using
JQuery
    <a href="#link_2">link_2</a> // this will bring up tab 2 content
  </div>

  <div id="tab_1">
    // tab 1 content
  </div>
 
  <div
 id="tab_2">
    // tab 2 content
 
 </div>
</div>

By using the xpath as shown below together with the Selenium.click(), it doesn't bring up page content.

Code:

/div[@id='container_1']/div[2]/a

I been thinking to directly access to the content in "tab_2" since there are locate in the same page but I don't think this is a right way to doing this. Is there a way to bring up tab 2 content since it is generated using JQuery? Does User Extension can help?

THanks @!

Does it give you an error? If so, what is it? I really don't think JQuery has anything to do with the problems you are having. Selenium can be extremely finicky when it comes to what Xpaths it likes though, so I'd first suggest trying different valid Xpaths to your link. When you click tab2, does it trigger an AJAX-type event, or is it a full page load?

There is no error from Selenium. I think this is not the JQuery problem, and there is no AJAX in the web.

I have solved the problem. This is my solution:

selenium.click("xpath=//div[@id='container_1']/div[2]/a"); // clicking on the link no. 2 which is "link_2" in this case.

I have omitted the "xpath=" keyword in the click(), thus selenium not able to trigger the click event.

Thank you for the continuos support to this thread, thank you so much on your help!!

THanks @!

Glad it works. From what I remember, you shouldn't have to explicitly define the locator type, but if it works for you, it works.