page object design pattern protractor

Question

I am trying to move my protractor code to a page object design pattern I started by my login tests and please find my code below.

When running my test, protractor load the page bu fails when trying to enter text into the username password inputs, I have tried to locate username text area using by.id and by.input but both did not work. Please also note that when I run my login test before using the page object pattern protractor is able to find the text area.

page-login.js :

  var loginPage = function ()
{
   this.userName = element(by.input('userName'));
   this.password =  element(by.input('userPassword')) ;
   this.loginButton = element(by.id('login_form_signin_button'));
   this.loginText = element(by.css('#mainGlobalSearchBtn'));
   this.loginError = element(by.xpath('html/body/div[1]/div[1]/div[1]/form/div/p'));
   this.login = function (userName, password)
{
    loginPage.userName.sendKeys(userName);
    loginPage.password.sendKeys(password);
    loginPage.loginButton.click ();
    browser.waitForAngular ();
}

};





it('should not login : incorrect login details', function()

{
      var loginPage = new loginPage();            
      loginPage.login('incorrectusername','incorrectpassword');
     expect(loginPage.loginError.getText()).toContain('Access denied');
});   

Console output :

   1) Login should not login : incorrect login details
   Message:
    TypeError: undefined is not a function
   Stacktrace:
 TypeError: undefined is not a function
at null.<anonymous> (C:\Users\orsyp\DUX\k_workload_ar\ui\e2e\login.spec.js:3
1:26)
at C:\Users\orsyp\DUX\k_workload_ar\ui\node_modules\grunt-protractor-runner\
node_modules\protractor\jasminewd\index.js:54:12
at webdriver.promise.ControlFlow.runInNewFrame_ (C:\Users\orsyp\DUX\k_worklo
ad_ar\ui\node_modules\grunt-protractor-runner\node_modules\protractor\node_modul
es\selenium-webdriver\lib\webdriver\promise.js:1445:20)
at webdriver.promise.ControlFlow.runEventLoop_ (C:\Users\orsyp\DUX\k_workloa
d_ar\ui\node_modules\grunt-protractor-runner\node_modules\protractor\node_module
s\selenium-webdriver\lib\webdriver\promise.js:1310:8)
at wrapper [as _onTimeout] (timers.js:252:14)
at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

Answer 1

If I follow the Getting started doc example, you should add var loginPage = new loginPage(); into the it function.

it('should not login : incorrect login details', function() {
  //add this line
  var loginPage = new loginPage();   

  loginPage.login('incorrectusername','incorrectpassword');
  expect(loginPage.loginError.getText()).toContain('Access denied');
}); 

Answer 2

    const log = Factory.getLogger("Page.DashDashboardPage");

export class DashDashboardPage extends PageBase{

    private lblDashPageTitle        : any;
    private lnkDashMyDashboard      : any;
    private btnDashNewTeamDashboard : any;
    private txtDashSearchRecord     : any;

    constructor(){
        super();
        const element = Elements.DashDashboardPage;
        this.lblDashPageTitle       = super.findLocators(element.lblDashPageTitle.findBy,element.lblDashPageTitle.value);
        this.lnkDashMyDashboard     = super.findLocators(element.lnkDashMyDashboard.findBy,element.lnkDashMyDashboard.value);
        this.btnDashNewTeamDashboard= super.findLocators(element.btnDashNewTeamDashboard.findBy,element.btnDashNewTeamDashboard.value);
        this.txtDashSearchRecord    = super.findLocators(element.txtDashSearchRecord.findBy,element.txtDashSearchRecord.value);
    }

    /**
     * Get: load dash-dashboard base url
     * @returns {DashDashboardPage}
     */
    public get(): DashDashboardPage{
        ConfigRoute.visit_page('http://op.xxx-tek.com/test/');
        log.info("Step: navigate to http://op.xxx-tek.com/test/ [:get:]");
        return new DashDashboardPage();
    }

    /**
     * Validate: verify dash-board page title
     * @param title
     * @returns {DashDashboardPage}
     */
    public check_And_Validate_dash_page_title(title: string): DashDashboardPage{
        this.Helper_Assertion.expectToEqual(this.lblDashPageTitle,title);
        log.info("Validate: Verify dash page tile [:check_And_Validate_dash_page_title:]");
        return new DashDashboardPage();
    }
}