javascript - How to create and return an array of objects using protractor page object model design and promises

Question

I'm creating a page object model and one of the properties is all the users from a table. The table has a few columns so I'd like to parse that table and create a user object for each row, then return that set to then be used in tests. So far, this is what that property of my page object looks like:

users: {
    get: function() {
        let userRecords = [];
        var users = element.all(by.repeater('user in users')).each(function(tr, index) {
            let user = {
                name:   tr.element(by.css('td:nth-child(2)')).getText().then(text => {return text;}),
                role:   tr.element(by.css('td:nth-child(3)')).getText().then(text => {expect(text).toBeTruthy();}),
                status: tr.element(by.css('td:nth-child(4)')).getText().then(text => {expect(text).toBeTruthy();}),
                //actionsButton: tr.element(by.css('btn btn-default'))
            };
            userRecords += user;
        }).then(userRecords => {return userRecords});
        
        return userRecords;
    }
},

Through trial and error I encounter one of two outcomes when just trying to print to screen each element of userRecords:

1. each element prints as undefined or
2. userRecords is not defined.

Just to reiterate, I'm simply trying to build an array that holds each user as an object to then be able to iterate / filter on that set in my tests.

Given the approach I'm taking, what's the ideal way to construct this user array and resolve the promises?

Edit: it's worth noting that if I do a console.log() within each of the getText().then() statements, it does print the correct data from the table. So, I do know that it's reading the table correctly.

Answer 1

I'd go with a method that returns json, and would make it async

users: async function() {
  let userRecords = [];
  var users = element.all(by.repeater('user in users'));
  for (let i = 0; i < await users.count(); i++) {
    let tr = users.get(i);
    let user = {
      name: await tr.element(by.css('td:nth-child(2)')).getText(),
      role: await tr.element(by.css('td:nth-child(3)')).getText(),
      status: await tr.element(by.css('td:nth-child(4)')).getText()
    };

    userRecords.push()
  }
        
  return userRecords;
},

and then use:

console.log(
  JSON.stringify(
    await constructorName.users()
  )
)

should be as simple as that. Note, I didn't test the code, but I did use the approach in my experience. So it may require some minor modifications

In general, try to avoid .then - async/await is easier to use, .each - go with for loop instead. Also userRecords += user; doesn't do what you think it does (though I may be wrong here)