title: Protractor element(..) returning undefined from a separate file
body: <p>I'm writing a Protractor test and in my test.step.js file I have </p>
  
  <pre><code>element(by.css('...')).getText().then(function (text) {
      expect(text).to.equal('expectedText');
  });
  </code></pre>
  
  <p>This works as expected and passes.</p>
  
  <p>Instead I created a test.page.js file and in there put <code>this.field = element(by.css('...'));</code> and then in my step file had</p>
  
  <pre><code>"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');
         });
      });
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>test.page.js looks like:</p>
  
  <pre><code>"use strict";
  
  module.exports = (function () {
      function TestPage() {
          this.field = element(by.css('...'));
      }
  
      return TestPage;
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks</p>