list child elements using nightwatch js

Question

I need help in listing/counting the number of child elements for a parent. Please refer to the code attached, I am looking to count how many

<div class="media"> ... </div>

are there for the parent

<div id="draft_studies" class="xyz"> or <div id="open_studies" class="xyz">

I am new to nightwatch and I did look into the nightwatch reference but did not find anything helpful, may be I missed something.

Any help is appreciated.

    <div class="tab-content">
      <div id="draft_studies" class="xyz">
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>            
    </div>
    <div class="tab-content">
      <div id="draft_studies" class="xyz">
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>            
    </div>        
    <div class="tab-content">
      <div id="draft_studies" class="xyz">
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>
      <div class="media"> ... </div>            
    </div>

What I have tried until now is :

listElements: function(list) {
    return this
    .api.elements('css selector','draft_studies',function(result){
  OR  .api.elementIdElements('draft_studies', 'css selector', ".media" ,function(result) {
      console.log("Element is ... " + result.value);// --> LOGS - Element is ... [object Object]
      console.log("Element is ... " + result.value.length);// --> LOGS - Element is ... undefined
      result.value.forEach(function (value) { //Fails with error - TypeError: result.value.forEach is not a function( Which i think is correct, as we cant have forEach here)
        console.log(value);
        var elementID = value.ELEMENT;
        console.log('Checking Element - ' + elementID);
      })
    });
  },

AND

      listElementsNew: function(list) {
    return this
    .api.perform(function() {
      var childNodes = [];
      childNodes.push(document.getElementById('@studyListTable2').childNodes);
    });// Fails with error - Error while running perform command: document is not defined

-- Mukesh

Answer 1

The following solution worked for me posted by someone in some other group:

browser.elements('css selector','#draft_studies > .media', function(result) {
  result.value.forEach(function (value) {
    var elementID = value.ELEMENT;
    console.log('Checking Element - ' + elementID);
  });
});