title: list child elements using nightwatch js
body: <p>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 </p>
  
  <blockquote>
    <p><code>&lt;div class="media"&gt; ... &lt;/div&gt;</code></p>
  </blockquote>
  
  <p>are there for the parent </p>
  
  <blockquote>
    <p><code>&lt;div id="draft_studies" class="xyz"&gt;</code>  or <code>&lt;div id="open_studies" class="xyz"&gt;</code></p>
  </blockquote>
  
  <p>I am new to nightwatch and I did look into the nightwatch reference but did not find anything helpful, may be I missed something. </p>
  
  <p>Any help is appreciated.</p>
  
  <pre><code>    &lt;div class="tab-content"&gt;
        &lt;div id="draft_studies" class="xyz"&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;            
      &lt;/div&gt;
      &lt;div class="tab-content"&gt;
        &lt;div id="draft_studies" class="xyz"&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;            
      &lt;/div&gt;        
      &lt;div class="tab-content"&gt;
        &lt;div id="draft_studies" class="xyz"&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;
        &lt;div class="media"&gt; ... &lt;/div&gt;            
      &lt;/div&gt;
  </code></pre>
  
  <p>What I have tried until now is :</p>
  
  <pre><code>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);// --&gt; LOGS - Element is ... [object Object]
        console.log("Element is ... " + result.value.length);// --&gt; 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);
        })
      });
    },
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>      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
  </code></pre>
  
  <p>-- Mukesh</p>