量角器/WebDriverJS Return 元素值作为对象数组

Question

我来自 Java+WebDriver 背景并且是 Protractor、WebdriverJS 和 Jasmine 的新手。在显示的图像中，我试图将鼠标悬停在所有气泡上并获取工具提示值（城市、已售出、已连接）并将它们作为对象分配给数组，并将其 return 分配给调用函数。谁能告诉我在这种情况下如何创建对象数组？我正在尝试从我的规范文件中断言它。

当我调用此函数时，return arr; 在其余代码之前运行。似乎是由于异步行为。

this.getSalesVolumeDistribution = function() {
var arr = [];
var icons = element.all(by.css('#map-container svg>circle'));
icons.map(function(elm) {
        browser.actions().mouseMove(elm).perform();
        var toolTipCity = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(2)'));
        var toolTipUnitsSold = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(3)'));
        var toolTipUnitsConnceted = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(4)'));

        toolTipCity.getText().then(function(text) {
            var cityVal = text.replace('City: ', '').replace(',', '');
            console.log(text.replace('City: ', '').replace(',', ''));
            var soldVal = toolTipUnitsSold.getText().then(function(text) {
                return text.replace('Units Sold: ', '').replace(',', '');
            });
            var connVal = toolTipUnitsConnceted.getText().then(function(text) {
                return text.replace('Units Connected: ', '');
            });

            arr.push({
                city: cityVal,
                sold: soldVal,
                conn: connVal
            });

            });
    });
return arr;
};

Answer 1

您应该 return map() 的结果， 将是一个解析为对象数组的承诺 :

this.getSalesVolumeDistribution = function() {
    var icons = element.all(by.css('#map-container svg>circle'));

    // CHANGE WAS MADE HERE v
    return icons.map(function(elm) {
        browser.actions().mouseMove(elm).perform();
        var toolTipCity = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(2)')).getText();
        var toolTipUnitsSold = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(3)')).getText();
        var toolTipUnitsConnceted = element(by
            .css('#map-container g.highcharts-tooltip tspan:nth-of-type(4)')).getText();

        // CHANGE WAS MADE HERE v
        return protractor.promise.all([toolTipCity, toolTipUnitsSold, toolTipUnitsConnceted]).then(function(tooltips) {
            var cityVal = tooltips[0].replace('City: ', '').replace(',', '');
            var soldVal = tooltips[1].replace('Units Sold: ', '').replace(',', '');
            var connVal = tooltips[2].replace('Units Connected: ', '');

            // CHANGE WAS MADE HERE v
            return {
                city: cityVal,
                sold: soldVal,
                conn: connVal
            };
        });
    });
};

请注意我是如何将 return 放在这里的（标有注释）。并注意帮助解决工具提示文本的多个承诺的 protractor.promise.all()。

然后，如果您需要断言函数的结果，将其放入 expect() - 它会隐式解析承诺，然后进行断言，例如：

expect(myPageObject.getSalesVolumeDistribution()).toEqual([
    {city: 'El Paso', sold: '344', conn: '321'},
    {city: 'New York', sold: '500', conn: '600'}
]);

Answer 2

量角器中的 map 函数将允许您 return 值数组：http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.map

因此，与其推送到数组，不如这样做： return { 城市：cityVal，已售出：已售出， conn: 连接值 }

量角器/WebDriverJS Return 元素值作为对象数组

Protractor / WebDriverJS Return element values as an array of objects

javascript

jasmine

promise

protractor

webdriverjs