🔗 Parent Note
basic
👍 find by attributes (find by name)
find('input[type="checkbox"]').click
find('a[href="/dashboard"]').click
find('[name="user_form[age]"]')
👍 find by name
find('a', name: 'click here').click
👍 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
👍 find invisible element
find('p.message', visible: false).text
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')
📚 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>
find('span.greeting')
#=> Capybara::Ambiguous: Ambiguous match, found 2 elements matching visible css ('span.greeting')
👍good code
first('div.hello')
all('div.hello')
- Cons
- Easy
- Pros
- they don't wait for the selector is rendered.
- you have to maintain if selector order is modified in the future.
🦄 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
nth-of-type is better.
Top comments (3)
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:
Thank you
Nice concise tips! I think you got "pros" and "cons" backwards here:
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.