[Protractor] Testing With Protractor Page Objects

Protractor Page Objects are a recommended for testing your AngularJS applications. Page Objects abstract the interaction between the browser and your functional tests, resulting in much cleaner tests.

We don't want use 'browser' and element directly in the test, so we wrap those into a page object:

function IndexPage(){
    this.button = element(by.id('button1'));
    this.message = element(by.binding('vm.messageText'));

    this.getPageTitle = function(){
        return browser.getTitle();
    }

    this.get = function(){
        browser.get('http://127.0.0.1:8080');
    }

    this.clickButton = function (){
        this.button.click();
    }

    this.getMessageText = function (){
        return this.message.getText();
    }
}

module.exports = IndexPage;

Then in the test, we need to call get() method beforeEach.

    var page = new IndexPage();

    beforeEach(function (){
        page.get();
    });

-------------

var IndexPage = require('./indexPage');

describe('Simple page test', function() {

    var page = new IndexPage();

    beforeEach(function (){
        page.get();
    });

    it('Should get title of the page', function() {

        expect(page.getPageTitle()).toBe('E2E Testing');
    });

    it('should update the button text when click the button', function(){

            page.clickButton();
            expect(page.getMessageText()).toBe('button 1 clicked');
    })
});