Question

我有以下代码，我需要在其中用下拉列表元素填充数组，然后从函数返回该数组，以便从茉莉花测试用例断言该数组。

getAllCategoryName(): string[]{

        var usageCategoryFromPage: string[] =  [];

        E2EUtil.click(this.usageCategoriesPage.pageinationDropDownBtn);

        E2EUtil.click(this.usageCategoriesPage.highestPageRecords);

        element.all(by.xpath("//tbody[@class='ui-datatable-data ui-widget-content ui-datatable-hoverable-rows']/tr[*]/td[1]"))
            .each(function (element, index) {

                element.getText().then(function (text){
                    usageCategoryFromPage.push(text);
                })
            })

            .then(function(){

                console.log("Size of the array from inside the then block " + usageCategoryFromPage.length);

                usageCategoryFromPage.forEach(element => {
                     console.log("Usage Category Elements from inside the the function " + element);
                });

                return usageCategoryFromPage; // size here is 18
            });

        console.log("Usage Category size after the then block "  +usageCategoryFromPage.length)
        usageCategoryFromPage.forEach(element => {
              console.log("From Usage Category Page outside the then function" + element);
        });

        return usageCategoryFromPage; // size here is 0
    }

问题是usageCategoryFromPage数组在then块外被返回为0。

茉莉花测试用例如下：

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

        usageCategoriesPage.navigateTo();
        let allCategoryName = usageCategoriesPage.getAllCategoryName();
        allCategoryName.forEach(element => {
            console.log("Array elements printed from the test case " + element);
        });

有人可以帮忙吗？

Answer 1

1）所有量角器API都是异步的并返回诺言。

2）您需要在then()中使用promise的最终值。

3）如果承诺遵循then()链：a promise.then().then()....then()，许诺的最终值取决于then()链中最后一个then()的返回值。

例如：

element(all()).each() 
// return a promise and its eventual value is null

element(all()).getText() 
// return a promise and its eventual value is an String Array, 
// each String is the visible text of each found HTML element

var res = element(all()).getText()

.then(txts => {
    // the eventual value of promise: element(all()).getText()
    // will be passed-into the callback function of the next then() 
    // thus txts is the String Array
    // you can determine return anything or not return anything in this callback function

    // assume we return another String Array
    return ['a', 'b'];
})
// the return value in the previous `then()` callback function
// will be passed-into next `then()` callback function
.then(value => {
    // value = ['a', 'b']

    // assume we return the first String in Array
    return value[0]
});

res是位于then()链上的承诺，其最终价值取决于最后一个then()。

res.then(value=>{
    console.log(value);
    // print out a
})

固定代码：

getAllCategoryName(): string[]{

    var usageCategoryFromPage: string[] =  [];

    E2EUtil.click(this.usageCategoriesPage.pageinationDropDownBtn);

    E2EUtil.click(this.usageCategoriesPage.highestPageRecords);

    // you missed `return` at here. 
    return element
        .all(by.xpath("//tbody[@class='ui-datatable-data ui-widget-content ui-datatable-hoverable-rows']/tr[*]/td[1]"))
        .each(function (element, index) {
            element.getText().then(function (text){
                usageCategoryFromPage.push(text);
            })
        })
        .then(function(){

            console.log("Size of the array from inside the then block " + usageCategoryFromPage.length);

            usageCategoryFromPage.forEach(element => {
                 console.log("Usage Category Elements from inside the the function " + element);
            });

            return usageCategoryFromPage; // size here is 18
        });
}

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

    usageCategoriesPage.navigateTo();

    let allCategoryName = usageCategoriesPage.getAllCategoryName(); 
    // getAllCategoryName() return a promise, 
    // thus you need to consume the eventual value of promise in then()

    allCategoryName.then(categories => {
        console.log("Array elements printed from the test case " + categories.join(', '));
    });
}

从getAllCategoryName()到element.all().getText()的更简洁的实现方式

getAllCategoryName(): string[]{

    E2EUtil.click(this.usageCategoriesPage.pageinationDropDownBtn);

    E2EUtil.click(this.usageCategoriesPage.highestPageRecords);

    return element
        .all(by.xpath("//tbody[@class='ui-datatable-data ui-widget-content ui-datatable-hoverable-rows']/tr[*]/td[1]"))
        .getText();
}

如何使用Protractor从TypeScript中的函数返回数组？

1 个答案: