How to select the second Class element using jQuery working with Spock/Geb

Question

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)

Logwood

Please format your code – Indelicate

$(".btn.btn-navbar.document-collapse.pull-right').eq(1) ??? But why using so many classes to target specific elements?! – Eldoree

Can you please simplify the selector. I cannot use anything else because of the same classes being used everywhere – Logwood

This question is still outstanding. Can someone please answer – Logwood

Answer 1

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]
}    

Limon

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. – Logwood

Answer 2

try something like this

  $(".btn.btn-navbar.document-collapse.pull-right").eq(1);

Clement

Sorry I get the following error: $("button.btn .btn-navbar .document-collapse .pull-right").eq(1) | | [] [] Both returned null – Logwood

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 – Logwood

Answer 3

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

  $("your classs").eq(1);

Gluttonous

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 – Logwood

Answer 4

try this

$(".btn.btn-navbar.document-collapse.pull-right:eq(2)")

Prolactin

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]] – Logwood