Capture immediate child in HTML

Question

Using watir-webdriver with Ruby 2.3.3

I need to find all Div's having attribute(data-id) from below HTML

<div id="response1">
  <div data-id="2">
    <span>XYZ</span></div>
  <div data-id="3">
    <span>XYZ</span></div>
  <div data-id="4">
    <span>XYZ</span>
    <div></div>
    </div>
  <div data-id="5">
    <span>XYZ</span></div>
  <div data-id="6">
    <span>XYZ</span></div>
  <div data-id="7">
    <span>XYZ</span>
    <div></div></div>
</div>

But when I use

@browser.div(id: "response1").divs  

I get 8 div elements where I am expecting just 6 child div elements with attribute 'data-id', but seems like .divs captures all div elements inside that html.

Is there any way to just capture those 6 div elements.

Answer 1

If you are using Watir v6.2 or greater, there is a new #children method that locates just the immediate children:

browser.div(id: "response1").children

It accepts the standard locators. For example:

# is a div tag
browser.div(id: "response1").children(tag_name: 'div')

# has a data-id containing 5
browser.div(id: "response1").children(data_id: /5/)

If you are on an older version, you'll have to write XPath:

browser.div(id: "response1").divs(xpath: './div')