Protractor: Trying to read text after writing to text box for e2e testing

Question

In my html document I have the following code:

<label class="field" for="first_name">First Name:</label>
<span class="pull-right"><input type="text" id="first_name">
    name="first_name" ng-model="first_name">
</span>

This will give me a textbox with a label next to it saying "First Name".

I then write my name in the textbox using the following code:

element(by.model('first_name')).sendKeys('Frank');

this code will write Frank in the text box, but now my goal is to try to read the text from the textbox to make sure that it actually wrote my name. I am having a lot of trouble doing this.

I tried using the following code to read from the text box:

expect(element(by.model('first_name')).getText()).to.equal('Frank');

But I get this Error:

AssertionError: expected { Object (locator_, parentElementFinder_, ...) } to equal 'Frank'

Also when i try to do a:

console.log(element(by.model('first_name')).getText());

I get this error:

{ locator_: { findElementsOverride: [Function], toString: [Function: toString] }, parentElementFinder_: null, opt_actionResult_: { then: [Function: then], cancel: [Function: cancel], isPending: [Function: isPending] }, opt_index_: undefined, click: [Function], sendKeys: [Function], getTagName: [Function],
getCssValue: [Function], getAttribute: [Function], getText: [Function], getSize: [Function], getLocation: [Function],
isEnabled: [Function], isSelected: [Function], submit: [Function], clear: [Function], isDisplayed: [Function], getOuterHtml: [Function], getInnerHtml: [Function], toWireValue: [Function] }

I get this same Error when trying to use getAttribute('value'). I am not sure what the error means exactly and I'm not too sure what I am looking at when I use console.log(). I am kinda new to using protractor. Any help is much appreciated and thank you ahead of time.

EDIT: FULL spec.js

var chai            = require('chai'),
    chaiAsPromised  = require('chai-as-promised');

chai.use(chaiAsPromised);

expect = chai.expect;

before(function() {
    // suite wide initial setup here
    browser.get("http://127.0.0.1:5000/");
    browser.waitForAngular();
});

it('Should redirect and load template',function(){
    element(by.id('authentication'))
        .element(by.css('.text-center'))
        .element(by.linkText('Click here'))
        .click();
    expect(browser.getCurrentUrl()).to.eventually.have.string('/#/home');
});

it('Should Enter name into text box', function(){
    element(by.model('first_name')).sendKeys('Frank');
    expect(element(by.model('first_name')).getAttribute('value'))
        .to.equal('Frank');
});

Answer 1

Since this is an input element you are working with, you need to read the value attribute:

expect(element(by.model('first_name')).getAttribute('value')).toEqual('Frank');

The actual problem is that you are overriding the expect() - in this case you need to resolve the promise manually using then():

element(by.model('first_name')).getAttribute('value').then(function (value) {
    expect(value).to.equal('Frank');
});