How to select child element of each li in an each.do list iteration?

Question

I need to run through a list of users and open each in a new tab. The tab should close upon performing an action and return to the first tab to select the next user in the list. I'm having trouble selecting the next user in the list by order. The problem is that each user can be selected only by clicking their photo- which is a child element of the list item.

HTML

<div class="_gs38e">
 <ul class="_8q670 _b9n99">

  <li class="_6e4x5">
   <div class="_npuc5">
    <a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
     <img class="_rewi8" src="https://pic.com/t51.2885-
     _1930374081979351040.jpg"></a>
    <div class="_eryrc">
     <a class="_2g7d5 notranslate _o5iw8" title="username1_" 
     href="/username1_/">username1_</a>
    </div>
   </div>
  </li>

  <li class="_6e4x5">
   <div class="_npuc5">
    <a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
     <img class="_rewi8" src="https://pic.com/t51.2885-
     _1930374081979351040.jpg"></a>
    <div class="_eryrc">
     <a class="_2g7d5 notranslate _o5iw8" title="username1_" 
     href="/username1_/">username1_</a>
    </div>
   </div>
  </li>

  <li class="_6e4x5">
   <div class="_npuc5">
    <a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
     <img class="_rewi8" src="https://pic.com/t51.2885-
     _1930374081979351040.jpg"></a>
    <div class="_eryrc">
     <a class="_2g7d5 notranslate _o5iw8" title="username1_" 
     href="/username1_/">username1_</a>
    </div>
   </div>
  </li>

  <li class="_6e4x5">
   <div class="_npuc5">
    <a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
     <img class="_rewi8" src="https://pic.com/t51.2885-
     _1930374081979351040.jpg"></a>
    <div class="_eryrc">
     <a class="_2g7d5 notranslate _o5iw8" title="username1_" 
     href="/username1_/">username1_</a>
    </div>
   </div>
  </li>

  <li class="_6e4x5">
   <div class="_npuc5">
    <a class="_pg23k _9irns _gvoze" style="width: 100px; height: 100px;">
     <img class="_rewi8" src="https://pic.com/t51.2885-
     _1930374081979351040.jpg"></a>
    <div class="_eryrc">
     <a class="_2g7d5 notranslate _o5iw8" title="username1_" 
     href="/username1_/">username1_</a>
    </div>
   </div>
  </li>
 </ul>
</div>

This results in the first user being selected each time as it just finds the first picture on the page for all the list items. I've added an output of the username text to make sure the each do loop is running through the list items in order. It successfully prints the username of a different list item every time while only opening the first user. I need a way to define the photo element as a child of each list item to be included in the each.do loop

Mylist = browser.ul(:class => "_8q670 _b9n99")

#Index the UL to open each user in order
Mylist.users.each_with_index do |user|

    #open user in new tab by selecting photo

    browser.a(:class => '_pg23k _9irns _gvoze').exists?
    browser.a(:class => '_pg23k _9irns _gvoze').click(:control)
    browser.windows.last.use

    #performs action and closes tab

      browser.windows.last.close


puts user
puts user.text

end

How do I define the element to be selected as the child of the current li in the list?


Show source
| ruby   | foreach   | selenium   | watir   | selenium-chromedriver   2017-09-05 23:09 1 Answers

Answers to How to select child element of each li in an each.do list iteration? ( 1 )

  1. 2017-09-06 01:09

    Inside the loop you need to use

    user.a(:class => '_pg23k _9irns _gvoze').click(:control)
    

    The reason is that a browser object can be used to search elements inside the main html page. If you use 'browser' inside the loop it will be looking at the entire HTML, and where more than one element that meets the search criteria exists, it will return the first one found. So even through it is inside the loop, it would find the same element on the page every time.

    To use the current item in the list that is being iterated you need to use the name (in this case user) that you've told it to assign to the list elements as it walks the list.

Leave a reply to - How to select child element of each li in an each.do list iteration?

◀ Go back