How to accurately use getText() with Protractor and Page Object Model in Javascript

Question

I am having a hard time returning values from my page object. Using getText() returns the whole object, not just the text. This is due to getText() being a Promise, if I understand correctly.

I have my code if needed, but what I'm trying to accomplish is similar to this popular online example. I'll use it for it's simplicity.

var AngularHomepage = function() {
  var nameInput = element(by.model('yourName'));
  var greeting = element(by.binding('yourName'));

  this.get = function() {
    browser.get('http://www.angularjs.org');
  };

  this.setName = function(name) {
    nameInput.sendKeys(name);
  };

  this.getGreetingText = function() {
    return greeting.getText();
  };
};
module.exports = new AngularHomepage();

Here is the spec file. I've modified it to console.log the return.

var angularHomepage = require('../pages/AngularPage');
describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    angularHomepage.get();

    angularHomepage.setName('Julie');
    var log = angularHomepage.getGreetingText();
    expect(angularHomepage.getGreetingText()).toEqual('Hello Julie!');
    console.log(log);
  });
});

Here's where I'm very confused. The expectation and test pass. But the console logs the entire object, Too long to add here. It is most definitely NOT just "Hello Julie!". I would love some clarification on 2 things.

a. Is the above an accurate way to make an "expect" statement with getText()? I don't know how the test could pass, while the console.log is the entire object, not the required text. Is this simply because the "expect" fulfills the promise that is returned?

b. Below I have modified the method in the Page Object, fulfilling the promise to where the console output really is "Hello Julie!". The problem is, I have to use "expect" here, rather than in my spec (or a least, I don't know how to return the text only). Is there something wrong with having an expect statement in the Page Object method itself, like this? Or a simple way to just return the element's text?

  this.getGreetingText = function() {
    greeting.getText().then(function (text) {    
      console.log(text);
      expect(text.toEqual('Hello Julie!'));
  });
    // expect is done, no return needed.
    //return greeting.getText();
  };

From a tester's perspective, It seems more accurate to compare the text, not whatever the first example is doing. But if the first example is acceptable, and it is not advisable to have "expect" in the page object, then I guess that's what I'll do!

Answer 1

I believe all you need to do is make your function async and then throw an await in front of your variable assignment.

var log = await angularHomepage.getGreetingText();

This will pull the text out of the promise and store it into the variable.

Answer 2

Using a then statement can be used to extract the text from a promise. This is only necessary if you want to log the text, as an expect statement could handle the .getText()

angularHomepage.getGreetingText().then(function(text){
    console.log(text);
    expect(text).toBe('Hello Julie');
});