Protractor / WebDriverJS 将元素值作为对象数组返回答案

【问题标题】：Protractor / WebDriverJS Return element values as an array of objectsProtractor / WebDriverJS 将元素值作为对象数组返回
【发布时间】：2016-09-14 15:34:33
【问题描述】：

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

当我调用此函数时，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;
};

【问题讨论】：

究竟什么在这里不起作用？有什么错误/输出有什么问题？
当我调用此函数时，return arr; 在其余代码之前运行。似乎是由于异步行为。

标签： javascript jasmine promise protractor webdriverjs

【解决方案1】：

您应该返回 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
            };
        });
    });
};

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

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

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

【讨论】：

此时进行了多次编辑并完成了编辑 - 确保您正在尝试最新版本的代码。
这对我来说非常有效。我从您的解决方案中学到了很多新东西。非常感谢。

【解决方案2】：

protractor 中的 map 函数将允许您返回一个值数组：http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.map

所以不要推入数组，只需执行以下操作：返回 { 城市：cityVal，已售出：已售出，连接：connVal }

【讨论】：