Multiple level of sections in page_objects in nightwatch.js

Question

I have just started out using nightwatch.js , and I am using page_objects to access elements in my tests. So what I was wondering is there anyway we can have sections within sections in page objects? I know that we can specify one level of section. What I have done is something like this :

module.exports = {
  url : 'http://127.0.0.1:8111/local.html#open?view=shelf&lang=en_US',
  sections : {
    topContainer : {
      selector : '.top_container',
      elements : {
        logo : {
          selector : '.logo'
        },
        settingsButton : {
          selector :'.dropdown'
        },
        searchBox : {
          selector : '.search_box'
        },
        sortOrderButton : {
          selector : '.icond'
        }
      }
    },
    library : {
      selector : '.library',
      bookList : {
        selector : 'ul.library_container'
      }
    }
  }
};

Can we have sections inside sections , and in case not , how do we select in test case with @variable

client.elements('css selector','@top_container ul.dropdown-menu li', function (result) {
      if ( result.value.length == 3 ) {
        this.verify.ok(result.value.length, '3 languages loaded');
      }
    });

Thanks !

Answer 1

The nightwatch.js documentation for "Working With Page Objects" specifies

Note that every command and assertion on a section (other than expect assertions) returns that section for chaining. If desired, you can nest sections under other sections for complex DOM structures.

So , I tried using by hit and try to make the correct json structure , and it works great now :)

Sample code in page_object

sections : {
book_view : {
    selector : '.read_book_view',
    sections : {
      top_container : {
        selector : '.top_container',
        elements : {
          lib_view : {
            selector : '.lib_view'
          },
          toc_link : {
            selector : '.dropdown .dropdown-toggle'
          },
          toc_index : {
            selector : '.dropdown .index-dropdown'
          },
          notes_and_hightlights : {
            selector : '.page_access'
          },
          settings : {
            selector : '#settings_b'
          },
          search : {
            selector : '.search_trigger'
          },
          zoom : {
            selector : '.zoom_iconsset'
          }
        }
      }
    }
  }

}

and referring to them in test cases, like this

var bookSection = bookView.section.book_view;

// Top container
var topSection = bookSection.section.top_container;
topSection.expect.element('@lib_view').to.be.present;

Thanks !