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.
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)
},