Unable to make nested Page sections example work

[Silvanus]

Trying to use a method similar to what is described in Nightwatch docs for page object sections, but it kept frustratingly not working.
After many failed attempts, attempted to use example code from docs to try and see what I was doing wrong.  I had to slightly modify as some selectors are not exactly the same as doc had, but example fails as well. e.g.:

pages/google.js

module.exports = {
  url: 'http://google.com', //added to make test actually work
  sections: {
    menu: {
      selector: '#gb',
      elements: {
        mail: {
          selector: 'a[href="mail"]'
        },
        images: {
          selector: 'a[href="imghp"]'
        }
      },
      sections: {
        apps: {
          selector: 'div.gb_uc', //had to update this selector
          elements: {
            myAccount: {
              selector: '#gb192'
            },
            googlePlus: {
              selector: '#gb119'
            }
          }
        }
      }
    }
  }
};

tests/googlePageSection.js

module.exports = {
  'Test': function (client) {
    var google = client.page.google(); //added to make test actually work
    google.navigate();
    google.expect.section('@menu').to.be.visible;

    var menuSection = google.section.menu;
    var appSection = menuSection.section.apps;
    menuSection.click('@appSection'); //Commented this out, and test 'runs' but fails on following
                                      //appSection expects. Also changed it to client.click('div.gb_uc')
                                      //with similar results, except the menu does open in the browser.

    appSection.expect.element('@myAccount').to.be.visible;
    appSection.expect.element('@googlePlus').to.be.visible;

    client.end();
  }
};

Running test results in:

>>nightwatch tests/googlePageSection.js
Starting selenium server... started - PID:  58806

[Google Page Section] Test Suite
====================================

Running:  Test
 ✖ Error: appSection was not found in "menu". Available elements: mail,images
    at Object.module.exports.Test (/Users/MYUSER/nightwatch/tests/googlePageSection.js:8:17)

FAILED:  1 errors (16ms)

 _________________________________________________

 TEST FAILURE: 1 error during execution,  0 assertions failed, 0 passed. (230ms)

 ✖ googlePageSection

   - Test (16ms)

     Error while running [Google Page Section / Test]:

     Error: appSection was not found in "menu". Available elements: mail,images
       at Object.module.exports.Test (/Users/MYUSER/nightwatch/tests/googlePageSection.js:8:17)

So does this functionality not work at all, or am I doing something wrong? 
If I am doing something wrong, could you point me in the direction of correcting my error? 
I would really like to use the nested sections functionality, still pretty new to Node/Nightwatch.

Thanks in advance!

[Timur]

mb you wrote '@menu' with error?

[Silvanus]

@Timur
Not sure what you mean. Are you seeing something I am not?
I largely copy/pasted the code from the Nightwatchjs site. If you see something g wrong specifically with what is above, a more specific pointer would be great, because I can't see the issue.
As I said, the code above really isn't mine, mine is more complex, but if this basic example doesn't function, maybe there's a deeper issue.

Thanks!

[Amit Kulkarni]

Has this issue resolved. Im also facing nested page objects to work.   

Error while running [Appointment / Weekview Appointment / weekview_appointment]:

     Error: No selector property for section "sections" Instead found properties: appslot2,sections,parent,name

       at Array.forEach (native)

       at Object.module.exports.weekview_appointment

sections: {

              appslot1: {

                  selector: "//div[@class='WeekView__container___3Y-8K']",

                  locateStrategy: 'xpath'

              },

              sections: {

                  appslot2: {

                      selector: "//div[@class='WeekView__calendar___21NEN']",

                      locateStrategy: 'xpath'

                  },

                  sections: {

                      appslot3: {

                          selector: "//div[@class='Column__container___4SBWf']",

                          locateStrategy: 'xpath'

                      },

                      sections: {

                          appslot4: {

                              selector: "//div[@class='TimeSlots__timeSlot___yXsoz']",

                              locateStrategy: 'xpath'

                          }

                      }

                  }

              }

              

          }

[Silvanus]

Still unable to make this work. 
Does anyone have an example of being able to 'click' on a nested section that works?

[Trevor McCauley]

@Silvanus you're using an element reference that doesn't exist.  For menuSection you're referencing '@appSection', but only @mail and @images exist.  If you want to click something from the menu section through an element selector, it should be defined in the elements object under the menu section.

[Silvanus]

@Trevor,
Thanks for the response.  Just making sure I am understanding correctly.

So the example from "http://nightwatchjs.org/guide#defining-sections  > Example of nesting page object sections" does not work? 
Based on the example the section itself having a defined selector should be clickable, essentially acting like an element itself, and thus be able to navigate/affect elements within that section.  The example provided via the documentation is nearly identical to what I had included in my first post. 

I can make it work using the way you describe, but that is not what is described in the Nightwatchjs documentation.  If the documentation is the intended functionality, then that functionality appears to be broken, if it is not, then it appears the documentation is inaccurate.

At the most basic, you have provided me with a way to more cleanly organize my page objects.  It does seem redundant to have to do it this way though, the method described in the documentation seems more intuitive/less repetitive.

Thanks again for the reply.  I appreciate you taking the time to look at this.

[Trevor McCauley]

Yeah, that example in the nightwatch docs looks to be a copy-paste error, because 'appSection' is a variable in the test case (defined as 'menuSection.section.apps') not an element definition for the page object section which is what "@" references point to.

In fact, though expect.element() and expect.section() are the same function - both looking up either sections or elements by name - I'm pretty sure @ selectors only allow you to target elements, and not sections.  So even if the example meant to target the section via '@apps', which is the section's name, a reference that would resolve to 'div.gb_uc', it wouldn't work because only the elements are checked when using "@" selectors in commands.

Sections are meant to be more of a way to namespace and section off a part of a page or component or something else more complex.  You wouldn't necessarily want to target it directly with commands like click(), since it represents a more complicated set of elements (and operations) that exist within that section definition.  If you do, for whatever reason, need to interact with both the element of the section in the parent context (parent page object or section), you would need to duplicate its selector as an element definition.

It looks like the appSection example was added this past summer by an outside contributor.  I'll log an issue pointing out this error that you've found concerning it.... https://github.com/nightwatchjs/nightwatch-docs/issues/62