Async code execution in protractor jasmine test

Question

I have the below jasmine test case where I would like to store the values returned from the function getAllUsageCategoriesDropListElements into an array so that I can access the array inside the test case and evaluate it contents with another array.

it('Validate the Usage Category droplist values matches with the Usage Categories Table',() => {

    let allUsageCategoryDropListElements: string[] =  [];

    additionalCostsPage.getAllUsageCategoriesDropListElements(
        element => {
            console.log("Text from the usage Cateory Droplist elements " + element);
            allUsageCategoryDropListElements.push(element);
            console.log(" from inside " + allUsageCategoryDropListElements.length);
        }
    );

    console.log("Size of the array is " +allUsagCategoryDropListElements.length );

});

Method is below:

getAllUsageCategoriesDropListElements(evaluationFunc: (element: string) => void) : void {

    E2EUtil.click(this.addAdditionalCostDialogue.usageCategoryField);

    E2EUtil.waitFor(this.addAdditionalCostDialogue.usageCategoryDropListContainer);

    browser.sleep(2000);

    var usageCategoryFromPage: string[] =  [];

    element.all(by.xpath("//*[@id='usageCategory']/div/div[3]/div/ul/li[*]/span"))

        .each(function (element, index) {

            element.getText().then(function (text){
                // console.log("text extracted is " + text);
                usageCategoryFromPage.push(text);
            })
        })

        .then(function(){
            usageCategoryFromPage.forEach(evaluationFunc);
        });
}

Size of the array printed inside the function increments properly but when printed outside it 0. I think it is because of async code execution. Can any one please help ? I am very new to this typescript world.

Answer 1

To run your code with an await you will need to add the async and await keywords correctly. Try:

it('Validate the Usage Category droplist values matches with the Usage Categories Table', async () => {

    let allUsageCategoryDropListElements: string[] =  [];

    await additionalCostsPage.getAllUsageCategoriesDropListElements(
        element => {
            console.log("Text from the usage Cateory Droplist elements " + element);
            allUsageCategoryDropListElements.push(element);
            console.log(" from inside " + allUsageCategoryDropListElements.length);
        }
    );

    console.log("Size of the array is " +allUsagCategoryDropListElements.length );

});

EDIT: Your getAllUsageCategoriesDropListElements is not asynchronous but you are using promises. You can update it to make it asynchronous and then your await/async in the calling function will work correctly.

Try:

async getAllUsageCategoriesDropListElements(evaluationFunc: (element: string) => void) : void {

    E2EUtil.click(this.addAdditionalCostDialogue.usageCategoryField);

    E2EUtil.waitFor(this.addAdditionalCostDialogue.usageCategoryDropListContainer);

    browser.sleep(2000);

    var usageCategoryFromPage: string[] =  [];

    let elements = element.all(by.xpath("//*[@id='usageCategory']/div/div[3]/div/ul/li[*]/span"));

    for(var i = 0; i < elements.length; i++) {
        let element = elements[i];
        let text = await element.getText();
        // console.log("text extracted is " + text);
        usageCategoryFromPage.push(text);
    }

    usageCategoryFromPage.forEach(evaluationFunc);
}