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);
  });
});

Answer 2

var assert = require('assert');

module.exports = {
    'foobar': function (browser) {
        browser
            .url('http://localhost:3000')
            .waitForElementVisible('body', 1000);

        var numElements = 9;
        browser.execute(function(){
            var draftStudies = document.getElementById('draft_studies');
            return draftStudies.getElementsByTagName('div').length;
        }, [], function(result){
            assert.equal(result.value, numElements, 'Incorrect number of children');
        });



        browser.end();
    }
}

We are using the execute function to run some client side JS to get back the number of child elements. In the callback, we are using the assert library (which Nightwatch extends so it will be available) to check that we have the correct number of children. If there isn't the right number of children, than the test will error out and fail. Unfortunately there will be no console output if the test passes.