5

I have done a lot of research to find out the answer for the following to no avail.

I have the following class in one <div> tag in the HTML.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f7592388723hsjd73hd' data-toggle='collapse'>

And I have few more classes within few other <div> tags but they use the same class name.

<button type='button' class='btn btn-navbar document-collapse pull-right' data-target='#document_521f75032f23104747ed753c' data-toggle='collapse'>

By Default, the first <div> is expanded and all the other <div> are collapsed. I need to be able to click on the second and reveal thee other buttons and controls that are hidden.

I tried the following but it didn't work.

expandOrderLink(wait:true)  { $(".btn.btn-navbar.document-collapse.pull-right:nth-child(2)") }

Is there a way we can look for all the class elements with the same name and choose the one we need (in my case the second one).

Also note that I cannot use any other attributes since have dynamic content with encrypted info (such as #document_521f75032f23104747ed753c)

vijay pujar
  • 1,683
  • 4
  • 19
  • 32

4 Answers4

12

try something like this

  $(".btn.btn-navbar.document-collapse.pull-right").eq(1);
rajesh kakawat
  • 10,826
  • 1
  • 21
  • 40
  • Sorry I get the following error: $("button.btn .btn-navbar .document-collapse .pull-right").eq(1) | | [] [] Both returned null – vijay pujar Nov 28 '13 at 12:31
  • Sorry it doesn't work. If I remove .eq(1), it clicks on the first css and collapses the list. I need to click on the second CSS which is part of a different 'div' tag – vijay pujar Nov 28 '13 at 12:45
5

Your question is misleading in that you ask about how to select an element at an index with jQuery but in your code sample you're using Geb - I suggest you change the tile of your question. Geb's Navigator API is not compatible with jQuery, it's just jQuery-like.

To select the second element in your example you can write:

expandOrderLink(wait:true)  { 
    $(".btn.btn-navbar.document-collapse.pull-right", 1) 
}

Check out the section on indexes and ranges in the manual.

You can also simply access an element using subscript operator:

expandOrderLink(wait:true)  { 
    $(".btn.btn-navbar.document-collapse.pull-right")[1]
}
erdi
  • 6,944
  • 18
  • 28
  • Hi erdi, Thanks alot for the answer to my query. It finally worked!! :-)I have been using a lot jQuery selectors in my tests and I didn't realise Geb doesn't support it completely. I will have to modify few of my selectors to be able to work with Geb. – vijay pujar Dec 02 '13 at 15:43
1

If you want to select the second element always, then use .eq(index)

  $("your classs").eq(1);
Murali Murugesan
  • 22,423
  • 17
  • 73
  • 120
  • I have looked at .eq(index) before, it works only with the elements in the same tag. But as I mentioned the classes are across different tags and the eq is failing – vijay pujar Nov 28 '13 at 12:34
0

try this

$(".btn.btn-navbar.document-collapse.pull-right:eq(2)")
Anto Subash
  • 3,140
  • 2
  • 22
  • 30
  • I get the following error: $(".btn.btn-navbar.document-collapse.pull-right").eq(2) | | | [] [[[[[FirefoxDriver: firefox on XP (3d5b86d2-f14c-46c8-972d-f9bc9ff9c7f5)] -> tag name: html]] -> css selector: .btn.btn-navbar.document-collapse.pull-right], [[[[FirefoxDriver: firefox on XP (3d5b86d2-f14c-46c8-972d-f9bc9ff9c7f5)] -> tag name: html]] -> css selector: .btn.btn-navbar.document-collapse.pull-right]] – vijay pujar Nov 28 '13 at 12:30