Ruby Watir or Javascript: Get 5 first elements of a section

Question

Im trying to get the first five elements out of the following section on a webpage.

<section _ngcontent-c16="" class="rounds">
  <!----><csgr-roulette-round _ngcontent-c16="" _nghost-c22="" class="ng-tns-c16-2 ng-trigger ng-trigger-slideInOut black">13</csgr-roulette-round><csgr-roulette-round _ngcontent-c16="" _nghost-c22="" class="ng-tns-c16-2 ng-trigger ng-trigger-slideInOut red">5
</section>

How could I do this with ruby watir or javascript? At the end I need the colors in the class-name. I tried it with ruby but I can only access the section itself but not his elements. By the way: The section is dynamic, so every 30 sections another color is added.

Thanks for your help.

Answer 1

I think this is what you're looking for:

const rounds = document.getElementsByClassName('rounds');

for (let i = 0; i < Math.min(rounds[0].children.length, 5); i += 1) {
  const rouletteRound = rounds[0].children[i];
  console.log(rouletteRound.innerHTML);
}

Answer 2

In WATIR, you can write the following code

b.section(class: 'rounds').elements.each do |element|
  p element.attribute(:class).split(/\s/).last
end

Output

"black"
"red"