javascript - Cannot locate element using recursion after it found it as visible -

my problem:

i trying click options in dropdown nightwatch, using sections in page objects. i'm not sure if it's problem section declaration or i'm missing scope-related. problem finds element visible, when tries click throw error cannot locate using recursion.

what try fix issue using sections?

in test:

var mypage = browser.page.searchpageobject(); var mysection = searchpage.section.setresults;  // [finding , clicking dropdown opens , displays options] browser.pause (3000);  browser.expect.section('@setresults').to.be.visible.before(1000); mypage.myfunction(mysection, '18'); 

in page object:

var searchkeywordcommands = {     myfunction: function (section, x) {         section.expect.element('@set18').to.be.visible.before(2000);         if (x == '18') section.click('@set18');         //[...] };  module.exports = {     //[.. other elements , commands..]     sections: {         setresults: {             selector: '.select-theme-result', //have tried '.select-content' , '.select-options' same result             elements: {                 set18: '.select-option[data-value="18"]',                 set36: '.select-option[data-value="36"]' //etc              }}}} 

here source code:

when run piece of core, seems find section, finds element visible (i can see opens dropdown , shows options) when trying click option, error: error: unable locate element: section[name=setresults], element[name=@set18]" using: recursion

here full error:

my attempts:

i have tried declare set18 selector individual element instead of inside of section , works fine way, won't work inside of section. have tried selectors available define section's selector, won't work of them.

this doing with(lol) assume steps (find dropbox - click dropbox - select value).

var getvalueelement = {         getvalueselector: function (x) {             return 'li[data-value="'+ x + '"]';         } };   module.exports = {     //[.. other elements , commands..]     sections: {         setresults: {             commands:[getvalueelement],             selector: 'div[class*="select-theme-result"', //* mean contains,sometime class long , unique,also because lazy.             elements: {                 sethighlight:'li[class*="select-option-highlight"]',                 setselected:'li[class*="select-option-selected"]',                  //set18: 'li[data-value="18"]',                 //set36: 'li[data-value="36"]'                  // think getvaluefunction better,what if have 100+ of set.              }}}} 

in test

var mypage = browser.page.searchpageobject(); var mysection = searchpage.section.setresults;  // [finding , clicking dropdown opens , displays options] mysection      .click('@dropboxselector')      .waitforelementvisible('@sethighlight',5000,false,           function(){             var set18 = mysection.getvalueelement(18);             mysection.click(set18);             }); 

ps:in case(i think case also), dropbox or small third-party js framework used many times in web app, better create different pageobject it,make pageobject/section simple possible.