WebdriverIO How to loop through a list of elements that is not an actual table or list

Question

how can I loop through a list of elements that looks something like this.

(In this case I only need the length of the elements in the list, but other people might benefit from more info in regards to looping through the elements.)

Here is my code:

class Facilities {

    get facilityCards() { return $('//*[@class="card-columns"]'); }

    getFacilityCardCount() {
       const fcs = this.facilityCards;
       return fcs.$$('div').length;
    } 
}

export default new Facilities();

I do have this working in other portions of code where i'm working with an actual table. In that case the table tag is my main xpath, and the tr tag is what I search with. But with this scenario all I have to work with is div's

Please let me know if you would like more clarity. Your help is most appreciated =)

Answer 1

As you know, the $$ api returns an array of elements. you can use any of the js array methods on this and loop through all the elements. You can do various operations on each element. Below is an example.

$('//*[@class="card-columns"]').$$('div').forEach(element => {
  console.log(element.getText());
})