'TypeError: Undefined Is Not A Function' Using Protractor

I am aware there are many topics on this error code. However, I am struggling to find any solutions that help (or maybe I'm just stupid). I am building a Protractor test for a web

Solution 1:

There is at least one problem: addUserButton is not a function. Replace:

usersPage.addUserButton().click();

with:

usersPage.addUserButton.click();

And the same for confirm and back page object fields.

---

Also, instead of:

usersPage.userRole[0];

you probably meant to call the underlying page object function:

usersPage.userRole(0);

---

Aside from that, you probably meant to instantiate a new "users page" object. Replace:

var usersPage = new login_page;

with:

var usersPage = new users_page;

Solution 2:

require ('../page/users_page.js');

var login_page = function(){

    this.username = element(by.id('username'));
    this.password = element(by.id('password'));

    this.get = function(urlVal){
        browser.get(urlVal);
    };

    this.login = function(un, pass){
        this.username.sendKeys(un);
        this.password.sendKeys(pass);
        element(by.tagName('button')).click();
    };
};

module.exports = login_page;

require ('../page/users_page.js');

var users_page = function(){

    this.addUserButton = element(by.css('[role="button"]'));
    this.firstName = element(by.model('firstname'));
    this.lastName = element(by.model('lastname'));
    this.userName = element(by.model('username'));
    this.password = element(by.model('password'));
    this.confirmPassword = element(by.model('confirmpassword'));
    this.confirm = element(by.css('[class="btn btn-success marginRight10px floatLeft"]'));
    this.back = element(by.css('[class="btn floatLeft"]'));

    this.addUser = function(fn, ln, un, pw, cpw){
        this.firstname.sendKeys(fn);
        this.lastword.sendKeys(ln);
        this.username.sendKeys(un);
        this.password.sendKeys(pw);
        this.confirmpassword.sendKeys(cpw);
    };

    this.userRole = function(index){
        element(by.model('tes.userRole')).$('[value="'+index+'"]').click();
    };

    return require('./users_page.js');

};
module.exports = new users_page();

Note the last line of each page:

The working document has no 'new' statement or brackets after the 'module.exports'

Noticed the 'new' part due to Phil's comment, but didn't realise the brackets until just now, so credit to Phil!