Cannot Locate Element Using Recursion After It Found It As Visible

My Problem: I am trying to click options in a dropdown with Nightwatch, using sections in page objects. I'm not sure if it's a problem with the section declaration or i'm missing s

Solution 1:

This is what i am doing with(LOL) I assume steps would be (find dropbox - click dropbox - select value).

var getValueElement = {
        getValueSelector: function (x) {
            return'li[data-value="'+ x + '"]';
        }
}; 

module.exports = {
    //[.. other elements and commands..]sections: {
        setResults: {
            commands:[getValueElement],
            selector: 'div[class*="select-theme-result"', //* mean contains,sometime class is too long and unique,also because i am lazy.elements: {
                setHighlight:'li[class*="select-option-highlight"]',
                setSelected:'li[class*="select-option-selected"]', 
                //set18: 'li[data-value="18"]',//set36: 'li[data-value="36"]' // i think getValueFunction is better,what if you have 100+ of set.

            }}}}

In your test

var myPage = browser.page.searchPageObject();
var mySection = searchPage.section.setResults;

// [finding and clicking the dropdown so it opens and displays the options]
mySection
     .click('@dropboxSelector')
     .waitForElementVisible('@setHighlight',5000,false,
          function(){
            var set18 = mySection.getValueElement(18);
            mySection.click(set18);
            });

Ps:in my case(i think your case also), dropbox or any small third-party js framework which is used many times in your web app, so better create a different PageObject for it,make pageObject/section is simple as possible.