Protractor element(..) returning undefined from a separate file

Question

I'm writing a Protractor test and in my test.step.js file I have

element(by.css('...')).getText().then(function (text) {
    expect(text).to.equal('expectedText');
});

This works as expected and passes.

Instead I created a test.page.js file and in there put this.field = element(by.css('...')); and then in my step file had

"use strict"

module.exports = function exampleTest() {
    var TestPage = require("...");
    var testPage = new TestPage;
    ...
    test.Then(..., function (next) {
       testPage.field.getText().then(function (text) {
          expect(text).to.equal('expectedText');
       });
    });
}

then field is undefined. I have also tried adding getText() in the page file, but again get undefined or get told that I can't call 'then' on undefined.

In my mind, this should do exactly the same thing as the first example, but I'm far from an expert with Angular or JavaScript.

test.page.js looks like:

"use strict";

module.exports = (function () {
    function TestPage() {
        this.field = element(by.css('...'));
    }

    return TestPage;
});

Hoping someone can shine some light on why this is happening and what I should do instead to be able to put the CSS selector inside a page file for re-use.

Thanks

Answer 1

Your code new TestPage; returns the constructor TestPage, but it's never called.

You could return the class :

function TestPage() {
    this.field = element(by.css('...'));
}

module.exports = TestPage;

var TestPage = require("...");
var testPage = new TestPage;
testPage.field.getText().then(...

Or an instance of the class:

function TestPage() {
    this.field = element(by.css('...'));
}

module.exports = new TestPage();

var testPage = require("...");
testPage.field.getText().then(...