DEV Community

n350071πŸ‡―πŸ‡΅
n350071πŸ‡―πŸ‡΅

Posted on • Edited on

Find in Capybara

#rails

πŸ”— Parent Note

n350071

My Capybara note

n350071πŸ‡―πŸ‡΅ ・ Sep 11 '19

#rails

basic

πŸ‘ find by attributes (find by name) 

 find('input[type="checkbox"]').click find('a[href="/dashboard"]').click find('[name="user_form[age]"]')
Enter fullscreen mode Exit fullscreen mode

πŸ‘ find by name 

 find('a', name: 'click here').click
Enter fullscreen mode Exit fullscreen mode

πŸ‘ find by element and class 

 # <div class='my-class'>hello</div> find('div.my-class').text # <div id='book-body'> # <div class='book-contents vertical'>にほんご</div> # </div> find('#book-body > book-contents.vertical').text
Enter fullscreen mode Exit fullscreen mode

πŸ‘ find invisible element 

 find('p.message', visible: false).text
Enter fullscreen mode Exit fullscreen mode

advanced

πŸ‘ find the parent of the node 

 # just one parent node find('#target_node').find(:xpath, '..') # recursively parent el.find(:xpath, '../../../dt') el.find(:xpath, 'ancestor::dl')
Enter fullscreen mode Exit fullscreen mode

πŸ“š Recursively go up or down | XPath tutorial

πŸ€” find from several same selector

πŸ‘»Bad code

You'll see Ambiguous match error if you use just a find method.

 <div class='base'> <span class='greeting'>hello</span> <span class='greeting'>goodbye</span> <a href="#">link_1</a> <a href="#">link_2</a> </div>
Enter fullscreen mode Exit fullscreen mode 
 find('span.greeting') #=> Capybara::Ambiguous: Ambiguous match, found 2 elements matching visible css ('span.greeting')
Enter fullscreen mode Exit fullscreen mode

πŸ‘good code 

 first('div.hello') all('div.hello')
Enter fullscreen mode Exit fullscreen mode
  • Cons
    • Easy
  • Pros
    • they don't wait for the selector is rendered.
    • you have to maintain if selector order is modified in the future.

πŸ“š Stack Overflow

πŸ¦„ good code 

 find('div.base > span:nth-child(1)').text #=> hello find('div.base > span:nth-child(2)').text #=> goodbye find('div.base > span:nth-of-type(1)').text #=> hello find('div.base > span:nth-of-type(2)').text #=> goodbye find_link('link_1', match: :first).cilck
Enter fullscreen mode Exit fullscreen mode

nth-of-type is better.

πŸ“š nth-child

Top comments (3)

Collapse
 
erikwhiting88 profile image
Erik •

Hey, I have been googling stuff for last hour trying to find a solution to a problem I was having and this is the page that gave me the answer, thank you so much. Btw, solution to my problem was essentially:

# Find the first input within an element of class class_name find(.class_name > input)
Enter fullscreen mode Exit fullscreen mode

Thank you

Collapse
 
risafj profile image
Risa •

Nice concise tips! I think you got "pros" and "cons" backwards here:

  • Cons
    • Easy
  • Pros
    • they don't wait for the selector is rendered.
    • you have to maintain if selector order is modified in the future.
Collapse
 
n350071 profile image
n350071πŸ‡―πŸ‡΅ •

I recreated this note because the previous one is somewhat crashed. When I press the 'EDIT' button, it shows previous (maybe, 3 or 4 previous) version of one.