NightwatchJs, wait for loop to gather array of element ids synchronously and continue

Question

I need to gather an array of checkbox ids that sit inside an OL and then use that array of ids later to choose one at random, the problem i have is that because everything runs in the callbacks asynchronously my array is always empty by the time the code runs below the nightwatch calls.

Here is my code so you can see what i mean:

module.exports = {
    'test-range-filter': function(browser)
    {
        // array to hold the input (checkbox) element ids
        let checkboxElementIds = [];

        browser.url(browser.launch_url + '/e-liquids/flavour-types/apple');

        // loop the li elements
        browser.elements('css selector','#narrow-by-list > div:nth-child(3) > div.filter-options-content > div > ol > li',function(foundElements){

            // loop each of the li elements
            foundElements.value.forEach(function(liElement){

                // get the object keys
                let liElementKeys = Object.keys(liElement);

                // get the li element id using the keys[0]
                let liElementId = liElement[liElementKeys[0]];

                // use the li element id, to find the input (checkbox) inside of it
                browser.elementIdElement(liElementId, 'css selector', 'input', function(inputElement) {

                    // store the element id in the array
                    checkboxElementIds.push(inputElement.elementId);

                })

            })

        });


        console.log("CHECKBOX ELEMENTS",checkboxElementIds)

    }

};

Because the calls before console.log("CHECKBOX ELEMENTS",checkboxElementIds) are run async my checkboxElementIds array is always empty by the time that part of the code executes, the array does get populated, i can see by adding this:

setTimeout(function() {
            console.log("CHECKBOX ELEMENTS", checkboxElementIds)
        },5000);

Which gives this output:

CHECKBOX ELEMENTS [
  'f37d1d8f-9575-4f97-b359-db7d357b4ff0',
  'dcc155ca-19ea-4cf0-be6c-413302e55888',
  'fe0c4ce8-0b07-4418-bd2f-3de720bcbfbb',
  'ae77658f-be3c-47af-ad3d-23db4a327d3b',
  '34001645-b33c-4a27-ba62-259c5561ee09',
  '50241232-5799-4921-9e5d-5181e47e05f3',
  'f26a2208-08b3-4ed4-a2ed-3d6d850d0553',
  '4653ad6d-514a-4ca8-b55d-9a613d88a296',
  'f4c820b6-8d60-4fd7-943c-465080feddcc'
]

I don't want to use a timer as it's unknown how long the process will take each time but I'm not sure how to make it run the code synchronously so i can continue down and select one at random.

Answer 1

To answer my own question, in case it helps anyone, i figured i can do it as follows:

'test-range-filter': async function(browser)
    {
        // array to hold the input (checkbox) element ids
        let checkboxElementIds = [];

        browser.url(browser.launch_url + '/e-liquids/flavour-types/apple');

        let foundElements = await browser.elements('css selector','#narrow-by-list > div:nth-child(3) > div.filter-options-content > div > ol > li');

        // loop each of the li elements
        for (let e in foundElements){

            // get the li element
            let liElement = foundElements[e];

            // get the object keys
            let liElementKeys = Object.keys(liElement);

            // get the li element id using the keys[0]
            let liElementId = liElement[liElementKeys[0]];

            // use the li element id, to find the input (checkbox) inside of it
            let inputElement = await browser.elementIdElement(liElementId, 'css selector', 'input');

            // get the object keys of the input element
            let inputElementKeys = Object.keys(inputElement);

            // get the input element id using keys[0]
            let inputElementId = inputElement[inputElementKeys[0]];

            // store the element id in the array
            checkboxElementIds.push(inputElementId);

        }

        console.log("IDS",checkboxElementIds)


    },