javascript - 如何从 Protractor 中的表中收集和返回聚合数据作为数组？

Question

我正在尝试在 Protractor 测试中从用 Angular 编写的数据表中聚合日期列表。我正在从 Protractor 测试中调用的 PageObject 类进行聚合。我知道我的代码成功地获取了我想要的文本，但是当我尝试 console.log 返回的数组时，我得到一个空数组。我还是 Javascript/Typescript、Angular 和 Protractor 的新手，这可能是因为我对这个开发环境的异步特性不熟悉。

代码如下，

带有方法的 PageObject SpecMapper 类:

import { browser, element, by } from 'protractor';

export class SpecMapperPage {
    getImportDateSubmittedColumnValues() {
        let stringDatesArray: Array<string> = [];
        // currently this css selector gets rows in both import and export tables
        // TODO: get better identifiers on the import and export tables and columns
        element.all(by.css('md-card-content tbody tr.ng-tns-c3-0')).each(function(row, index){
            // check outerHTML for presence of "unclickable", the rows in the export table
            row.getAttribute('outerHTML').then(function(outerHTML:string) {
                // specifically look for rows without unclickable
                if(outerHTML.indexOf("unclickable") < 0){
                    // grab the columns and get the third column, where the date submitted field is
                    // TODO: get better identifiers on the import and export columns
                    row.all(by.css("td.ng-tns-c3-0")).get(2).getText().then(function(text:string) {
                       stringDatesArray.push(text);
                    });
                }
            });
        });
        return stringDatesArray;
    }
}

我知道这不是最漂亮的代码，但它是临时占位符，而我的开发人员让我更好地获取我的变量的属性/类/ID。需要注意的关键是我创建了一个字符串数组来保存我认为在方法完成时返回的相关值。

我使用 WebStorm 并在 stringDatesArray.push(text) 处设置断点和 return stringDatesArray线。第一行显示 text变量有一个字符串变量，我正在寻找并成功推送。我在 Debug模式下看到成功，因为我可以看到 stringDatesArray并查看其中的值。第二行，返回数组，显示局部变量 stringDatesArray是空的。当我尝试对数组进行 console.log 时，以下代码中会回显这一点:

Protractor 运行带有我的测试的 Spec 类:

import { SpecMapperPage } from "./app.po";
import {browser, ExpectedConditions} from "protractor";

describe('spec mapper app', () => {
    let page: SpecMapperPage;
    let PROJECT_ID: string = '57';
    let PROJECT_NAME: string = 'DO NOT DELETE - AUTOMATED TESTING PROJECT';

    beforeEach(() => {
        page = new SpecMapperPage();
    });

    describe('import/export page', () => {
        it('verify sort order is desc', () => {
            browser.waitForAngularEnabled(false);
            // Step 1: Launch Map Data from Dashboard
            page.navigateTo(PROJECT_ID);
            browser.driver.sleep(5000).then(() => {
                // Verify: Mapping Screen displays
                // Verify on the specmapper page by checking the breadcrumbs
                expect(page.getProjectNameBreadCrumbText()).toContain(PROJECT_NAME);
                expect(page.getProjectMapperBreadCrumbText()).toEqual("MAPPER");

                // Verify: Verify Latest Submitted Date is displayed at the top
                // Verify: Verify the Submitted Date column is in descending order
                console.log(page.getImportDateSubmittedColumnValues());
            });
        });
    });
});

我承认这段代码没有积极地使用 Protractor 的细节，我们的应用程序存在一个已知问题，几个月内不会得到解决，所以我 99% 的时间都是直接访问驱动程序。

您会注意到，我将上面发布的方法称为 browser.driver.sleep().then() 中的最后一行。子句， page.getImportDateSubmittedColumnValues() .

我想也许我在加载页面之前遇到了异步问题，因此我把它放在 .then()条款;但通过调试了解到情况并非如此。一旦我让数组正确返回，这段代码应该可以工作。

console.log 正在打印一个空的 []大批。这与我在 PageObject SpecMapper 类中直接调试上述方法时看到的结果是同义的。我希望验证返回的字符串格式是否正确，然后我将进行一些日期顺序比较。我觉得返回从页面检索到的数据数组并不是一个不寻常的请求，但我似乎无法找到一个很好的方法来谷歌我正在尝试做的事情。

如果我遇到了一些非常明显的障碍，我深表歉意，我仍在学习 Typescript/Angular/Protractor 的细微差别。谢谢您的考虑!

我尝试使用整理的 promise 似乎很有希望，但在执行时失败了。

我更新的 PageObject SpecMapper 类

import {browser, element, by, protractor} from 'protractor';

export class SpecMapperPage {
    getImportDateSubmittedColumnValues() {
        let promisesArray = [];
        let stringDatesArray: Array<string> = [];
        // This CSS selector grabs the import table and any cells with the label .created-date
        element.all(by.css('.import-component .created-date')).each(function(cell, index) {
            // cell.getText().then(function(text:string) {
            //    console.log(text);
            // });
            promisesArray.push(cell.getText());
        });
        return protractor.promise.all(promisesArray).then(function(results) {
           for(let result of results) {
               stringDatesArray.push(result);
           }
           return stringDatesArray;
        });
    }
}

我使用更新的 SpecMapper PO 类进行更新的规范测试

import { SpecMapperPage } from "./specMapper.po";
import {browser, ExpectedConditions} from "protractor";

describe('spec mapper app', () => {
    let page: SpecMapperPage;
    let PROJECT_ID: string = '57';
    let PROJECT_NAME: string = 'DO NOT DELETE - AUTOMATED TESTING PROJECT';

    beforeEach(() => {
        page = new SpecMapperPage();
    });

    describe('import/export page', () => {
        it('TC2963: ImportComponentGrid_ShouldDefaultSortBySubmittedDateInDescendingOrder_WhenPageIsLoaded', () => {
            browser.waitForAngularEnabled(false);
            // Step 1: Launch Map Data from Dashboard
            page.navigateTo(PROJECT_ID);
            browser.driver.sleep(5000).then(() => {
                // Verify: Mapping Screen displays
                // Verify on the specmapper page by checking the breadcrumbs
                expect(page.getProjectNameBreadCrumbText()).toContain(PROJECT_NAME);
                expect(page.getProjectMapperBreadCrumbText()).toEqual("MAPPER");

                // Verify: Verify Latest Submitted Date is displayed at the top
                // Verify: Verify the Submitted Date column is in descending order
                page.getImportDateSubmittedColumnValues().then(function(results) {
                    for(let value of results) {
                        console.log("a value is: " + value);
                    }
                });
            });
        });
    });
});

当我在 return stringDatesArray; 的 PO 类中设置断点时行，我在不同的范围内有以下变量。请注意，promisesArray 有 3 个对象，但结果数组进入 protractor.promise.all( block 有 0 个对象。我不确定我的断开连接是什么。 :/



我想我遇到了一个范围问题，我在理解上有问题。你会注意到 getText() 上注释掉的 promise 解决方案。 ，这是我的 POC 证明我得到了我期望的字符串值，所以我不确定为什么它在下面作为解决方案呈现的 Promise Array 结构中不起作用。

只有我能找到的其他相关问题与抓取表格的特定行有关，而不是专门聚合要返回的数据以在 Protractor 中进行测试验证。你可以找到它 here如果你有兴趣。

Answer 1

正如您所提到的，您的问题是由 console.log 在实际填充变量之前返回变量的值引起的。

我从这个答案中摘录了一个片段，应该可以让你解决它:Is there a way to resolve multiple promises with Protractor?

var x = element(by.id('x')).sendKeys('xxx');
var y = element(by.id('y')).sendKeys('yyy');
var z = element(by.id('z')).sendKeys('zzz');

myFun(x,y,z);
//isEnabled() is contained in the expect() function, so it'll wait for
// myFun() promise to be fulfilled
expect(element(by.id('myButton')).isEnabled()).toBe(true);


// in a common function library
function myFun(Xel,Yel,Zel) {
  return protractor.promise.all([Xel,Yel,Zel]).then(function(results){
     var xText = results[0];
     var yText = results[1];
     var zText = results[2];

  });
}

所以在你的代码中它会像

getImportDateSubmittedColumnValues() {
    let promisesArray = [];
    let stringDatesArray: Array<string> = [];
    // currently this css selector gets rows in both import and export tables
    // TODO: get better identifiers on the import and export tables and columns
    element.all(by.css('md-card-content tbody tr.ng-tns-c3-0')).each(function(row, index){
        // check outerHTML for presence of "unclickable", the rows in the export table
        row.getAttribute('outerHTML').then(function(outerHTML:string) {
            // specifically look for rows without unclickable
            if(outerHTML.indexOf("unclickable") < 0){
                // grab the columns and get the third column, where the date submitted field is
                // TODO: get better identifiers on the import and export columns
                promisesArray.push(row.all(by.css("td.ng-tns-c3-0")).get(2).getText());
            }
        });
    });
    return protractor.promise.all(promisesArray).then(function(results){
        // In here you'll have access to the results 

    });
}

有很多不同的方法可以做到这一点。您可以在最后处理该方法中的数据，或者我认为您可以在“then”中返回数组，并像这样访问它:

page.getImportDateSubmittedColumnValues().then((res) =>{
    //And then here you will have access to the array
})