Can't use page objects pattern with protractor

Question

I'm following a few examples that i've found to start to organize my tests using page objects.

For example: https://github.com/juliemr/ng-page-e2e/blob/master/test/angularsite_page.js http://codingsmackdown.tv/blog/2014/07/08/using-page-objects-in-angularjs-protractor/

This is my page object file:

var PageObjects = function() {

    var preenchePsafe = browser.driver.findElement(by.id('global-search'));
    var opcaoPsafe = browser.driver.findElement(by.css('#search > ul > li:nth-child(1) > a'));

    this.abrirUrl = function() {
        dvr.get('http://home.pp.psafe.com/');
    };

    this.pesquisarPsafe = function (pesquisa){

        this.preenchePsafe.sendKeys(pesquisa);
        this.opcaoPsafe.click();
    };

};
module.exports = PageObjects;

and this is my test:

var pageObjects = require('./page.js');

describe('PSafe Home', function () {


    beforeEach(function () {
        var pageObjects = new page();
        isAngularSite(false);
        handlePromise = dvr.getAllWindowHandles();
    });

    it ('Pesquisar PSafe', function () {

        browser.get('http://home.psafe.com/');
        pageObjects.pesquisarPsafe('PSafe');

    })});

Then, when i execute i get the following error:

1) PSafe Home Pesquisar PSafe Message: ReferenceError: page is not defined Stacktrace: ReferenceError: page is not defined at [object Object]. (C:\Users\QARJ\WebstormProjects\ProtractorPiloto\piloto.js:6:31) at c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\jasminewd\index.js:94:14 at [object Object].webdriver.promise.ControlFlow.runInNewFrame_ (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\selenium-webdriver\lib\webdriver\promise.js:1654:20) at [object Object].webdriver.promise.ControlFlow.runEventLoop_ (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\selenium-webdriver\lib\webdriver\promise.js:1518:8) ==== async task ==== Asynchronous test function: beforeEach() at [object Object]. (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\jasminewd\index.js:93:33) at [object Object]. (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\async-callback.js:45:37) at [object Object].jasmine.Block.execute (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:1174:17) at [object Object].jasmine.Queue.next_ (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:2209:31) at [object Object]._onTimeout (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:2199:18) Error at [object Object]. (C:\Users\QARJ\WebstormProjects\ProtractorPiloto\piloto.js:5:5) at [object Object].jasmine.Env.describe_ (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:913:21) at [object Object].jasmine.Env.describe (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:898:15) at describe (c:\Users\QARJ\WebstormProjects\ProtractorPiloto\node_modules\protractor\node_modules\minijasminenode\lib\jasmine-1.3.1.js:658:27) at Object. (C:\Users\QARJ\WebstormProjects\ProtractorPiloto\piloto.js:3:1)

Edit:

After trying a few things, i "got it" doing the following:

this is my spec file:

 var pageObjectsModule = require('./page.js');

describe('PSafe Home', function () {
    var pageObject;

    beforeEach(function () {
        pageObject = new pageObjectsModule();
        isAngularSite(false);
        handlePromise = dvr.getAllWindowHandles();
    });

    it('Pesquisar PSafe', function () {

        dvr.get('http://home.psafe.com/');
        pageObject.pesquisarPsafe('PSafe');

    })
});

this is my page object file

 var PageObjects = function() {

    //var preenchePsafe = dvr.findElement(by.id('global-search'));
    //var opcaoPsafe = dvr.findElement(by.css('#search > ul > li:nth-child(1) > a'));

    this.abrirUrl = function() {
        dvr.get('http://home.psafe.com/');
    };

    this.pesquisarPsafe = function(pesquisa) {

        dvr.findElement(by.id('global-search')).sendKeys(pesquisa);
        //preenchePsafe.sendKeys(pesquisa);
        //this.opcaoPsafe.click();

    };

};

module.exports = PageObjects;

But i had to map the desired element and use sendKeys inside pesquisarPsafe(pesquisa) instead map it outside the function (those commented lines). I have no clue why this happens.

Answer 1

It doesn't look like you are naming your variables correctly. Try something like this:

var PageObjects = require('./page.js');

describe('PSafe Home', function () {

    beforeEach(function () {
        var pageObjects = new PageObjects();
        isAngularSite(false);
        handlePromise = dvr.getAllWindowHandles();
    });

    it ('Pesquisar PSafe', function () {

        browser.get('http://home.psafe.com/');
        pageObjects.pesquisarPsafe('PSafe');

    })
}); 

Answer 2

export class CosmicNovaSelectWardPage extends PageBase 
{

  private btnWardList     : any;
  private lblHeaderTitle  : any;
  private btnCancel       : any;

  constructor() {
    super();
    const element = Elements.CosmicNovaSelectWardPage;
    this.btnWardList = super.findLocators(element.btnWardList.findBy, element.btnWardList.value);
    this.lblHeaderTitle = super.findLocators(element.lblHeaderTitle.findBy, element.lblHeaderTitle.value);
    this.btnCancel = super.findLocators(element.btnCancel.findBy, element.btnCancel.value);
  }

  /**
   * Step: select specific ward from given ward list
   * @param ward
   * @returns {CosmicNovaBaseWardPage}
   */
  public step_selectUserWard(ward: string): CosmicNovaBasePhysicianPage 
  {
    log.info("Step: choose "+ward+" in ward list [:step_selectUserWard:]");
    this.Helper_Actions.findTextAndClick(this.btnWardList,ward);
    return new CosmicNovaBasePhysicianPage();
  }