javascript - Protractor/WebDriverJS 将元素值作为对象数组返回

Question

我有 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;
};

Answer 1

您应该返回 map() 的结果这将是一个解析为对象数组的 promise :

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 放在这里的(用注释标记)。并注意帮助解决工具提示文本的多个 promise 的 protractor.promise.all()。

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

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