title: Returning another Page Object from a Page Object function in webdriverJS / Protractor?
body: <p>I am used to WebDriver Java approach for implementing Page Object pattern, which is described <a href="https://code.google.com/p/selenium/wiki/PageObjects" rel="nofollow">here</a>
  So everything in Java WebDriver Page Object pattern boils down to following: </p>
  
  <blockquote>
    <ol>
    <li>The public methods represent the services that the page offers  </li>
    <li>Try not to expose the internals of the page</li>
    <li>Generally don't make assertions</li>
    <li>Methods return other PageObjects</li>
    <li>Need not represent an entire page</li>
    <li>Different results for the same action are modelled as different
    methods</li>
    </ol>
  </blockquote>
  
  <p>So I am concerned about point <strong><em>4.Methods return other PageObjects</em></strong> - 
  <strong>Can it be applied to webdriverJS or Protractor cases?</strong></p>
  
  <p>The reason I am asking this is that I have not yet seen this approach applied to Protractor scripts - usually all specs(tests in jasmine) are intended for testing only ONE page, BUT not testing complete work flow (1.logging in 2.going into the system further to test a whole feature of a system, but not only one page)
  E.g.:</p>
  
  <pre><code>MainPage=require('./MainPage.js');
  var LoginPage = function() {
      this.userNameInput = element(by.id('login'));
      this.passwordInput = element(by.id('password'));
      this.submitButton = element(by.id('submit'));
  
      this.loginWithValidCredentials= function(userName, password) {
          this.userNameInput.sendKeys(userName);
          this.passwordInput.sendKeys(password);
          this.submitButton.click();
          return new MainPage();
      };
  
      this.loginWithInvalidCredentials = function(userName, password) {
          this.userNameInput.sendKeys(userName);
          this.passwordInput.sendKeys(password);
          this.submitButton.click();
          return this;
      };
  };
  module.exports = LoginPage;
  </code></pre>
  
  <ol>
  <li>Successful Login in to a page from LoginPage object: <strong>loginWithValidCredentials()</strong> function should return <strong>new MenuPage object</strong> </li>
  <li>Unsuccessful Login in to a page from LoginPage object: <strong>loginWithInvalidCredentials()</strong> function should return <strong>the same LoginPage object</strong> (e.g. <strong><em>this</em></strong>) </li>
  </ol>
  
  <p>So basically I want to use this Page Object pattern in spec files like this:</p>
  
  <pre><code>var LoginPage = require('../pages/LoginPage.js');
  describe('Login with username and password', function () {
      var loginPage = new LoginPage();
      var mainPage; 
    it('Logging in with VALID credentials', function () {               
    mainPage = loginPage.loginWithValidCredentials(
                      "username",
                      "password");
   **//interaction with mainPage goes here**
  });
  </code></pre>