title: Get data from promises with protractor
body: <p>I'm setting up a suite of e2e tests for an angular app using protractor. I'm following a page object model pattern detailed in this <a href="http://www.thoughtworks.com/insights/blog/using-page-objects-overcome-protractors-shortcomings" rel="nofollow">article</a>. I'm having trouble with a particular test that involves creating a user and verifying that the the data was handled/persisted correctly. The steps in this test are as follows:</p>
  
  <p>1.) Create a user by having protactor send data to a form from a User object and submitting it:</p>
  
  <pre><code>//models.js
    TestUser = {
      Title: 'Big Boss Man',
      Email: 'theboss@gmail.com',
    }
  </code></pre>
  
  <p>2.) Verify that the data was correctly handled/persisted by inspecting that data in the newly created user's "Account Details" view. This data is displayed in a table like so:</p>
  
  <pre><code>// accountdetails.html
  &lt;table class="account-details" summary="Account details"&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;th&gt;Title:&lt;/th&gt;
         &lt;td class="ng-binding"&gt;Big Boss Man&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;th&gt;Email:&lt;/th&gt;
         &lt;td class="ng-binding"&gt;theboss@gmail.com&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>3.) Use a simple helper method which compares the matching key/value pairs of two passed in objects using jasmine's toEqual() method:</p>
  
  <pre><code>compareTwoObjects: function(object1, object2) {
  Object.keys(object1).forEach(function(key) {
    expect(object2[key].getAttribute('value')).toEqual(object1[key]);
  });
  </code></pre>
  
  <p>The problem: how can I write a method that will find the table using an element selector, burrow down into the <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code> elements, get their text values, and build an object of key/value pairs that I can compare with the original <code>TestUser</code> object?  Because I obviously don't understand promises very well, the following is what I came up with:</p>
  
  <pre><code>getUserData: {
    get: function() {
      var userData = {};
      $$('table[summary="Account details"] tbody tr')
      .then(function(rowElements) {
        rowElements.forEach(function(rowElement) {
          rowElement.$('th').getText().then(function(label) {
            rowElement.$('td').getText().then(function(text) {
              userData[label.slice(0,-1)] = text;
              // success! logs {Title: 'Big Boss Man', Email: 'theboss@gmail.com'}
              // on completion of loop
              console.log(userData);
            });
          });
        });
      });
      // failure, logs an empty object
      console.log(userData);
      return userData;
    }
  }
  </code></pre>
  
  <p>I understand it's not working because userData is being returned before the above promises are being resolved. How can I get around this or what do I need to think about differently?</p>