How can I grab multiple elements with the same selector using async wdio?

Question

I am using async wdio to test my react app and would like count some elements that have a particular selector as well as check for some things in them. This is what the code I am testing looks like:

<div className='container'>
  <li className='my-element'>
    <button>Button 1</button>
  </li>
  <li className='my-element'>
    <button>Button 2</button>
  </li>
  <li className='my-element'>
    <button>Button 3</button>
  </li>
</div>

So basically what I would like to do is count the number of li tags with the class my-element and check for the contents of each one of them. Based on the docs , it would seem that I want to use $$ on the .container , so something like this:

it('count my-elements', async function () {
  const container = await $('.container')
  const myElements = await $$('.my-element') // gives me some weird array with an element object
  console.log(myElements)
})

This is the object I get from the console.log :

[
  parent: Element {
    sessionId: '12bd5537ee1cee33e1f23d0e1a162a40',
    elementId: '0.345325829273438-8',
    ELEMENT: '0.345325829273438-8',
    selector: '.container',
    parent: Browser {
      sessionId: '12bd5537ee1cee33e1f23d0e1a162a40',
      capabilities: [Object],
      addCommand: [Function],
      overwriteCommand: [Function],
      addLocatorStrategy: [Function],
      config: [Object]
    },
    emit: [Function: bound ],
    isReactElement: false,
    addCommand: [Function],
    overwriteCommand: [Function]
  },
  selector: '.my-element',
  foundWith: '$$',
  props: []
]

Not sure what to do with this or how to actually check for all the elements I got with that selector.

So in conclusion, for starters I would like to count how many elements were selected with that particular selector and perhaps be able to go in deeper to each one and see/access their contents.

Answer 1

$$ returns an array of elements. To get the number of the elements you need to use the Array.length

So

myElements.length will give you the number of the elements you found with $$

__

Not sure what you mean by "see/access their contents". But if you want for instance get the text of the each element you found you can perform any action that is suitable for array (eg forEach )